CODEWITHSUNDEEP
gridviewwindows-store-apps
Hov
Hov

Reputation: 109

windows store app gridview customizations?

I have a Windows Store App GridView which is bound to a collection through ItemsSource property. The collection has 5 items.By default, the items are displayed vertically like this

Item1 item3 item5
Item2 item4

Is there a way to display the items horizontally and specify how many items to display in a row like this?

Item1 item2
Item3 item4 item5

Thanks!

Upvotes: 2

Views: 2798

Answers (2)

Hov
Hov

Reputation: 109

as Xyroid suggested, having two GridViews can solve the issue. Just made some modifications to achieve the desired result.

xaml:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <GridView x:Name="MyGv" Margin="0"  Grid.Row="0" Width="650">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Border Height="50" Width="200" Background="Gray">
                    <TextBlock FontSize="26.667" Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Border>
            </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>
    <GridView  x:Name="MyGv1" Margin="0" Height="60" Width="650" Grid.Row="1">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Border Height="50" Width="200"  Background="Gray">
                    <TextBlock FontSize="26.667" Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Border>
            </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <VariableSizedWrapGrid Orientation="Vertical" MaximumRowsOrColumns="3"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>
</Grid>

c#:

protected override void OnNavigatedTo(NavigationEventArgs e)
    {

        var ObserControl = new ObservableCollection<string>() { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5" };
        MyGv.ItemsSource = ObserControl.Take(2);
        MyGv1.ItemsSource = ObserControl.Skip(2);
    }

Upvotes: 0

Farhan Ghumra
Farhan Ghumra

Reputation: 15296

In WinRT there's not particular Row or Column count which can be specified to GridView's ItemsPanelTemplate here VariableSizedWrapGrid, but there's MaximumRowsOrColumns which depends upon Orientation property of VariableSizedWrapGrid.

The below code demonstrates both the output.

XAML Code

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <GridView x:Name="MyGv" Height="200" Width="650">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Border Height="50" Width="200" Background="Gray">
                    <TextBlock FontSize="26.667" Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Border>
            </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>
    <GridView x:Name="MyGv1" Height="200" Width="650" Grid.Row="1">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Border Height="50" Width="200" Background="Gray">
                    <TextBlock FontSize="26.667" Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Border>
            </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <VariableSizedWrapGrid Orientation="Vertical" MaximumRowsOrColumns="2"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>
</Grid>

C# Code

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    var ObserControl = new ObservableCollection<string>() { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5"};
    MyGv.ItemsSource = ObserControl;
    MyGv1.ItemsSource = ObserControl;
}

Let me know if you need more help.

Upvotes: 1

Related Questions