2017-10-13 215 views
-4

我試圖讓自己的圖形樣式的ListView,但我不明白的源代碼。任何人都可以向我解釋下面代碼的各個部分嗎?WPF自定義ListView控件模板

<!-- =========================================================== ListView ============================================================ --> 
<Style x:Key="{x:Static GridView.GridViewScrollViewerStyleKey}" TargetType="ScrollViewer"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ScrollViewer"> 
       <Grid Background="{TemplateBinding Background}"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="*"/> 
         <ColumnDefinition Width="Auto"/> 
        </Grid.ColumnDefinitions> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="*"/> 
         <RowDefinition Height="Auto"/> 
        </Grid.RowDefinitions> 

        <DockPanel Margin="{TemplateBinding Padding}"> 
         <ScrollViewer DockPanel.Dock="Top" 
             HorizontalScrollBarVisibility="Hidden" 
             VerticalScrollBarVisibility="Hidden" 
             Focusable="false"> 
          <GridViewHeaderRowPresenter Margin="2,0,2,0" 
                 Columns="{Binding Path=TemplatedParent.View.Columns, RelativeSource={RelativeSource TemplatedParent}}" 
                 ColumnHeaderContainerStyle="{Binding Path=TemplatedParent.View.ColumnHeaderContainerStyle, RelativeSource={RelativeSource TemplatedParent}}" 
                 ColumnHeaderTemplate="{Binding Path=TemplatedParent.View.ColumnHeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}" 
                 ColumnHeaderTemplateSelector="{Binding Path=TemplatedParent.View.ColumnHeaderTemplateSelector, RelativeSource={RelativeSource TemplatedParent}}" 
                 AllowsColumnReorder="{Binding Path=TemplatedParent.View.AllowsColumnReorder, RelativeSource={RelativeSource TemplatedParent}}" 
                 ColumnHeaderContextMenu="{Binding Path=TemplatedParent.View.ColumnHeaderContextMenu, RelativeSource={RelativeSource TemplatedParent}}" 
                 ColumnHeaderToolTip="{Binding Path=TemplatedParent.View.ColumnHeaderToolTip, RelativeSource={RelativeSource TemplatedParent}}" 
                 SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
         </ScrollViewer> 

         <ScrollContentPresenter Name="PART_ScrollContentPresenter" 
               KeyboardNavigation.DirectionalNavigation="Local" 
               CanContentScroll="True" CanHorizontallyScroll="False" 
               CanVerticallyScroll="False"/> 
        </DockPanel> 

        <ScrollBar Name="PART_HorizontalScrollBar" 
           Orientation="Horizontal" 
           Grid.Row="1" 
           Maximum="{TemplateBinding ScrollableWidth}" 
           ViewportSize="{TemplateBinding ViewportWidth}" 
           Value="{TemplateBinding HorizontalOffset}" 
           Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/> 

        <ScrollBar Name="PART_VerticalScrollBar" 
           Grid.Column="1" 
           Maximum="{TemplateBinding ScrollableHeight}" 
           ViewportSize="{TemplateBinding ViewportHeight}" 
           Value="{TemplateBinding VerticalOffset}" 
           Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/> 

       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<Style x:Key="GridViewColumnHeaderGripper" TargetType="Thumb"> 
    <Setter Property="Width" Value="18"/> 
    <Setter Property="Background" Value="{DynamicResource NormalBorderBrush}"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Thumb}"> 
       <Border Padding="{TemplateBinding Padding}" 
         Background="Transparent"> 
        <Rectangle HorizontalAlignment="Center" 
           Width="1" 
           Fill="{TemplateBinding Background}"/> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<Style x:Key="{x:Type GridViewColumnHeader}" TargetType="GridViewColumnHeader"> 
    <Setter Property="HorizontalContentAlignment" Value="Center"/> 
    <Setter Property="VerticalContentAlignment" Value="Center"/> 
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="GridViewColumnHeader"> 
       <Grid> 
        <Border Name="HeaderBorder" 
          BorderThickness="0,1,0,1" 
          BorderBrush="{DynamicResource NormalBorderBrush}" 
          Background="{DynamicResource LightBrush}" 
          Padding="2,0,2,0"> 
         <ContentPresenter Name="HeaderContent" 
              Margin="0,0,0,1" 
              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
              RecognizesAccessKey="True" 
              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
        </Border> 
        <Thumb x:Name="PART_HeaderGripper" 
          HorizontalAlignment="Right" 
          Margin="0,0,-9,0" 
          Style="{StaticResource GridViewColumnHeaderGripper}"/> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="true"> 
         <Setter TargetName="HeaderBorder" Property="Background" Value="{DynamicResource NormalBrush}"/> 
        </Trigger> 
        <Trigger Property="IsPressed" Value="true"> 
         <Setter TargetName="HeaderBorder" Property="Background" Value="{DynamicResource PressedBrush}"/> 
         <Setter TargetName="HeaderContent" Property="Margin" Value="1,1,0,0"/> 
        </Trigger> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
    <Style.Triggers> 
     <Trigger Property="Role" Value="Floating"> 
      <Setter Property="Opacity" Value="0.7"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="GridViewColumnHeader"> 
         <Canvas Name="PART_FloatingHeaderCanvas"> 
          <Rectangle Fill="#60000000" 
             Width="{TemplateBinding ActualWidth}" 
             Height="{TemplateBinding ActualHeight}"/> 
         </Canvas> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Trigger> 
     <Trigger Property="Role" Value="Padding"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="GridViewColumnHeader"> 
         <Border Name="HeaderBorder" 
           BorderThickness="0,1,0,1" 
           BorderBrush="{DynamicResource NormalBorderBrush}" 
           Background="{DynamicResource LightBrush}"/> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Trigger> 
    </Style.Triggers> 
</Style> 

<Style TargetType="{x:Type local:VsListView}"> 
    <Setter Property="SnapsToDevicePixels" Value="true"/> 
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/> 
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/> 
    <Setter Property="ScrollViewer.CanContentScroll" Value="true"/> 
    <Setter Property="VerticalContentAlignment" Value="Center"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type local:VsListView}"> 
       <Border Name="Border" 
         BorderThickness="1" 
         CornerRadius="{DynamicResource MainCornerRadius}" 
         BorderBrush="{DynamicResource SolidBorderBrush}" 
         Background="Red"> 
        <ScrollViewer Style="{DynamicResource {x:Static GridView.GridViewScrollViewerStyleKey}}"> 
         <ItemsPresenter /> 
        </ScrollViewer> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsGrouping" Value="true"> 
         <Setter Property="ScrollViewer.CanContentScroll" Value="false"/> 
        </Trigger> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter TargetName="Border" Property="Background" Value="{DynamicResource DisabledBorderBrush}"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

如何更改標題部分的視覺風格?哪部分代碼處理這個問題? 我附上了截圖。我insterested的白色矩形:

enter image description here

+0

'GridViewHeaderRowPresenter' - 你甚至讀過這段代碼嗎? –

+0

當然,我讀了這段代碼,但是我所做的任何更改都沒有反映出來。即使我刪除了這部分代碼。白色的矩形仍然在那裏。 –

+0

好吧,可能是因爲它是'ScrollViewer'的樣式,而不是'ListView' ...再一次,你甚至讀過這些代碼嗎?它就在那裏,在第一行'TargetType =「ScrollViewer」' –

回答

0

我建議你使用混合得到的默認樣式和ContentTemplate,然後只需將其編輯成自己需要的(記住,使用的控件名稱作爲模板可能對給定控件背後的邏輯具有至關重要的意義,所以要小心你正在編輯的內容)。

如果你不知道如何使用Blend來獲得你的控件的模板,這裏有一個簡單的教程documentation of Telerik controls(不用擔心,它對所有的控件都是一樣的)。您只需創建一個ListView.ContentTemplate的副本,將其粘貼到您的應用程序中,並且您可以很好地進行(編輯)。

+0

謝謝,我試試這個。 –

+0

只是一個提示:在對象和時間線面板上創建控件模板時,可能會顯示一個新的層次結構。它只是深入到控件的可視化樹中。檢查新列表的每個位置是否可以從中生成新模板。通常情況下,控件是由具有自己樣式的控件構建的。 –