在分组列表框视图中拉伸标题宽度
本文关键字:标题 视图 列表 | 更新日期: 2023-09-27 17:50:13
如何在分组列表框中拉伸标题宽度?
列表框ItemSource绑定到分层数据结构。组项包含名称和子项列表。
public class MyGroup
{
public string GroupName { get; set; }
public ObservableCollection<MyItem> SubItems { get; }
}
public class MyItem
{
public string ItemName { get; set; }
public DateTime Creation { get: set: }
}
public class MyViewModel:
{
public ObservableCollection<MyGroup> Data { get; set; }
}
页面定义如下
<Page>
<Page.Resources>
<CollectionViewSource x:Name="cvsListBoxGroup" IsSourceGrouped="True" Source="{Binding Data}" ItemsPath="SubItems"/>
</Page.Resources>
<Page.DataContext>
<local:MyViewModel/>
</Page.DataContext>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListBox Width="500" SelectionMode="Single" ItemsSource="{Binding Source={StaticResource cvsListBoxGroup}}">
<ListBox.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Background="Beige">
<TextBlock Text="{Binding GroupName}"></TextBlock>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListBox.GroupStyle>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="Bisque">
<TextBlock Text="{Binding ItemName}" Foreground="Black" ></TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Page>
显示分组和项。项目不填满列表框的宽度,所以我们需要设置listbox . itemcontainerstyle的HorizontalContentAlignment。这个技巧很常见——没问题
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
我试着为groupheader项找出一些类似的技巧,但是没有任何帮助。
<GroupStyle.HeaderContainerStyle>
<Style TargetType="GroupItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</GroupStyle.HeaderContainerStyle>
问题似乎是TargetType。对于listview,有一个ListViewHeaderItem。但是列表框中不存在类似的东西。
看这里的答案,这是ListView
但基本上是一样的:
https://social.msdn.microsoft.com/forums/windowsapps/en us/e8d4f7b3 - 93 - a8 - 4 - f17 - 9679 - 8 b700b8d02e6/how - -调整- - - -宽度- -组织-头-的-视图- -拉伸-全部- width?forum=winappswithcsharp