WPF で TreeView の展開 [+] ボタンと折りたたみ [-] ボタンを再利用する

Question

単純な展開を再利用する方法はありますか [+] そして崩壊する [-] WPF のノードの横に表示されるボタン TreeView?一部のコントロールを展開したり折りたたんだりするために、アプリケーションの他の場所にも同様のグラフィックを配置したいと考えています。

Answer 1

これは実際には ToggleButton です。TreeView テンプレートを確認しました。 シンプルスタイル プロジェクトで、これが私が見つけたものです:

    <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) を取得し、リソースに配置します。
• 次に、コントロールのテンプレート (toggleButtonTemplate) を設定するスタイル (toggleButtonStyle) を作成します。
• 最後に、ToggleButton のスタイルが toggleButtonStyle であることを伝えます。

から にコピー＆ペーストするだけであれば、すぐに機能するはずです。

これは単純なプロセスですが、テンプレートの使用に慣れていない場合は頭痛の種になる可能性があります。ご質問があればお知らせください。

パス ミニ言語について少し学ぶには:

幾何学ミニ言語