私はあなたが求めているものを理解していれば、私はあなたがデフォルトのパンダのテンプレートを見れば、あなたは答えを得ることができると思います。これを行うには、新しいtempプロジェクトを作成し、Expanderをアートボードにドロップし、Objectsリストで右クリックしてテンプレートのコピーを作成します。
Expanders、ExpandDown、ExpandLeft、ExpandRightのVisualStatesがあります。方向が異なる場合は、各状態が拡大/縮小、左または右のテンプレート用に拡大/縮小トグルボタンをスワップします。各方向はまた、ボタンとエキスパンダー領域を正しい位置に置くようにExpanderのグリッドを構成します。
左右のToggleButtonテンプレートを作成する必要があります。それで正しい方法を指すように矢印を設計できます。その後、Expanderの左右のVisualStatesで、それらのテンプレートをポイントします。
うまくいけばうまくいきます。私はあなたがデフォルトのテンプレートを見ればそれははっきりしているはずだと思いますが、それをしてからしばらくしています。私は彼らがすべての州をやったわけではないことを覚えています。
ここに私のSLの例があります。私たちのアプリは、上下に必要なので、左または右はありませんが、うまくいけばそれはあなたを始めることができます。矢印が回転するので、それがどのように機能するかを見ることができます。
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
xmlns:System="clr-namespace:System;assembly=mscorlib"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/BasicResources;component/BasicStyles.xaml"/>
<ResourceDictionary Source="/BasicResources;component/BasicResource.xaml"/>
</ResourceDictionary.MergedDictionaries>
<!-- Named fade brush for visual effect on Expander Header right edge -->
<!-- this brush is specified here as it uses resource brushes, so will work properly with high contrast -->
<LinearGradientBrush x:Key="ExpanderHeaderFadeBrush" StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Transparent"/>
<GradientStop Color="{StaticResource BgColor}" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="ExpanderHeaderBorderStyle" TargetType="Border">
<Setter Property="BorderBrush" Value="{StaticResource BorderRestBrush}"/>
<Setter Property="BorderThickness" Value="0,0.5,0,0"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="Background" Value="{StaticResource MouseDownBgBrush}"/>
</Style>
<ControlTemplate x:Key="ExpanderHeaderCT" TargetType="ContentControl">
<Border
x:Name="bdrControlFooter"
Style="{StaticResource ExpanderHeaderBorderStyle}"
Height="{TemplateBinding Height}">
<Border
x:Name="bdrTopInner"
BorderBrush="{StaticResource WhiteBrush}"
BorderThickness="0,1,0,0">
<ContentPresenter
Cursor="{TemplateBinding Cursor}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</Border>
</ControlTemplate>
<Style x:Key="ExpanderHeaderContentStyle" TargetType="ContentControl">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Height" Value="44" />
<Setter Property="Template" Value="{StaticResource ExpanderHeaderCT}" />
</Style>
<!-- down button template -->
<ControlTemplate x:Key="ExpanderDownHeaderTemplate" TargetType="ToggleButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" To="45" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="pathTwirly" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="{StaticResource OrangeColor}" FillBehavior="HoldEnd" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="header" />
<ColorAnimation Duration="0" To="{StaticResource OrangeColor}" FillBehavior="HoldEnd" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="pathTwirly" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="58"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl x:Name="contentOuter"
Style="{StaticResource ExpanderHeaderContentStyle}"
VerticalContentAlignment="Stretch"
VerticalAlignment="Stretch"
Height="58">
<Grid x:Name="gInnerGrid"
Background="{StaticResource GradientHeaderBgBrush}" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Path x:Name="pathTwirly"
Data="F1 M 0.000,10.000 L 5.500,4.999 L 0.000,0.000 L 0.000,10.000 Z"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="35,0,0,0"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform/>
</Path.RenderTransform>
<Path.Fill>
<SolidColorBrush x:Name="brushPathFill" Color="{StaticResource BlueColor}" />
</Path.Fill>
</Path>
<Rectangle x:Name="rectFade"
Grid.Column="1"
Width="75"
HorizontalAlignment="Right"
Fill="{StaticResource ExpanderHeaderFadeBrush}"/>
<TextBlock x:Name="header"
Text="{TemplateBinding Content}"
Style="{StaticResource BlueSmallHeadingText}"
Grid.Column="1"
HorizontalAlignment="Stretch"
Margin="4,0,0,0"
VerticalAlignment="Center">
<TextBlock.Foreground>
<SolidColorBrush x:Name="brushHeader" Color="{StaticResource BlueColor}"/>
</TextBlock.Foreground>
</TextBlock>
</Grid>
</ContentControl>
</Grid>
<!-- strokedasharray specified here .. silverlight bug that it won't pick up that style element. works fine in up! -->
<Rectangle x:Name="FocusVisualElement"
Style="{StaticResource LinkRectangleFocusStyle}"
IsHitTestVisible="false"
StrokeThickness="1"
StrokeDashArray="1,3"
Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
<!-- up button template -->
<ControlTemplate x:Key="ExpanderUpHeaderTemplate" TargetType="ToggleButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" To="-45" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="pathTwirly" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="{StaticResource OrangeColor}" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="header" />
<ColorAnimation Duration="0" To="{StaticResource OrangeColor}" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="pathTwirly" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="58"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl x:Name="contentOuter"
Style="{StaticResource ExpanderHeaderContentStyle}"
VerticalContentAlignment="Stretch"
Height="58">
<Grid x:Name="gInnerGrid"
Background="{StaticResource GradientHeaderBgBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Path x:Name="pathTwirly"
Data="F1 M 0.000,10.000 L 5.500,4.999 L 0.000,0.000 L 0.000,10.000 Z"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="35,0,0,0"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform/>
</Path.RenderTransform>
<Path.Fill>
<SolidColorBrush x:Name="brushPathFill" Color="{StaticResource BlueColor}"/>
</Path.Fill>
</Path>
<Rectangle x:Name="rectFade"
Grid.Column="1"
Width="75"
HorizontalAlignment="Right"
Fill="{StaticResource ExpanderHeaderFadeBrush}"/>
<TextBlock x:Name="header"
Text="{TemplateBinding Content}"
Style="{StaticResource BlueSmallHeadingText}"
Grid.Column="1"
HorizontalAlignment="Stretch"
Margin="4,0,0,0"
VerticalAlignment="Center">
<TextBlock.Foreground>
<SolidColorBrush x:Name="brushHeader" Color="{StaticResource BlueColor}"/>
</TextBlock.Foreground>
</TextBlock>
</Grid>
</ContentControl>
</Grid>
<Rectangle x:Name="MouseOverBorderElement"
Style="{StaticResource RectangleMouseOverStyle}"
Grid.ColumnSpan="2"
Opacity="0"/>
<Rectangle x:Name="FocusVisualElement"
Style="{StaticResource LinkRectangleFocusStyle}"
IsHitTestVisible="false"
Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
<!-- main expander template -->
<ControlTemplate x:Key="ExpanderCT" TargetType="toolkit:Expander">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="DisabledVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
</VisualStateGroup>
<!-- focus comes from the expander togglebutton -->
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpansionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Collapsed"/>
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ExpandSite">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandDirectionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="ExpandDown">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd1">
<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd0">
<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ExpandUp">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Template" Storyboard.TargetName="ExpanderButton">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ExpanderUpHeaderTemplate}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ExpanderButton">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ExpandSite">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd0">
<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd0">
<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ExpandLeft" />
<VisualState x:Name="ExpandRight" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!-- begin layout -->
<Border x:Name="Background"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="cd0" Width="Auto"/>
<ColumnDefinition x:Name="cd1" Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="rd0" Height="Auto"/>
<RowDefinition x:Name="rd1" Height="Auto"/>
</Grid.RowDefinitions>
<ToggleButton x:Name="ExpanderButton"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}"
Grid.Column="0"
Foreground="{TemplateBinding Foreground}"
FontWeight="{TemplateBinding FontWeight}"
FontStyle="{TemplateBinding FontStyle}"
FontStretch="{TemplateBinding FontStretch}"
FontSize="{TemplateBinding FontSize}"
FontFamily="{TemplateBinding FontFamily}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
IsChecked="{TemplateBinding IsExpanded}"
Margin="0"
MinWidth="0"
MinHeight="0"
Padding="{TemplateBinding Padding}"
Grid.Row="0"
Template="{StaticResource ExpanderDownHeaderTemplate}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<ContentControl x:Name="ExpandSite"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Grid.Column="0"
Foreground="{TemplateBinding Foreground}"
FontWeight="{TemplateBinding FontWeight}"
FontStyle="{TemplateBinding FontStyle}"
FontStretch="{TemplateBinding FontStretch}"
FontSize="{TemplateBinding FontSize}"
FontFamily="{TemplateBinding FontFamily}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
Grid.Row="1"
Visibility="Collapsed"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
<Border x:Name="DisabledVisualElement"
Style="{StaticResource BorderDisabledStyle}"
IsHitTestVisible="false"
Visibility="Collapsed"/>
<Border x:Name="FocusVisualElement"
Style="{StaticResource BorderFocusStyle}"
IsHitTestVisible="false"
Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
<!-- styles the expander header .. the top line and background color -->
<Style TargetType="toolkit:Expander">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template" Value="{StaticResource ExpanderCT}"/>
</Style>
を使用することができます願っています。あなたがしようとしていることは難しいとは言えませんが、私はあなたが達成したいことを視覚化しようと少し苦労しています。あなたが何を撮影しているかを示すためにクイックアンドダーティ図面を作っても構わないのであれば、それを達成する方法を示すことができます。 –
@Chris W.：質問を更新しました。 – Terry
おかげで申し訳ありません画像は非常に小さいです。私はこれが正しいことを確認するには、その線の中心に位置する円のパターンで内側に向かって4つの矢印がありますか？あなたはそれらをオンにしたいと思いますが、窓の各コーナーにNW、NE、SW、SEが向いている45度と向きがそれぞれ向き合っていますか？ –