CODEWITHSUNDEEP
xamlwindows-runtime
Jalle
Jalle

Reputation: 97

How to change number of columns in GridView layout

I have Metro app with following layout:

 <!-- Horizontal scrolling grid -->
    <GridView 

            x:Name="itemGridView"
            AutomationProperties.AutomationId="ItemsGridView"
            AutomationProperties.Name="Items"
            TabIndex="1"

            Padding="116,136,116,46"
            ItemsSource="{Binding Source={StaticResource MyMenu}}"
            SelectionMode="None"
            IsSwipeEnabled="false"
            IsItemClickEnabled="True"

            ItemClick="ItemView_ItemClick" FontSize="12" FontStyle="Italic" HorizontalAlignment="Left" >

      <GridView.ItemTemplate>
        <DataTemplate >
          <Grid HorizontalAlignment="Left" Width="250" Height="250"  Background="Transparent">

            <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" />

            <StackPanel VerticalAlignment="Bottom" Background="Transparent" >
            <TextBlock Text="{Binding Description}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" 
                         Style="{StaticResource GroupHeaderTextStyle}"  Margin="15,0,15,10" FontSize="20" TextAlignment="Center"/>
            </StackPanel>
          </Grid>
        </DataTemplate>
      </GridView.ItemTemplate>
    </GridView>
  </Grid>

Thing is that items in this grid are now showing like this:
X X
X
while I want them to look like this
X X X

Upvotes: 1

Views: 79

Answers (1)

Chris W.
Chris W.

Reputation: 23280

First thing, when I see hard set TabIndex's and crazy Padding's on stuff I immediately think someones got a sloppy layout and an obfuscated DOM, but that's just a comment.

For your question though, you'll just need to go instruct it how you want to layout its children items by specifying the ItemsPanel that suits your needs.

So something more like this would be added to it along with your existing ItemTemplate;

<GridView.ItemsPanel>
   <ItemsPanelTemplate>
       <StackPanel Orientation="Horizontal"/>
   </ItemsPanelTemplate>
</GridView.ItemsPanel>

Hope this helps, cheers!

Upvotes: 1

Related Questions