Grid View with 3 column

Question

hello people, 

I want to create 3 columns, in my gridview... 

my code xaml:

 <Grid>
            
        <GridView Name="itemListViewss" 
                  IsRightTapEnabled="False"  
                  ItemsSource="{Binding}" 
                  AllowDrop="True"  
                  TabIndex="1"
                  ItemClick="Event_Page"
                  IsItemClickEnabled="True" 
                  Padding="116,136,116,46"
                  Grid.RowSpan="2"
                  SelectionMode="None"
                  IsSwipeEnabled="false"
                  AutomationProperties.AutomationId="ItemsGridView"
                  AutomationProperties.Name="Items"
                  >
            <!--<TextBox x:Name="test"></TextBox>-->
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid HorizontalAlignment="Left" Height="250" Width="250" VerticalAlignment="Top" Background="DarkGray">
                        <Image Margin="5" Source="{Binding Path=templateName}" Stretch="Fill" Width="250" Height="250" x:Name="imagegrid" />
                    <Grid HorizontalAlignment="Left" Height="60" Margin="5" VerticalAlignment="Bottom" Width="250" Background="#E5231F20" >
                    <TextBlock HorizontalAlignment="Left" Foreground="White" TextWrapping="Wrap" Text="{Binding NomeCurso}" VerticalAlignment="Center" FontSize="14" Tag="{Binding procedureName}" Margin="0,0,0,0"  FontFamily="Verdana"/>
                     </Grid>
                    </Grid>
                </DataTemplate>

            </GridView.ItemTemplate>
        </GridView>
        </Grid>

thanks

Answer 1

Hello Aurelien ,
In your design only two column are shown & in your datatemplate replace stackpanel to grid.

Answer 2

 <GridView Name="itemListViewss">            
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <Grid HorizontalAlignment="Left" Height="250" Width="250" VerticalAlignment="Top" Background="DarkGray">
                            <Image Margin="5" Source="{Binding Path=templateName}" Stretch="Fill" Width="250" Height="250" x:Name="imagegrid" />
                            <Grid HorizontalAlignment="Left" Height="60" Margin="5" VerticalAlignment="Bottom" Width="250" Background="#E5231F20" >
                                <TextBlock HorizontalAlignment="Left" Foreground="White" TextWrapping="Wrap" Text="{Binding NomeCurso}" VerticalAlignment="Center" FontSize="14" Tag="{Binding procedureName}" Margin="0,0,0,0"  FontFamily="Verdana"/>
                            </Grid>
                <Grid HorizontalAlignment="Left" Height="60" Margin="5" VerticalAlignment="Top" Width="250" Background="#E5231F20" >
                    <TextBlock HorizontalAlignment="Left" Foreground="White" TextWrapping="Wrap" Text="{Binding NomeCurso}" VerticalAlignment="Center" FontSize="14" Tag="{Binding procedureName}" Margin="0,0,0,0"  FontFamily="Verdana"/>
                </Grid>
                <Grid HorizontalAlignment="Left" Height="60" VerticalAlignment="Bottom" Width="250" Background="#E5231F20" Margin="0,0,0,80">
                    <TextBlock HorizontalAlignment="Left" Foreground="White" TextWrapping="Wrap" Text="{Binding NomeCurso}" VerticalAlignment="Center" FontSize="14" Tag="{Binding procedureName}" Margin="0,0,0,0"  FontFamily="Verdana"/>
                </Grid>
            </Grid>
                    </DataTemplate>

                </GridView.ItemTemplate>
            </GridView>

in the italics i have set verticalalignment top thus a grid comes in top or if you want grid above below bottom try the bolded by just settting the margin if it provided answer please set as answer and vote for it

Answer 3

Hi,Aurelien

You can create a Grid in GridView DataTemplate,Using Grid.ColumnDefinitions to make the Grid have 3 colums. If you want to put some content in a special colum, you can use Grid.Colums in a control which display the content. There are some codes you can see:

<GridView.ItemTemplate>
                    <DataTemplate>
                        <Grid HorizontalAlignment="Left" Height="250" Width="250" VerticalAlignment="Top" Background="DarkGray">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid Grid.Column="0">
                                <Image Margin="5" Source="{Binding Path=templateName}" Stretch="Fill" Width="250" Height="250" x:Name="imagegrid" />
                            </Grid>
                            <Grid  Grid.Column="1" Height="60" Margin="5" VerticalAlignment="Bottom" Width="250" Background="#E5231F20" >
                                <TextBlock HorizontalAlignment="Left" Foreground="White" TextWrapping="Wrap" Text="{Binding NomeCurso}" VerticalAlignment="Center" FontSize="14" Tag="{Binding procedureName}" Margin="0,0,0,0"  FontFamily="Verdana"/>
                            </Grid>
                            <Grid Grid.Column="2">
                                <!--you can put some content in the 3th column-->
                            </Grid>
                        </Grid>
                    </DataTemplate>

                </GridView.ItemTemplate>
            </GridView>

Best Wishes!

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.