locked
How to set three items per row in gridview RRS feed

  • Question

  • Hi Everybody,

                I want to display gridview with 3 items per row. And it should be fit for all size of devices.

    Please help me quickly.

    Wednesday, December 16, 2015 8:05 AM

Answers

  • Hi, Shaafs.

    When a gridview itemplate is bind to data, Then we don't have any control to show how many items to show per row. For different resolution we get different no of items per row.

    But I try to get current window width and make the every item adapt to the window. It works, this is my code.

    Xaml code  

    <Page
        x:Class="xBindDataExample.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:data="using:xBindDataExample.Models"
        mc:Ignorable="d"  SizeChanged="MyPage_SizeChanged">
        <Page.Resources>
            <DataTemplate x:DataType="data:Book" x:Key="BookDataTemplate">
                <Grid Width="{Binding ElementName=MyTextBlock, Path=Width}">
                    <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
                        <TextBlock FontSize="16" Text="{x:Bind Title}" HorizontalAlignment="Center" />
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </Page.Resources>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="20">
           
    
            <GridView ItemsSource="{x:Bind Books}" 
                      ItemTemplate="{StaticResource BookDataTemplate}">
            </GridView>
            <TextBlock Name="MyTextBlock" Text="211" Width="" Visibility="Collapsed"></TextBlock>
         
    
        </Grid>
    </Page>

    The xaml.cs code

    public sealed partial class MainPage : Page
        {
            double Mywidth;
            private List<Book> Books;
            public MainPage()
            {
                this.InitializeComponent();
                Books = BookManager.GetBooks();
                var rawpixelperview = Windows.Graphics.Display.DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel;
                var Width = Window.Current.Bounds.Width * rawpixelperview;
                Mywidth = Width/3;
                MyTextBlock.Width = Mywidth;
            }
    
            private void MyPage_SizeChanged(object sender, SizeChangedEventArgs e)
            {
                var rawpixelperview = Windows.Graphics.Display.DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel;
                var Width = Window.Current.Bounds.Width * rawpixelperview;
                Mywidth = Width/4;
                MyTextBlock.Width = Mywidth ;
            }
        }
       


    • Marked as answer by Shaafs Wednesday, December 16, 2015 12:59 PM
    Wednesday, December 16, 2015 10:12 AM

All replies

  • Hi, Shaafs.

    When a gridview itemplate is bind to data, Then we don't have any control to show how many items to show per row. For different resolution we get different no of items per row.

    But I try to get current window width and make the every item adapt to the window. It works, this is my code.

    Xaml code  

    <Page
        x:Class="xBindDataExample.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:data="using:xBindDataExample.Models"
        mc:Ignorable="d"  SizeChanged="MyPage_SizeChanged">
        <Page.Resources>
            <DataTemplate x:DataType="data:Book" x:Key="BookDataTemplate">
                <Grid Width="{Binding ElementName=MyTextBlock, Path=Width}">
                    <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
                        <TextBlock FontSize="16" Text="{x:Bind Title}" HorizontalAlignment="Center" />
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </Page.Resources>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="20">
           
    
            <GridView ItemsSource="{x:Bind Books}" 
                      ItemTemplate="{StaticResource BookDataTemplate}">
            </GridView>
            <TextBlock Name="MyTextBlock" Text="211" Width="" Visibility="Collapsed"></TextBlock>
         
    
        </Grid>
    </Page>

    The xaml.cs code

    public sealed partial class MainPage : Page
        {
            double Mywidth;
            private List<Book> Books;
            public MainPage()
            {
                this.InitializeComponent();
                Books = BookManager.GetBooks();
                var rawpixelperview = Windows.Graphics.Display.DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel;
                var Width = Window.Current.Bounds.Width * rawpixelperview;
                Mywidth = Width/3;
                MyTextBlock.Width = Mywidth;
            }
    
            private void MyPage_SizeChanged(object sender, SizeChangedEventArgs e)
            {
                var rawpixelperview = Windows.Graphics.Display.DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel;
                var Width = Window.Current.Bounds.Width * rawpixelperview;
                Mywidth = Width/4;
                MyTextBlock.Width = Mywidth ;
            }
        }
       


    • Marked as answer by Shaafs Wednesday, December 16, 2015 12:59 PM
    Wednesday, December 16, 2015 10:12 AM
  • Thank you Jayden. Its working nicely 
    Wednesday, December 16, 2015 12:59 PM