添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
冷静的脆皮肠  ·  MXene材料 Ti3C2 Nb2C ...·  3 月前    · 
潇洒的大海  ·  Python ...·  9 月前    · 
威武的鸭蛋  ·  Unable to cast object ...·  10 月前    · 

One thing that happened to me often was the items of an ItemsControl derivative (like a ListBox or ListView ) not fill the full width of the list when was defined a DataTemplate for the ItemTemplate of the list.

For example, the Xaml code below:

<ListView ItemsSource="{Binding Path=Items, Source={StaticResource contentPageVM}}" Width="250" Margin="0 20 0 20" Grid.Row="1" Background="BurlyWood" HorizontalContentAlignment="Stretch"> <ListView.ItemTemplate> <DataTemplate> <Grid HorizontalAlignment="Stretch"> <TextBlock Text="{Binding Name}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0 0 20 0"></TextBlock> <TextBlock Text="&#xe937;" HorizontalAlignment="Right" FontFamily="Segoe MDL2 Assets" VerticalAlignment="Center"></TextBlock> </Grid> </DataTemplate> </ListView.ItemTemplate> </ListView>

… produces this:

Universal ListView Control
ListView with items not filling full width.

It should be noted that despite <Grid HorizontalAlignment=”Stretch”> , that produces no effect to make the items occupied the entire width of the list.

The solution is to set a style to the ItemContainerStyle for the ListViewItem with the HorizontalContentAlignment=”Stretch” , as exemplified below:

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

So if we complete the initial code, we have:

<ListView ItemsSource="{Binding Path=Items, Source={StaticResource contentPageVM}}" Width="250" Margin="0 20 0 20" Grid.Row="1" Background="BurlyWood" HorizontalContentAlignment="Stretch"> <ListView.ItemContainerStyle> <Style TargetType="ListViewItem"> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> </Style> </ListView.ItemContainerStyle> <ListView.ItemTemplate> <DataTemplate> <Grid HorizontalAlignment="Stretch"> <TextBlock Text="{Binding Name}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0 0 20 0"></TextBlock> <TextBlock Text="&#xe937;" HorizontalAlignment="Right" FontFamily="Segoe MDL2 Assets" VerticalAlignment="Center"></TextBlock> </Grid> </DataTemplate> </ListView.ItemTemplate> </ListView>

.. and now we have the desired result

Universal ListView Control
ListView with items filling full width.