2017-10-07 38 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);