Повторное использование кнопок развернуть [+] и свернуть [-] TreeView в WPF

Есть ли способ повторно использовать простые кнопки расширения [+] и свертывания [-], которые появляются рядом с узлами в WPF TreeView? Я хотел бы иметь аналогичную графику в другом месте моего приложения для развертывания и свертывания некоторых элементов управления.


person M. Dudley    schedule 30.09.2009    source источник


Ответы (1)


На самом деле это ToggleButton, я проверил шаблон TreeView в проекте SimpleStyles и вот что я нашел:

    <ControlTemplate TargetType="ToggleButton">
      <Grid
        Width="15"
        Height="13"
        Background="Transparent">
        <Path x:Name="ExpandPath"
          HorizontalAlignment="Left" 
          VerticalAlignment="Center" 
          Margin="1,1,1,1"
          Fill="{StaticResource GlyphBrush}"
          Data="M 4 0 L 8 4 L 4 8 Z"/>
      </Grid>
      <ControlTemplate.Triggers>
        <Trigger Property="IsChecked"
             Value="True">
          <Setter Property="Data"
              TargetName="ExpandPath"
              Value="M 0 4 L 8 4 L 4 8 Z"/>
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>

Итак, что вам нужно сделать, чтобы заставить его работать:

<Window x:Class="StackOverflowTests.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" x:Name="window1" Height="300" Width="300"
 Loaded="window1_Loaded"
 xmlns:local="clr-namespace:StackOverflowTests">
 <Window.Resources>
  <SolidColorBrush x:Key="GlyphBrush" Color="#444" />
  <ControlTemplate x:Key="toggleButtonTemplate" TargetType="ToggleButton">
   <Grid
            Width="15"
            Height="13"
            Background="Transparent">
    <Path x:Name="ExpandPath"
              HorizontalAlignment="Left" 
              VerticalAlignment="Center" 
              Margin="1,1,1,1"
              Fill="{StaticResource GlyphBrush}"
              Data="M 4 0 L 8 4 L 4 8 Z"/>
   </Grid>
   <ControlTemplate.Triggers>
    <Trigger Property="IsChecked"
                 Value="True">
     <Setter Property="Data"
                  TargetName="ExpandPath"
                  Value="M 0 4 L 8 4 L 4 8 Z"/>
    </Trigger>
   </ControlTemplate.Triggers>
  </ControlTemplate>
  <Style x:Key="toggleButtonStyle" TargetType="ToggleButton">
   <Setter Property="Template" Value="{StaticResource toggleButtonTemplate}" />
  </Style>
 </Window.Resources>
 <StackPanel>
  <ToggleButton x:Name="toggleButton" Height="20" Width="20" Style="{StaticResource toggleButtonStyle}" />
 </StackPanel>
</Window>
  • Сначала вы берете шаблон (toggleButtonTemplate) и помещаете его в свои ресурсы
  • Затем вы создаете стиль (toggleButtonStyle), который задает шаблон (toggleButtonTemplate) элемента управления.
  • Наконец, вы сообщаете своему ToggleButton, что его стиль toggleButtonStyle

Если вы просто скопируете вставку из него, это должно сработать.

Это простой процесс, но он может доставить вам головную боль, если вы не привыкли использовать шаблоны, дайте мне знать, если у вас возникнут вопросы.

Чтобы узнать немного о мини-языке путей:

Мини-язык Geometry

person Carlo    schedule 30.09.2009
comment
Есть ли способ использовать системную графику по умолчанию для операционной системы? Например, в Windows XP это [+], тогда как в Vista это треугольник. - person M. Dudley; 30.09.2009
comment
Вы всегда можете изменить свойство Data пути ExpandPath (как в пути по умолчанию, так и в триггере). Я говорю о строках с кодами M 0 4 L... (называемых мини-языком геометрии, я добавил ссылку в конце своего ответа). Однако вам придется узнать о путях и мини-языке, с которым я мало играл. Но попробуйте изменить значения, и вы увидите, как меняются цифры для расширенных и не расширенных значений. - person Carlo; 30.09.2009