私は、 Windows7のWindowsエクスプローラーのコンピューターセクションで使用されるセクションヘッダーを再作成しようと取り組んできました。
（これは、新しいエクスプローラウィンドウを開いて[コンピュータ]を選択すると見つかります。[表示]は[タイル]、[Group By]は[入力]である必要があります。これにより、[ハードディスクドライブ]のセクションが表示されます。シェブロンとヘッダーを再作成しようとしています。
次のリソース辞書を作成しました。
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Framework.Commons.Controls">
<Style x:Key="ChevronBase" TargetType="{x:Type Path}">
<Setter Property="StrokeThickness" Value=".75" />
<Setter Property="Stretch" Value="Fill" />
<Setter Property="RenderTransformOrigin" Value="0,0" />
<Setter Property="Width" Value="6" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Data" Value="M 0 3 L 6 3 L 3 6 Z" />
</Style>
<Style x:Key="ChevronOpen"
BasedOn="{StaticResource ResourceKey=ChevronBase}"
TargetType="{x:Type Path}">
<Setter Property="Fill" Value="Black" />
<Setter Property="LayoutTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform Angle="-45" />
<TranslateTransform />
</TransformGroup>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ChevronClosed"
BasedOn="{StaticResource ResourceKey=ChevronBase}"
TargetType="{x:Type Path}">
<Setter Property="Stroke" Value="#FF808080" />
<Setter Property="Fill" Value="Transparent" />
<Setter Property="LayoutTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform Angle="-90" />
<TranslateTransform />
</TransformGroup>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ChevronCheckBox" TargetType="{x:Type CheckBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="IsChecked" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<Grid Background="Transparent">
<Path x:Name="ChevronOpen"
Style="{StaticResource ResourceKey=ChevronOpen}"
Visibility="Collapsed" />
<Path x:Name="ChevronClosed"
Style="{StaticResource ResourceKey=ChevronClosed}"
Visibility="Collapsed" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ChevronOpen" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ChevronClosed" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
チェックボックスにスタイルを追加しました。
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<CheckBox x:Name="Xpander" Style="{DynamicResource ResourceKey=ChevronCheckBox}" />
<ContentPresenter Grid.Column="1"
VerticalAlignment="Center"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}" />
<Separator Grid.Column="2"
Height="12pt"
Margin="7,0,0,0"
VerticalAlignment="Center"
Visibility="{TemplateBinding LineBreakVisibility}" />
<ContentPresenter Grid.Row="1"
Grid.ColumnSpan="3"
Margin="8,5,5,5"
Visibility="{Binding ElementName=Xpander,
Path=IsChecked,
Converter={StaticResource ResourceKey=BooleanToVisibilityConverter}}" />
</Grid>
私が遭遇している問題は、シェブロンが常に非常にファンキーになっていることです（そして良いファンキーではありません）。
これは、私がPathオブジェクトを操作した数少ない回数の1つです。他のヘッダーアイテムと一緒にグリッドに配置されたときにシェブロンが奇妙に歪むという、私が間違っていることはありますか？
現在、傾斜が広すぎるか、レイアウトの回転が正しくないようです。Expression Blend 4の空白のページで正しいパスを考え出そうとしましたが、正しいパスを考え出す方法がわかりません。2つの異なるパスデータセットを使用できますが、三角形を回転させるだけでうまくいくと思いました。
ところで、私は現在のエクスプローラーの動作のすべてのスタイルを持っているわけではないことを知っています。今、私は崩壊と崩壊していない状態を模倣しようとしています。チェックボックスを使用してそのテンプレートをオーバーライドするよりも良い方法がある場合は、提案を受け入れることができます。
Windows7の例を編集します。
左側はヘッダーの展開状態を示し、右側は折りたたまれています。上部はシェブロンをホバーしたときです。
私の現在の「超ファンキー」シェブロン（栄光はありません）：
上部が拡張され、下部が折りたたまれます。
私のアイデアが達成しようとしていたことについての簡単な説明。チェックボックスの視覚的な状態（および後でマウスオーバースタイルのパス）に応じて、パスを設定し、レイアウトの回転、塗りつぶし、およびストロークを変更したいと思いました。
もう1つの簡単な注意点として、これはチェックボックスControlTemplateをオーバーライドしているため、チェックされている状態とチェックされていない状態にビジュアル状態マネージャーを使用しています。「チェックボックス」がチェックされている場合、それは展開されます。そうでない場合、ヘッダーは折りたたまれて表示されます。