如何删除边距/填充并为UWP中的分组ListView启用全宽度?
问题描述:
我有一个ListView
与标题分组。我有一个显示使用文本块<TextBlock Text="{Binding Key}" />
和另一个用户控件用于结合所述列出的对象中的每个条目<local:MyListItemUserControl>
报头中的头一个<local:MyHeaderUserControl />
用户控件。如何删除边距/填充并为UWP中的分组ListView启用全宽度?
我想没有留下任何空白,以显示他们全宽。 UWP中的ListView
会插入令人讨厌的边距,分隔线,并且默认情况下会左对齐,并且不清楚必须在哪些可能的模板中删除哪些属性。
什么是这样做的最小化的模板?
注:我已经工作了这一点,我希望张贴的参考时,我可以,但我乐于让别人得到的业力,如果他们那里第一;)
答
这是最起码的模板,我能找到的,但它也删除默认样式的焦点,选择动画等,这些都会在自定义的用户控件进行处理......
<ListView
ItemsSource="{Binding Source={StaticResource collectionViewSource}}"
>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<local:MyListItemUserControl />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderContainerStyle>
<Style TargetType="ListViewHeaderItem">
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewHeaderItem">
<local:MyHeaderUserControl />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.HeaderContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
或者,此模板保留默认行为,点击,选择等,同时删除边距,并使控件的全宽...
<ListView
ItemsSource="{Binding Source={StaticResource collectionViewSource}}"
>
<ListView.ItemTemplate>
<DataTemplate>
<!-- This is marginless and full width! -->
<local:MyListItemUserControl />
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="Background" Value="{ThemeResource ListViewItemBackground}"/>
<Setter Property="Foreground" Value="{ThemeResource ListViewItemForeground}"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
<Setter Property="MinHeight" Value="0"/>
<Setter Property="AllowDrop" Value="False"/>
<Setter Property="UseSystemFocusVisuals" Value="True"/>
<Setter Property="FocusVisualMargin" Value="0"/>
<Setter Property="FocusVisualPrimaryBrush" Value="{ThemeResource ListViewItemFocusVisualPrimaryBrush}"/>
<Setter Property="FocusVisualPrimaryThickness" Value="2"/>
<Setter Property="FocusVisualSecondaryBrush" Value="{ThemeResource ListViewItemFocusVisualSecondaryBrush}"/>
<Setter Property="FocusVisualSecondaryThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter CheckBrush="{ThemeResource ListViewItemCheckBrush}" ContentMargin="{TemplateBinding Padding}" CheckMode="{ThemeResource ListViewItemCheckMode}" ContentTransitions="{TemplateBinding ContentTransitions}" CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}" DragForeground="{ThemeResource ListViewItemDragForeground}" DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" DragBackground="{ThemeResource ListViewItemDragBackground}" DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" FocusVisualPrimaryBrush="{TemplateBinding FocusVisualPrimaryBrush}" FocusVisualSecondaryThickness="{TemplateBinding FocusVisualSecondaryThickness}" FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}" FocusVisualMargin="{TemplateBinding FocusVisualMargin}" FocusVisualPrimaryThickness="{TemplateBinding FocusVisualPrimaryThickness}" FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}" FocusVisualSecondaryBrush="{TemplateBinding FocusVisualSecondaryBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Control.IsTemplateFocusTarget="True" PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}" PressedBackground="{ThemeResource ListViewItemBackgroundPressed}" PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}" PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}" ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}" SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}" SelectedForeground="{ThemeResource ListViewItemForegroundSelected}" SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}" SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<!-- This is marginless and full width! -->
<local:MyHeaderUserControl />
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.HeaderContainerStyle>
<Style TargetType="ListViewHeaderItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ListViewHeaderItemThemeFontSize}"/>
<Setter Property="Background" Value="{ThemeResource ListViewHeaderItemBackground}"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="MinHeight" Value="0"/>
<Setter Property="UseSystemFocusVisuals" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewHeaderItem">
<StackPanel BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.HeaderContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
答
发生这种情况的原因是,每次添加不是ListViewitem的东西时,都会自动缠绕ListViewItem,左右都会应用粗糙的10边距。
是一个聪明的球员发挥容易脏。
而是与100线的造型xalm线打扰你可以申请您的自定义项的负-10保证金左,右的。这将强制列表项目覆盖此列表视图自动应用的10 px边距。
当然,这就意味着您将首先创建一个ListViewItem的,然后这个ListViewItem的内容设置为您的自定义项目,最后添加的ListViewItem到你的ListView。
MyListItemUserControl item = new MyListItemUserControl();
item.Height = 45;
item.Margin = new Thickness(-10, 4, -10, 4);
item.HorizontalAlignment = HorizontalAlignment.Stretch;
ListViewItem ListItem = new ListViewItem();
ListItem.HorizontalAlignment =
HorizontalAlignment.Stretch;
ListItem.HorizontalContentAlignment = HorizontalAlignment.Stretch;
ListItem.Content =item;
LIST.Items.Add(ListItem);
也许[this](https://stackoverflow.com/a/38151627/6843321)可以提供帮助。 –
谢谢,这是解决方案的一部分,但组头模板更复杂,并且默认的GroupStyles插入硬编码边距的加载,更重要的是在Windows 8中使用的旧ContainerStyle在UWP中被弃用,在更新我的代码时使我失望 – Brendan