CODEWITHSUNDEEP
c#xamlwindows-8windows-store-apps
Raman Sharma
Raman Sharma

Reputation: 4571

Windows 8 - XAML - Putting Grid Inside ListView

Inside my XAML/C# app for Windows 8 Store, I am trying to create a ListView where each ListItem is a horizontal Grid, so I am using the 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, the listview contains all the items from the list it is bound to (through code behind). However in every list-item, contents of all three columns appear together without any space between them. When I create a similar grid outside the listview, it displays fine and takes up entire width of the screen and divides it between the three columns as specified in the XAML above.

What am I doing wrong?

Upvotes: 4

Views: 4867

Answers (4)

woot
woot

Reputation: 2139

I believe the issue is the ItemContainerStyle needs to have a HorizontalContentAlignment of Stretch. Try this adding this to the ListView:

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

Upvotes: 12

D J
D J

Reputation: 7028

actually this is not a problem of Listview. Problem is where you are putting it in? Put your list view in grid. It 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>

Upvotes: 0

Charleh
Charleh

Reputation: 14012

The default ItemsPanelTemplate is a stack panel as far as I recall meaning that it won't automatically give it's children stretch behavior. You will need to change it, I will edit in a sec just on my mobile waiting for my laptop to boot up :)

Edit:

Er no ignore that I was thinking of ItemsControl, JBrooks is right, just make sure HorizontalContentAlignment is set to Stretch as the default is Left.

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

That should work fine - any controls that use XXXXContentAlignment seem to default to Left which I think its a bit inconsistent vs other controls (such as Grid)

Upvotes: 0

JBrooks
JBrooks

Reputation: 10013

Both the ListBox and the Grid should have HorizontalContentAlignment="Stretch"

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

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

This will set the properties to all of the TextBlocks in the Grid. You might only need the Margin property. Also consider the properties Width and Padding. You can override this default by setting the property on any given TextBlock to something that isn't the default from the Style.

Upvotes: 0

Related Questions