添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
呐喊的罐头  ·  Hospital in Bangkok, ...·  2 月前    · 
酷酷的眼镜  ·  _搜索结果 - 1·  5 月前    · 
性感的芒果  ·  velocity模板引擎 | 柏竹·  5 月前    · 
瘦瘦的猴子  ·  Honda Sports EV ...·  1 年前    · 

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.