Geek Answers Handbook

GridView with two columns Win Phone 8.1

I am currently studying application development for Windows Phone 8.1. I am watching this channel in the 9th video tutorial series . They are useful, but unfortunately for Windows Phone 8, not 8.1 , and so there are some things that I cannot follow. I am stuck in such a situation .

I want to have the following layout driven by some data:

two column layout

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 which element I should have in <DataTemplate> !

+1
source share
1 answer

Gridview works great in Windows Phone apps. Here is the code from one of my apps in the app store. You need to set the size of the outermost “grid” of the DataTemplate. You will not be able to get meshes to fit the screen unless you make a dynamic size after loading the user interface.

 <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 with it, and you can make it look more like your photo (fit the elements to the screen) by wrapping the GridView in the viewport 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 need to play with the fields to get the correct spacing.

+1
source

More articles:


All Articles