Réutilisation des boutons expand [+] et de réduction [-] de TreeView dans WPF

Question

Existe-t-il un moyen de réutiliser les boutons simples [+] et de réduction [-] qui apparaissent à côté des nœuds dans un WPF TreeView? Je voudrais avoir un graphique similaire ailleurs dans mon application pour étendre et réduire certains contrôles.

Answer 1

Il est en fait un ToggleButton, j'ai vérifié le modèle TreeView sur le projet SimpleStyles et ce que j'ai trouvé:

<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> 

Voilà donc ce que vous devez faire pour le faire fonctionner:

<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> 

• D'abord, vous prenez le modèle (toggleButtonTemplate) et le mettre dans vos ressources
• Ensuite, vous faites un style (toggleButtonStyle) tha t définit le modèle (toggleButtonTemplate) du contrôle
• Enfin, vous dites à votre ToggleButton son style est toggleButtonStyle

Si vous venez de copier coller de lui des travaux devrait directement.

C'est un processus simple, mais il peut vous donner un mal de tête si vous n'êtes pas habitué à utiliser des modèles, laissez-moi savoir si vous avez des questions.

Pour en savoir un peu plus sur les chemins de mini-langue:

Geometry mini-language