GridView with two columns Win Phone 8.1 - xaml

I am currently learning Windows Phone 8.1 app development. I am going through this Channel 9 series of video tutorials. They are useful but unfortunately are for Windows Phone 8, not 8.1 and so there are some things I can't follow. I am stuck in such a situation.
I want to have the following layout driven by some data:
So far I have the following code:
<Pivot x:Uid="Pvt">
<PivotItem Header="{Binding Animals.Title}">
<GridView ItemsSource="{Binding Animals.Items}">
<GridView.ItemTemplate>
<DataTemplate>
<!-- not sure what would go in here -->
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</PivotItem>
</Pivot>
But not sure what element I'm supposed to have in the <DataTemplate>!

Gridview works fine in Windows Phone apps. Here is code from one of my apps in the app store. You need to set the size of the outer most 'Grid' of the DataTemplate. You won't be able to get the grids to fit the screen exactly unless you do some dynamic sizing after the UI is loaded.
<GridView Grid.Row="2" Margin="0,0,0,0"
ItemsSource="{Binding InfoTypeList}"
SelectionMode="None"
IsItemClickEnabled="True"
ItemClick="GridView_ItemClick">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="120" Height="120">
<Border Background="{ThemeResource PhoneAccentBrush}">
<Image Source="{Binding ImagePath}" Stretch="Uniform" Margin="10,10,10,20"/>
</Border>
<StackPanel VerticalAlignment="Bottom">
<TextBlock Text="{Binding Name}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" FontSize="18" HorizontalAlignment="Center" FontWeight="SemiBold" IsTextScaleFactorEnabled="False"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="Margin" Value="20 20 0 0"/>
</Style>
</GridView.ItemContainerStyle>
</GridView>
EDIT:
I played around with it and you can get it to look more like your picture (fit the items to the screen) by wrapping your GridView in a Viewbox and then limiting the number of rows by adding this to your GridView:
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" MaximumRowsOrColumns="2" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
You will have to play around with your margins to get the correct spacing.

Related

XAML parsing/layout rendering time very high

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)

UWP border wont use maximum space

Here I am again...
I have a ListView which loads items and prints them in the screen.
Everything is fine except I can't really make the XAML to work as I want it to.
The ListView outputs the content according to the DataTemplate which is supposed to output a "chat-like" display.
<DataTemplate x:Key="MessageListDataTemplate" x:DataType="disc:IMessage">
<Border Background="#2C2F33" BorderThickness="0,1,0,1" BorderBrush="Transparent" CornerRadius="5">
<StackPanel>
<StackPanel Orientation="Horizontal" Margin="5,2,0,0">
<TextBlock TextAlignment="Left" Text="{x:Bind Author,Mode=OneWay}" Foreground="White" FontSize="14"/>
<TextBlock TextAlignment="Left" Margin="5,3,0,0" Text="{x:Bind Timestamp,Mode=OneWay,Converter={StaticResource TimeToStringConverter}}" Foreground="LightGray" FontSize="10"/>
</StackPanel>
<TextBlock TextAlignment="Left" Margin="10,2,0,0" TextWrapping="WrapWholeWords" Text="{x:Bind Content, Mode=OneWay}" Foreground="#99AAB5" FontSize="20" />
</StackPanel>
</Border>
</DataTemplate>
The code is functional and it outputs this:
Instead of having the board to be sized according to the size of the message I would like it to be equal to the size of the screen. I have tried everything I know. Thank you!
Try adding the following style for the ListView:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>

WrapPanel inside ListBox in UWP

I am looking to add WrapPanel inside my ListBox so that it's item wrap both vertically and horizentally. I was able to achieve this in Windows Phone 8 Sliverlight with Microsoft toolkit with below code;
Windows Phone 8
<ListBox x:Name="ListSection" ItemsSource="{Binding Section}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" ></toolkit:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="20">
<Image Source="{Binding ImagePath}" Width="80" Height="80"></Image>
<TextBlock Style="{StaticResource PhoneTextBlockBase}"
HorizontalAlignment="Center"
Foreground="Black"
Text="{Binding Header}"
FontWeight="Bold"
VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
I understand that Microsoft toolkit it not available in UWP, is there any possibility I could achieve such behavior in UWP?
UWP not working
<ListBox x:Name="ItemsListBox" ItemsSource="{Binding Section}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel HorizontalAlignment="Stretch"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding ImagePath}" Width="80" Height="80"></Image>
<TextBlock HorizontalAlignment="Center"
Foreground="Black"
Text="{Binding Header}"
FontWeight="Bold"
VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Thanks!
You must use ListView and ItemsWrapGrid as ItemsPanel
you can check the MSDN docs here with examples
https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.itemswrapgrid.aspx
This example is for GridView but is the same for ListView
<GridView>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
you can use the property Orientation to set your items vertically or horizontally.
There is a port of the Toolkit's WrapPanel for UWP in the project WinRTXamlToolkit.
You can get it from NuGet.
Then in your Page add this prefix:
xmlns:toolkit="using:WinRTXamlToolkit.Controls"
Now you can use <toolkit:WrapPanel Orientation="Horizontal" ></toolkit:WrapPanel> as it was before.
#ARH you need to create a custom Panel class which inherits panel class and override MeasureOverride and ArrangeOverride methods.check out following links for reference.
https://msdn.microsoft.com/en-us/library/windows/apps/mt228347.aspx
http://www.visuallylocated.com/post/2015/02/20/Creating-a-WrapPanel-for-your-Windows-Runtime-apps.aspx
The WrapPanel is available from the Microsoft UWP Toolkit.
Here's some sample code (using v5.0.0):
...
xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
...
<ListView
Name="WrapPanelContainer"
Width="310" Height="200"
Margin="0,40,0,0"
HorizontalAlignment="Left"
Background="LightBlue"
IsItemClickEnabled="True"
>
<ListView.Resources>
<Style TargetType="ListViewItem">
<Setter Property="MinWidth" Value="0"/>
<Setter Property="MinHeight" Value="0"/>
<Setter Property="Padding" Value="0"/>
</Style>
</ListView.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel VerticalSpacing="10" HorizontalSpacing="10" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<Rectangle Fill="Red" Width="100" Height="50"/>
<Rectangle Fill="Blue" Width="200" Height="50"/>
<Rectangle Fill="Green" Width="50" Height="50"/>
<Rectangle Fill="Yellow" Width="150" Height="50"/>
</ListView>
NOTE: The ListItemView style here removes superfluous padding, allowing the WrapPanel spacing properties to be the control points for layout.

Windows Phone Allignment of a repeating image control

I am developing an application and I have an image control that displays however many images are stored in the database. So I have got the images to display. However the images are displaying below the previous one and not next to the previous one.
(ignore the names next to the picture I have taken them out now).
So my question is what method can I use to get them aligned, I'm not sure what I need to search for in Google, everything I can think of doesnt bring back anything close to what I am looking for. The XAML code is below:
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Pivot Control-->
<phone:Pivot Title="Share This!">
<!--Pivot item one-->
<phone:PivotItem Header="All Photos">
<Grid>
<ListBox Height="559" HorizontalAlignment="Left" Margin="6,20,0,0" x:Name="lst_viewPhotos" VerticalAlignment="Top" Width="444" FontSize="30" ItemsSource="{Binding}" SelectionChanged="lst_viewPhotos_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,10,0,0" >
<Image Source="{Binding}" HorizontalAlignment="Left" Height="100" Width="100"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</phone:PivotItem>
</phone:Pivot>
</Grid>
You can get them displaying alongside each other by setting the ItemsPanel
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
However I would recommend a GridView for this so that you can use a Wrapgrid which will reach the end of a Row or Column and wrap to a new Row or Column.
Something like this
<GridView>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>

How to make vertical scrolling list view with groups

I need to create a vertical scrolling list view with grouping enabled as shown below:
This is what I currently have:
<common:VariableSizeListViewWithSelection ItemsSource="{Binding Source={StaticResource cvs}}"
ScrollViewer.VerticalScrollBarVisibility="Auto"
IsItemClickEnabled="True"
ItemTemplateSelector="{StaticResource summaryViewTemplateSelector}" >
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="0,0,0,2">
<TextBlock Grid.Column="0" Text="{Binding Title}" Margin="0,-11,10,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" FontWeight="SemiBold" Foreground="#333333" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
<common:VariableSizeListViewWithSelection.GroupStyle>
<GroupStyle HidesIfEmpty="True">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Background="LightGray" Margin="0">
<TextBlock Text='{Binding Title}' Foreground="Black" Margin="5" Style="{StaticResource HeaderTextBlockStyle}"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="4" Width="300" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</common:VariableSizeListViewWithSelection.GroupStyle>
</common:VariableSizeListViewWithSelection>
But this is not working as expected and it creates a listview with correct grouping but with just one column like this:
Can you please point me as to what am I doing wrong?
We took it offline for a bit and it seems like changing the ItemsPanel of the ListView to a StackPanel make this work. I have a feeling the default ItemsStackPanel should still support grouping, but perhaps not with a custom group layout panel. Maybe there is a way to reconfigure a GridView to scroll vertically and this could work too.