2017-10-07 73 views
1

我有一个ListView与标题分组。我有一个显示使用文本块<TextBlock Text="{Binding Key}" />和另一个用户控件用于结合所述列出的对象中的每个条目<local:MyListItemUserControl>报头中的头一个<local:MyHeaderUserControl />用户控件。如何删除边距/填充并为UWP中的分组ListView启用全宽度?

我想没有留下任何空白,以显示他们全宽。 UWP中的ListView会插入令人讨厌的边距,分隔线,并且默认情况下会左对齐,并且不清楚必须在哪些可能的模板中删除哪些属性。

什么是这样做的最小化的模板?

注:我已经工作了这一点,我希望张贴的参考时,我可以,但我乐于让别人得到的业力,如果他们那里第一;)

+0

也许[this](https://stackoverflow.com/a/38151627/6843321)可以提供帮助。 –

+0

谢谢,这是解决方案的一部分,但组头模板更复杂,并且默认的GroupStyles插入硬编码边距的加载,更重要的是在Windows 8中使用的旧ContainerStyle在UWP中被弃用,在更新我的代码时使我失望 – Brendan

回答

0

这是最起码的模板,我能找到的,但它也删除默认样式的焦点,选择动画等,这些都会在自定义的用户控件进行处理......

<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> 
0

发生这种情况的原因是,每次添加不是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); 
相关问题