I've got the problem, that I create an App, that will run on Windows Phone 8.1 and Windows 10 Mobile. This App is a non-UWP Windows Store App.
The problem I have is, that I have a list of a custom control that one has another List, that is not expanded (=collapsed). That looks like this:
The red rectangles are the ContentPresenter items of the first ItemControl and the green rectangles are the ContentPresenter items of the ItemControl in the first lists items, that is not visible on startup. It will be visible after the click on the expand-button. Both ItemControls have a DataTemplate configured to present what you see in the screenshot. (XAML code below)
The main problem I have is, that if I change the Pivot to the Pivot you see at the screenshot above, there is a freeze of the app for several seconds. It depends on the device how long this freeze is. In the W10M-Emulator on my PC I don't recognize a freeze but on a Lumia 620 with WP8.1 I have a freeze of 8.5 seconds.
In the profiler of Visual Studio it looks like this (I selected the range that is the problem I am talking about):
What I am wondering about is the large orange line with "Layout". If I expand it to the "big players", there is 60-70ms for each not visible item in the profiler.
I am asking myself why this is the case, even if the items are not visible and are in the VirtualizingStackPanel. The Number of Items of the ItemSourcein this example is 3 for the first ItemControl (red boxes) and 17, 59 and 1 for the second ItemControls that are only visible of the first item is expanded.
What I am also wondering about is, that regarding the timeline, all of the Items are processed at the same time because their baseline is for all items the same. But if I scroll down the profiler timeline details, I see another Event called "Parsing" for each item. That one is not processed in parallel for each item but serial. And the parsing of the last item fits to the end of the layout-event. This parsing events look like this:
What is the reason why the parsing takes so long time? I don't think that the controls are very complex etc. and there are no code behind procedures except some string formattings.
Finally here is the XAML code:
My PivotItem on the "MainPage" of the App:
<PivotItem
Header="Echtzeit"
Margin="10,-20,10,0"
>
<Grid>
<ScrollViewer
VerticalScrollBarVisibility="Visible"
>
<ItemsControl
ItemsSource="{Binding RealtimeDepartures, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
HorizontalAlignment="Stretch"
Margin="0"
>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<controls:RealtimeStation
StationName="{Binding StationName, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
Departures="{Binding DepartureList, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
FontSize="{Binding DataContext.ClientFontSize, ElementName=MainPg, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
</PivotItem>
The RealtimeStation Control XAML:
<UserControl
...
>
<UserControl.Resources>
<dec:BoolToVisibilityConverter x:Key="BoolToVisibilityConv"/>
</UserControl.Resources>
<Grid>
<AppBarButton
HorizontalAlignment="Left"
VerticalAlignment="Top"
Grid.Column="0"
Name="btnExpand"
Icon="{Binding ExpandButtonIcon, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
Click="btnExpand_Click"
IsEnabled="{Binding IsExpandButtonEnabled, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
IsCompact="True"
Margin="0,-8,-2,-4"
/>
<StackPanel
Orientation="Vertical"
Margin="48,12,0,0"
>
<TextBlock
Text="{Binding StationName, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
VerticalAlignment="Center"
FontSize="24"
/>
<TextBlock
Text="Derzeit stehen keine Abfahrten an"
FontStyle="Italic"
Visibility="{Binding ShowNoDepartures, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
FontSize="{Binding FontSize, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
/>
<TextBlock
Text="Zugausfälle vorhanden!"
Foreground="Red"
FontWeight="Bold"
Visibility="{Binding ShowTrainCanceled, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
FontSize="{Binding FontSize, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
/>
<ItemsControl
ItemsSource="{Binding DepartureList, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Margin="-48,0,0,0"
Visibility="{Binding IsExpanded, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay, Converter={StaticResource BoolToVisibilityConv}}"
>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentPresenter>
<controls:RealtimeDeparture
DepartureDetails="{Binding}"
FontSize="{Binding FontSize, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
/>
</ContentPresenter>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Grid>
</UserControl>
And finally the RealtimeDeparture Control:
<UserControl
...
>
<Grid>
<control:DisruptionIcon
Height="24"
Width="50"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Icon="{Binding TrainIcon, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
Margin="3"
/>
<StackPanel
Orientation="Vertical"
Margin="56,9,0,0"
>
<StackPanel
Orientation="Horizontal"
Margin="3,0"
VerticalAlignment="Center"
>
<TextBlock
Text="{Binding DelayTimeText, ElementName=main, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
Foreground="{Binding DelayColor, ElementName=main, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
/>
<TextBlock
Text="{Binding DepartureDetailsText, ElementName=main, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
Margin="3,0"
/>
</StackPanel>
<TextBlock
Text="{Binding InformationText, UpdateSourceTrigger=PropertyChanged, Mode=OneWay, ElementName=main}"
Visibility="{Binding IsInformationVisible, UpdateSourceTrigger=PropertyChanged, Mode=OneWay, ElementName=main}"
Margin="3"
FontStyle="Italic"
TextWrapping="Wrap"
/>
<TextBlock
Text="Zug fällt aus!"
Foreground="Red"
FontWeight="Bold"
Visibility="{Binding IsCanceledVisible, UpdateSourceTrigger=PropertyChanged, Mode=OneWay, ElementName=main}"
Margin="3"
/>
</StackPanel>
</Grid>
</UserControl>
Does anybody has an idea how to speed up this parsing? What is the reason why it is so slow? Do I have a design issue that is disabling the virtualization-functionality of the VirtualizedStackPanel? I already tried a lot but didn't find the reason why it is so slow.
I don't think virtualization is turned on.
Try setting the CanContentScroll property to true on your ScrollViewer:
<ScrollViewer
CanContentScroll="true"
VerticalScrollBarVisibility="Visible"
>
The other option can be using e.g. ListBox which supports virtualization on its own (as far as I know it is enough to set the ItemsPanelTemplate to VirtualizingStackPanel)
I found this question + answer to my problem here on stackoverflow, but for me its not totally clear where to change the
ListViewItemPresenter
I tried many things, but it seems like I cant find it on my own :(
Here is my XAML code for this frame:
<Page.Resources>
<DataTemplate x:Key="ItemListDataTemplate" x:DataType="data:Item">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Image Name="image" Source="{x:Bind CoverImage}" HorizontalAlignment="Center" Width="150" />
<StackPanel Margin="20,20,0,0">
<TextBlock Text="{x:Bind Name}" HorizontalAlignment="Left" FontSize="16" Name="NameTextBlock"/>
<TextBlock Text="{x:Bind Description}" HorizontalAlignment="Left" FontSize="10" Name="DescriptionTextBlock"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{x:Bind Price}" HorizontalAlignment="Left" FontSize="26" Name="PriceTextBlock"/>
<TextBlock Text="€" FontSize="26" Name="Currency" Margin="5,0,0,0"/>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView ItemsSource="{x:Bind Items}"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ItemClick="ListView_ItemClick"
IsItemClickEnabled="True"
ItemTemplate="{StaticResource ItemListDataTemplate}"
>
</ListView>
</Grid>
Can someone help me our please? Thank you very much for your time!
There are two ways to edit ListViewItemPresenter in your Page:
You can copy the XAML Template from here (the first XAML codes block below Default Style). Add it to your Page.Resources. ListViewItemPresenter lies among those XAML codes, you can edit its Properties and this style will be applied to all the items of this page's ListView. Notes: don't add x:Key to this style.
Add a ListViewItem Control to your Page like below:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListViewItem></ListViewItem>
</Grid>
Document Outline->Select ListViewItem->Edit Template->Edit a Copy:
Remove the x:Key Property of generated Style Resource, so that this style will be applied to all ListViewItem. Then you can edit the ListViewItemPresenter in the generated XAML Resource.
Just add your DataTemplate inside of the Listview.
Put it in the ItemTemplate property.
<ListView ItemsSource="{x:Bind Items}"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ItemClick="ListView_ItemClick"
IsItemClickEnabled="True" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Image Name="image" Source="{x:Bind CoverImage}" HorizontalAlignment="Center" Width="150" />
<StackPanel Margin="20,20,0,0">
<TextBlock Text="{x:Bind Name}" HorizontalAlignment="Left" FontSize="16" Name="NameTextBlock"/>
<TextBlock Text="{x:Bind Description}" HorizontalAlignment="Left" FontSize="10" Name="DescriptionTextBlock"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{x:Bind Price}" HorizontalAlignment="Left" FontSize="26" Name="PriceTextBlock"/>
<TextBlock Text="€" FontSize="26" Name="Currency" Margin="5,0,0,0"/>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I need a pivot page that in every pivot page there is a longlistselector to list the data...
this is the code that i write when i create a simple pivot page
<phone:PivotItem Header="all">
<phone:LongListSelector Name="AllNotes"
Background="Black"
Margin="0,0,0,0">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Background="White"
Margin="0,17,0,0">
<TextBlock Text="aaaa">
</TextBlock>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PivotItem>
but there isn't anything in the pivot item
i mean by defining a data template and then a stackpanel, there is nothing shown in the pivot item
can you help me ti figure out whats happening exactly?
here is my binding code
<phone:Pivot Title="MY NOTEPAD"
Background="DarkCyan">
<!-- All Notes -->
<phone:PivotItem Header="all">
<phone:LongListSelector Name="FirstListBox"
ItemsSource="{Binding AllNotes}"
Background="Black"
Margin="0,0,0,0">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,17,0,0">
<TextBlock Text="{Binding Title}"
TextWrapping="Wrap"/>
<TextBlock Text="{Binding Memory}"
TextWrapping="Wrap"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PivotItem>
now what you think about it?
I finally solve this problem in the way that I don't believe it!
The answer is that we have to start writing the application in the base of Pivot Application !!!
That I don't believe this in the first place!
But Thank You Anyway :)
I have a LongListSelector control on a page in my Windows Phone 8 app. For this control I set a GroupHeaderTemplate and a ItemTemplate and both contain a TextBlock. If I align the TextBlock controls to center I have some weird behavior (maybe not weird but unexplainable to me at the moment). When I open the page on my phone the centered text moves ca. 5px to the right. The move is visible to the user (it's happening after the page is loaded). I tried to solve this problem but all margin changes (and other trials) did not change the behavior and my friend Google couldn't help me either. Can some explain to my why this is happening and how to solve this?
My code (simplified):
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
<phone:LongListSelector x:Name="longList" LayoutMode="List" HideEmptyGroups ="true" Margin="5,0,5,5" ItemsSource="{Binding List, Mode=OneWay}" IsGroupingEnabled="True" Background="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<phone:LongListSelector.Resources>
<DataTemplate x:Key="itemTemplate">
<Grid Margin="10,10,10,0" Background="#FFF3F1F1" HorizontalAlignment="Left">
<TextBlock x:Name="name" Margin="10" TextWrapping="NoWrap" Text="{Binding Name}" VerticalAlignment="Center" FontSize="40"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="groupHeaderTemplate">
<Grid Margin="10,10,10,0" Background="#FFF3F1F1" HorizontalAlignment="Center">
<TextBlock x:Name="name" Margin="10" TextWrapping="NoWrap" Text="test" VerticalAlignment="Center" FontSize="40"/>
</Grid>
</DataTemplate>
</phone:LongListSelector.Resources>
<!--<phone:LongListSelector.JumpListStyle>
<StaticResource ResourceKey="jumpListStyle"/>
</phone:LongListSelector.JumpListStyle>-->
<phone:LongListSelector.GroupHeaderTemplate>
<StaticResource ResourceKey="groupHeaderTemplate"/>
</phone:LongListSelector.GroupHeaderTemplate>
<phone:LongListSelector.ItemTemplate>
<StaticResource ResourceKey="itemTemplate"/>
</phone:LongListSelector.ItemTemplate>
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding SelectItemCommand}"
CommandParameter="{Binding SelectedItem, ElementName=longList}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</phone:LongListSelector>
</Grid>
Thanks in advance
Hi I am trying to get my UI have scrolling in partial page having a list. Here's my code -
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="10,0,14,10">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBox x:Name="searchTerm" Text="potato" Width="379" />
<Button x:Name="btnSearch" Content="Go" Click="btnSearch_Click" />
</StackPanel>
<TextBlock x:Name="noResultsTxt" Visibility="Collapsed" Margin="10, 30, 0, 0" Text="No results found! try different search term" Style="{StaticResource PhoneTextNormalStyle}" />
<ScrollViewer Height="520" Width="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel>
<ListBox x:Name="itemlist" SelectionChanged="itemlist_SelectionChanged" Margin="0,10,0,0" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10" >
<TextBlock Text="{Binding Title}" FontSize="35" FontWeight="Normal"/>
<TextBlock Text="{Binding CommaCategories}" FontSize="20" FontWeight="Light" FontStyle="Italic"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
Doesnt seem to be scrolling at the List area. i seem to have figured out that the issue is with Scrollviewer not able to interact where ListBox exists. I verified that the scrolling is happening perfectly fine by setting IsHitTestVisible property of ListBox to be false.
Can someone help me out!
Answering my own question! Just as AMR commented it, I figured out that I don't need the scroll viewer, I just set the height of ListBox and scrolling worked fine! :)
On why external scrollviewer wont work with Listbox - https://stackoverflow.com/a/1294786/729032