UWPでグループ化されたリストビューの余白/パディングを削除し、全幅を有効にするにはどうすればよいですか？

Question

私はListViewがヘッダーでグループ化されています。ヘッダー<local:MyHeaderUserControl />には、テキストブロック<TextBlock Text="{Binding Key}" />と、リストされたオブジェクトにバインドする各エントリ<local:MyListItemUserControl>の別のUserControlを使用してヘッダーを表示するUserControlが1つあります。

余白を付けずに全幅で表示したい。 UWP内のListViewは迷惑な余白、仕切線を挿入し、デフォルトでは左に揃えられ、多くの可能なテンプレートのうちどれを設定する必要があるかは明確ではありません。

これを行うための最小限のテンプレートとは何ですか？

注：私はすでにこのアウトを働いているとするとき私ができる参考のために掲載して期待していますが、彼らはそこには、最初に取得する場合、他の誰かがカルマを取得してみましょうて幸せ;）

Answer 1

これが最も最小限のテンプレートですI見つけ、それはまた、すべてのカスタムユーザーコントロールで処理する必要がありますフォーカス、選択、アニメーションなどのデフォルトのスタイリングを削除...また

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

Answer 2

これが発生する理由は、ListViewItem以外のものを追加するたびにListViewItemを自動的にラップし、左右に約10の余白が左右に適用されるためです。

スマートプレイヤーは簡単で汚れて遊ぶことができます。

100行のスタイリング用のxalm行で迷惑をかけるのではなく、カスタム項目の左右にマイナス-10のマージンを適用できます。これは、listviewが自動的に適用されるこの10ピクセルの余白をカバーするように強制します。

もちろんこれは、最初に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);