CODEWITHSUNDEEP
xamlwindows-store-apps
kiewic
kiewic

Reputation: 16420

ListView ItemTemplate 100% width

How can I make content of each ListView item expands to 100% width when using a DataTemplate?

I have tried HorizontalContentAlignment="Stretch" in the ListView and HorizontalAlignment="Stretch" in the DataTemplate, but nothing seems to work, content is still aligned to the left.

I have something like this:

<ListView x:Name="questionsView" Background="{StaticResource ApplicationPageBackgroundThemeBrush}" HorizontalContentAlignment="Stretch">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Border Background="BlueViolet" HorizontalAlignment="Stretch">
                <Grid HorizontalAlignment="Stretch">
                    <TextBlock Text="{Binding}" />
                    <TextBlock HorizontalAlignment="Right">16 minutes ago</TextBlock>
                </Grid>
            </Border>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

I guess there is one more layer between the ListView and the ItemTemplate.

Upvotes: 43

Views: 25395

Answers (3)

Bluntoze MuradinBronz
Bluntoze MuradinBronz

Reputation: 71

What is important here is the ScrollViewer.HorizontalScrollBarVisibility, TextWrapping and ItemContainerStyle with HorizontalContentAlignment. The rest is fluff.

<ListView VerticalAlignment="Stretch"
          ScrollViewer.VerticalScrollBarVisibility="Auto"
          ScrollViewer.HorizontalScrollBarVisibility="Disabled">

    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Prop1}" TextWrapping="Wrap"/>
        </DataTemplate>
    </ListView.ItemTemplate>

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

</ListView>

Upvotes: 7

Khurram
Khurram

Reputation: 883

Set the item container's property of HorizontalContentAlignment to Stretch, try this 

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

Upvotes: 9

kiewic
kiewic

Reputation: 16420

I got it. Setting the ListView.ItemContainerStyle with a HorizontalContentAlignment setter makes the trick. I.e.:

<ListView x:Name="questionsView" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Border Background="BlueViolet">
                <Grid HorizontalAlignment="Stretch" Margin="0">
                    <TextBlock Text="{Binding}" />
                    <TextBlock HorizontalAlignment="Right">16 minutes ago</TextBlock>
                </Grid>
            </Border>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

Upvotes: 98

Related Questions