WPF: Tùy chỉnh + - trong TreeView

Question

Có thể thay đổi biểu tượng mở rộng thu gọn được xây dựng trong điều khiển TreeView (+ -) thành biểu tượng của riêng tôi?

Cảm ơn trước!

Answer 1

Cảm ơn bạn rất nhiều, Kent! Dưới đây là giải pháp cho trường hợp của tôi:

<Style x:Key="styleTreeViewExpandCollapse" TargetType="{x:Type ToggleButton}"> 
    <Setter Property="OverridesDefaultStyle" Value="True"/> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="{x:Type ToggleButton}"> 
     <Image x:Name="image" Source="images/img1.ico" /> 
     <ControlTemplate.Triggers> 
      <Trigger Property="IsChecked" Value="true"> 
      <Setter TargetName="image" Property="Source" Value="images/img2.ico" /> 
      </Trigger> 
     </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style> 
<Style x:Key="styleTreeView" TargetType="{x:Type TreeViewItem}"> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="{x:Type TreeViewItem}"> 
     <Grid> 
      <Grid.ColumnDefinitions> 
      <ColumnDefinition MinWidth="19" Width="Auto"/> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition/> 
      </Grid.RowDefinitions> 
      <ToggleButton Grid.Column="0" x:Name="Expander" 
         Style="{StaticResource styleTreeViewExpandCollapse}" 
         IsChecked="{Binding Path=IsExpanded, 
          RelativeSource={RelativeSource TemplatedParent}}" 
         ClickMode="Press" 
         Width="16" Height="16"/> 
      <ContentPresenter Grid.Column="1" x:Name="PART_Header" 
          ContentSource="Header" 
          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/> 
      <ItemsPresenter x:Name="ItemsHost" 
          Grid.Row="1" 
          Grid.Column="1" Grid.ColumnSpan="2"/> 
     </Grid> 
     <ControlTemplate.Triggers> 
      <Trigger Property="IsExpanded" Value="false"> 
      <Setter TargetName="ItemsHost" Property="Visibility" 
        Value="Collapsed"/> 
      </Trigger> 
      <Trigger Property="HasItems" Value="false"> 
      <Setter TargetName="Expander" Property="Visibility" 
        Value="Hidden"/> 
      </Trigger> 
      <MultiTrigger> 
      <MultiTrigger.Conditions> 
       <Condition Property="HasHeader" Value="false"/> 
       <Condition Property="Width" Value="Auto"/> 
      </MultiTrigger.Conditions> 
      <Setter TargetName="PART_Header" Property="MinWidth" Value="75"/> 
      </MultiTrigger> 
      <MultiTrigger> 
      <MultiTrigger.Conditions> 
       <Condition Property="HasHeader" Value="false"/> 
       <Condition Property="Height" Value="Auto"/> 
      </MultiTrigger.Conditions> 
      <Setter TargetName="PART_Header" Property="MinHeight" Value="19"/> 
      </MultiTrigger> 
     </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style> 

Icons img1.ico và img2.ico là một mũi tên.

Answer 2

Thật không may, bạn sẽ cần phải xem lại TreeViewItem để đạt được điều đó. Kiểu mặc định này có thể giúp bạn bắt đầu. Lưu ý các đường dẫn cần được thay thế cho hình ảnh của bạn.

<Style x:Key="TreeViewItemFocusVisual"> 
    <Setter Property="Control.Template"> 
    <Setter.Value> 
     <ControlTemplate> 
     <Rectangle/> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style> 
<Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}"> 
    <Setter Property="Focusable" Value="False"/> 
    <Setter Property="Width" Value="19"/> 
    <Setter Property="Height" Value="13"/> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="{x:Type ToggleButton}"> 
     <Border Width="19" Height="13" Background="Transparent"> 
      <Border SnapsToDevicePixels="true" Width="9" Height="9" 
        BorderBrush="#FF7898B5" BorderThickness="1" CornerRadius="1"> 
      <Border.Background> 
       <LinearGradientBrush EndPoint="1,1" StartPoint="0,0"> 
       <GradientStop Color="White" Offset=".2"/> 
       <GradientStop Color="#FFC0B7A6" Offset="1"/> 
       </LinearGradientBrush> 
      </Border.Background> 
      <Path x:Name="ExpandPath" 
        Margin="1,1,1,1" 
        Fill="Black" 
        Data="M 0 2 L 0 3 L 2 3 L 2 5 L 3 5 L 3 3 L 5 3 L 5 2 L 3 2 L 3 0 L 2 0 L 2 2 Z"/> 
      </Border> 
     </Border> 
     <ControlTemplate.Triggers> 
      <Trigger Property="IsChecked" Value="True"> 
      <Setter Property="Data" TargetName="ExpandPath" 
        Value="M 0 2 L 0 3 L 5 3 L 5 2 Z"/> 
      </Trigger> 
     </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style> 
<Style x:Key="TreeViewItemStyle1" TargetType="{x:Type TreeViewItem}"> 
    <Setter Property="Background" Value="Transparent"/> 
    <Setter Property="HorizontalContentAlignment" 
      Value="{Binding Path=HorizontalContentAlignment, 
       RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/> 
    <Setter Property="VerticalContentAlignment" 
      Value="{Binding Path=VerticalContentAlignment, 
       RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/> 
    <Setter Property="Padding" Value="1,0,0,0"/> 
    <Setter Property="Foreground" 
      Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
    <Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="{x:Type TreeViewItem}"> 
     <Grid> 
      <Grid.ColumnDefinitions> 
      <ColumnDefinition MinWidth="19" Width="Auto"/> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition/> 
      </Grid.RowDefinitions> 
      <ToggleButton x:Name="Expander" 
         Style="{StaticResource ExpandCollapseToggleStyle}" 
         ClickMode="Press" 
         IsChecked="{Binding Path=IsExpanded, 
          RelativeSource={RelativeSource TemplatedParent}}"/> 
      <Border Grid.Column="1" x:Name="Bd" 
        SnapsToDevicePixels="true" 
        Background="{TemplateBinding Background}" 
        BorderBrush="{TemplateBinding BorderBrush}" 
        BorderThickness="{TemplateBinding BorderThickness}" 
        Padding="{TemplateBinding Padding}"> 
      <ContentPresenter x:Name="PART_Header" 
           SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
           HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
           ContentSource="Header"/> 
      </Border> 
      <ItemsPresenter x:Name="ItemsHost" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1"/> 
     </Grid> 
     <ControlTemplate.Triggers> 
      <Trigger Property="IsExpanded" Value="false"> 
      <Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/> 
      </Trigger> 
      <Trigger Property="HasItems" Value="false"> 
      <Setter Property="Visibility" TargetName="Expander" Value="Hidden"/> 
      </Trigger> 
      <Trigger Property="IsSelected" Value="true"> 
      <Setter Property="Background" TargetName="Bd" 
        Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/> 
      <Setter Property="Foreground" 
        Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/> 
      </Trigger> 
      <MultiTrigger> 
      <MultiTrigger.Conditions> 
       <Condition Property="IsSelected" Value="true"/> 
       <Condition Property="IsSelectionActive" Value="false"/> 
      </MultiTrigger.Conditions> 
      <Setter Property="Background" TargetName="Bd" 
        Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/> 
      <Setter Property="Foreground" 
        Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
      </MultiTrigger> 
      <Trigger Property="IsEnabled" Value="false"> 
      <Setter Property="Foreground" 
        Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
      </Trigger> 
     </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style>