WPF自定义TreeView控件样式实现QQ联系人列表效果

2019-12-30 19:19:39王旭

TreeViewItem样式代码


<Style x:Key="DefaultTreeViewItem" TargetType="{x:Type TreeViewItem}">
   <Setter Property="MinHeight" Value="25" />
   <Setter Property="Background" Value="Transparent" />
   <Setter Property="SnapsToDevicePixels" Value="True" />

   <Setter Property="Margin" Value="0" />
   <Setter Property="Template">
    <Setter.Value>
     <ControlTemplate TargetType="{x:Type TreeViewItem}">
      <ControlTemplate.Resources>
       <convert:IndentConverter x:Key="indentConverter"/>
      </ControlTemplate.Resources>
      <Grid Background="Transparent">
       <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
       </Grid.RowDefinitions>
       <Border Name="itemBackground" Background="{TemplateBinding Background}" 
        BorderBrush="{TemplateBinding BorderBrush}" 
        BorderThickness="{TemplateBinding BorderThickness}" 
        Padding="{TemplateBinding Padding}">
        <Grid Background="Transparent">
         <Grid x:Name="ItemRoot" Margin="{Binding Converter={StaticResource indentConverter},RelativeSource={RelativeSource TemplatedParent}}" Background="Transparent">
          <Grid.ColumnDefinitions>
           <ColumnDefinition Width="16" />
           <ColumnDefinition Width="*"/>
          </Grid.ColumnDefinitions>

          <ToggleButton x:Name="Expander" HorizontalAlignment="Left" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}">
           <ToggleButton.Style>
            <Style TargetType="{x:Type ToggleButton}">
             <Setter Property="Focusable" Value="False"/>
             <Setter Property="Width" Value="16"/>
             <Setter Property="Height" Value="16"/>
             <Setter Property="Template">
              <Setter.Value>
               <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Background="Transparent" Height="16" Padding="5" Width="16">
                 <Path x:Name="ExpandPath" Data="M0,0 L0,6 L6,0 z" Fill="#66645e" Stroke="#66645e">
                  <Path.RenderTransform>
                   <RotateTransform Angle="135" CenterY="3" CenterX="3"/>
                  </Path.RenderTransform>
                 </Path>
                </Border>
                <ControlTemplate.Triggers>
                 <Trigger Property="IsChecked" Value="True">
                  <Setter Property="RenderTransform" TargetName="ExpandPath">
                   <Setter.Value>
                    <RotateTransform Angle="180" CenterY="3" CenterX="3"/>
                   </Setter.Value>
                  </Setter>
                  <Setter Property="Fill" TargetName="ExpandPath" Value="#66645e"/>
                  <Setter Property="Stroke" TargetName="ExpandPath" Value="#66645e"/>
                 </Trigger>
                 <Trigger Property="IsMouseOver" Value="True">
                  <Setter Property="Stroke" TargetName="ExpandPath" Value="#66645e"/>
                  <Setter Property="Fill" TargetName="ExpandPath" Value="#66645e"/>
                 </Trigger>
                 <MultiTrigger>
                  <MultiTrigger.Conditions>
                   <Condition Property="IsMouseOver" Value="True"/>
                   <Condition Property="IsChecked" Value="True"/>
                  </MultiTrigger.Conditions>
                  <Setter Property="Stroke" TargetName="ExpandPath" Value="#66645e"/>
                  <Setter Property="Fill" TargetName="ExpandPath" Value="#66645e"/>
                 </MultiTrigger>
                </ControlTemplate.Triggers>
               </ControlTemplate>
              </Setter.Value>
             </Setter>
            </Style>
           </ToggleButton.Style>
          </ToggleButton>
          <ContentPresenter Grid.Column="1" x:Name="PART_Header" ContentSource="Header" 
             HorizontalAlignment="Stretch" >

          </ContentPresenter>
         </Grid>
        </Grid>

       </Border>
       <ItemsPresenter x:Name="ItemsHost" Grid.Row="1"/>
      </Grid>

      <ControlTemplate.Triggers>
       <DataTrigger Binding="{Binding IsGrouping}" Value="false">
        <Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
       </DataTrigger>
       <Trigger Property="HasItems" Value="False">
        <Setter Property="Visibility" TargetName="Expander" Value="Collapsed"/>
       </Trigger>
       <Trigger Property="IsExpanded" Value="False">
        <Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
       </Trigger>

       <Trigger Property="IsSelected" Value="True">
        <Setter Property="Background" TargetName="itemBackground" Value="#FAE388"/>
       </Trigger>
       <MultiTrigger>
        <MultiTrigger.Conditions>
         <Condition Property="IsFocused" Value="False"/>
         <Condition SourceName="itemBackground" Property="IsMouseOver" Value="true"/>
        </MultiTrigger.Conditions>
        <Setter Property="Background" Value=" #fceeb9" TargetName="itemBackground"/>
       </MultiTrigger>
       <Trigger Property="IsEnabled" Value="False">
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
       </Trigger>
      </ControlTemplate.Triggers>
     </ControlTemplate>
    </Setter.Value>
   </Setter>
  </Style>