WPF分離GridView的頭從身體

Question

我有一個ListView裏面一個GridView，我想分離從身體的頭，所以我可以把邊框每一個單獨像這樣：

我可以使用WPF中已有的模板選項來實現此目的嗎？看起來我只能自定義每個標題項目，而不是整個標題作爲一個單元。

根據我所做的研究，似乎唯一的方法是編寫自己的自定義「視圖模式」（GridView是由Microsoft提供的一種），如this article中所述。

Answer 1

您將不得不爲控件創建自己的樣式和模板。在這裏，我已經創建ListView控件樣式的副本忽略border屬性和使用自定義的ScrollViewer風格：

<SolidColorBrush x:Key="ListBorder" Color="#828790"/> 
    <Style x:Key="CustomListViewStyle" TargetType="{x:Type ListView}"> 
     <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/> 
     <Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="Foreground" Value="#FF042271"/> 
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/> 
     <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/> 
     <Setter Property="ScrollViewer.CanContentScroll" Value="true"/> 
     <Setter Property="ScrollViewer.PanningMode" Value="Both"/> 
     <Setter Property="Stylus.IsFlicksEnabled" Value="False"/> 
     <Setter Property="VerticalContentAlignment" Value="Center"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ListView}"> 
        <Themes:ListBoxChrome x:Name="Bd" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" SnapsToDevicePixels="true"> 
         <ScrollViewer Padding="{TemplateBinding Padding}" Style="{DynamicResource CustomScrollViewerStyle}"> 
          <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
         </ScrollViewer> 
        </Themes:ListBoxChrome> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/> 
         </Trigger> 
         <MultiTrigger> 
          <MultiTrigger.Conditions> 
           <Condition Property="IsGrouping" Value="true"/> 
           <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/> 
          </MultiTrigger.Conditions> 
          <Setter Property="ScrollViewer.CanContentScroll" Value="false"/> 
         </MultiTrigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

的ScrollViewer中的風格增加了邊界在正確的地方：

<Style x:Key="CustomScrollViewerStyle" TargetType="{x:Type ScrollViewer}"> 
     <Setter Property="Focusable" Value="False"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ScrollViewer}"> 
        <Grid Background="{TemplateBinding Background}" SnapsToDevicePixels="True"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="*"/> 
          <ColumnDefinition Width="Auto"/> 
         </Grid.ColumnDefinitions> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="*"/> 
          <RowDefinition Height="Auto"/> 
         </Grid.RowDefinitions> 
         <DockPanel Margin="{TemplateBinding Padding}"> 
          <Border DockPanel.Dock="Top" Margin="0,0,0,10" 
            BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}}" 
            BorderThickness="{Binding BorderThickness, RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}}"> 
           <ScrollViewer Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"> 
            <GridViewHeaderRowPresenter AllowsColumnReorder="{Binding TemplatedParent.View.AllowsColumnReorder, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderContainerStyle="{Binding TemplatedParent.View.ColumnHeaderContainerStyle, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderToolTip="{Binding TemplatedParent.View.ColumnHeaderToolTip, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderContextMenu="{Binding TemplatedParent.View.ColumnHeaderContextMenu, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderTemplate="{Binding TemplatedParent.View.ColumnHeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}" Columns="{Binding TemplatedParent.View.Columns, RelativeSource={RelativeSource TemplatedParent}}" Margin="2,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
           </ScrollViewer> 
          </Border> 
          <Border BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}}" 
            BorderThickness="{Binding BorderThickness, RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}}"> 
           <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" KeyboardNavigation.DirectionalNavigation="Local" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
          </Border> 
         </DockPanel> 
         <ScrollBar x:Name="PART_HorizontalScrollBar" Cursor="Arrow" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}"/> 
         <ScrollBar x:Name="PART_VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}"/> 
         <DockPanel Background="{Binding Background, ElementName=PART_VerticalScrollBar}" Grid.Column="1" LastChildFill="False" Grid.Row="1"> 
          <Rectangle DockPanel.Dock="Left" Fill="White" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Width="1"/> 
          <Rectangle DockPanel.Dock="Top" Fill="White" Height="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/> 
         </DockPanel> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

與我例如：

 <ListView BorderThickness="2" BorderBrush="Red" Style="{StaticResource CustomListViewStyle}"> 
      <ListView.View> 
       <GridView > 
        <GridViewColumn Header="First Name"> 
         <GridViewColumn.CellTemplate> 
          <DataTemplate> 
           <TextBlock Text="Bob"/> 
          </DataTemplate> 
         </GridViewColumn.CellTemplate> 
        </GridViewColumn> 

        <GridViewColumn Header="LastName"> 
         <GridViewColumn.CellTemplate> 
          <DataTemplate> 
           <TextBlock Text="Bobson" HorizontalAlignment="Right"/> 
          </DataTemplate> 
         </GridViewColumn.CellTemplate> 
        </GridViewColumn> 
       </GridView> 
      </ListView.View> 
      <ListView.ItemsSource> 
       <x:Array Type="{x:Type sys:String}"> 
        <sys:String>1</sys:String> 
        <sys:String>1</sys:String> 
        <sys:String>1</sys:String> 
        <sys:String>1</sys:String> 
        <sys:String>1</sys:String> 
        <sys:String>1</sys:String> 
       </x:Array> 
      </ListView.ItemsSource> 
     </ListView> 

產地：

這是一個很好的資源：

https://msdn.microsoft.com/en-us/library/ms788747(v=vs.110).aspx

而且，看看混合，如果你設置樣式。試圖制定所有部件真的很痛苦，但在Blend中，您可以「創建風格的副本」，然後將其轉移到您的心中。

如果您不在Win 7上，那麼您複製的樣式將成爲您在應用程序中看到的樣式（除非您使用的樣式包如MahApp.Metro或Material Design for XAML，在這種情況下它應該複製他們的樣式）。

創建自己的自定義外觀可能會更容易！