CODEWITHSUNDEEP
xamlwindows-phone-8.1
J86
J86

Reputation: 15237

GridView with two columns Win Phone 8.1

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:

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 what element I'm supposed to have in the <DataTemplate>!

Upvotes: 1

Views: 1106

Answers (1)

Jon
Jon

Reputation: 2891

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.

Upvotes: 1

Related Questions