Geek Answers Handbook

Windows 8 - XAML - Insert a grid inside a ListView

Inside my XAML / C # application for the Windows 8 Store, I am trying to create a ListView where each ListItem is a horizontal grid, so I use XAML below:

<ListView Name="ResultsView"> <ListView.ItemTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="4*" /> <ColumnDefinition Width="4*" /> </Grid.ColumnDefinitions> <TextBlock Text="{Binding BestRank}" Grid.Column="0"/> <TextBlock Text="{Binding PlayerName}" Grid.Column="1"/> <TextBlock Text="{Binding BestScore}" Grid.Column="2"/> </Grid> </DataTemplate> </ListView.ItemTemplate> </ListView>

When I run this program, listview contains all the elements from the list to which it is attached (through the code behind). However, in each list item, the contents of all three columns are displayed together without any space between them. When I create a similar grid outside the list, it displays a fine and occupies the entire width of the screen and divides it between the three columns, as indicated above in XAML.

What am I doing wrong?

+4
source share
4 answers

I believe the problem in the ItemContainerStyle should have a HorizontalContentAlignment of Stretch . Try adding this to your ListView:

 <ListView.ItemContainerStyle> <Style TargetType="ListViewItem"> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> </Style> </ListView.ItemContainerStyle>
+12
source

Both ListBox and Grid must have HorizontalContentAlignment = "Stretch"

Specify the width of the grid or add a style as a resource to the grid. Add this right after the line </Grid.ColumnDefinitions> .

  <Grid.Resources> <Style TargetType="TextBlock"> <Setter Property="TextAlignment" Value="Right" /> <Setter Property="Margin" Value="4" /> <Setter Property="VerticalAlignment" Value="Center" /> </Style> </Grid.Resources>

This sets the properties for all text blocks in the grid. You may need the Margin property. Also consider the Width and Padding properties. You can override this default value by setting the property in any text block to what is not the default value for the style.

0
source

By default, ItemsPanelTemplate is a stack panel, as far as I remember, this means that it will not automatically lead to the behavior of children. You will need to change it, I will edit it in a second on my mobile device, waiting for my laptop to load :)

Edit:

Do not ignore what I was thinking about ItemsControl , JBrooks is right, just make sure that HorizontalContentAlignment set to Stretch , because by default it is Left .

 <ListView Name="ResultsView" HorizontalContentAlignment="Stretch">

This should work fine - all controls that use XXXXContentAlignment default to Left , which, in my opinion, is a bit contrary to other controls (like Grid )

0
source

this is actually not a Listview problem. The problem is where do you put it? Put your list on the grid. He should work

 <ListView Name="ResultsView" HorizontalContentAlignment="Stretch"> <ListView.ItemTemplate> <DataTemplate> <Grid Background="Yellow"> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="4*" /> <ColumnDefinition Width="4*" /> </Grid.ColumnDefinitions> <TextBlock Text="{Binding BestRank}" Grid.Column="0"/> <TextBlock Text="{Binding PlayerName}" Grid.Column="1"/> <TextBlock Text="{Binding BestScore}" Grid.Column="2"/> </Grid> </DataTemplate> </ListView.ItemTemplate> </ListView>
0
source

More articles:


All Articles