如何为模板实现类似Orientation的属性

Question

我为ToggleButton创建了一个自定义模板，用于展开/折叠控件。

<ControlTemplate x:Key="ShowHideToggleButtonTemplate" TargetType="ToggleButton">
    <ControlTemplate.Resources>
        <system:Double x:Key="DefaultPathThickness">3</system:Double>
        <system:Double x:Key="MouseOverPathThickness">4</system:Double>
        <Geometry x:Key="HidePathData">M 0,0 7,7 0,14</Geometry>
        <Geometry x:Key="ShowPathData">M 7,0 0,7 7,14</Geometry>
    </ControlTemplate.Resources>
    <Border Name="BoundingBorder" CornerRadius="15,0,0,15" Background="{StaticResource DefaultBackgroundBrush}">
        <Border HorizontalAlignment="Center" VerticalAlignment="Center">
            <Path Name="path" Stroke="{StaticResource DefaultTextBrush}" StrokeThickness="{StaticResource DefaultPathThickness}" Data="{StaticResource HidePathData}"/>
        </Border>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsChecked" Value ="True">
            <Setter TargetName="path" Property="Data" Value="{StaticResource HidePathData}"/>
        </Trigger>
        <Trigger Property="IsChecked" Value ="False">
            <Setter TargetName="path" Property="Data" Value="{StaticResource ShowPathData}"/>
        </Trigger>
        <Trigger Property="IsMouseOver" Value ="True">
            <Setter TargetName="path" Property="StrokeThickness" Value="{StaticResource MouseOverPathThickness}"/>
        </Trigger>
        <Trigger Property="IsMouseOver" Value ="False">
            <Setter TargetName="path" Property="StrokeThickness" Value="{StaticResource DefaultPathThickness}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

在这里你可以看到它的样子：

我也想在控件的顶部，底部和右侧使用它，所以我必须以某种方式旋转它。实际上我想实现像4种状态的方向。

我的第一次尝试是在模板之外进行：

<ToggleButton Grid.Row="5" Grid.Column="0" Template="{StaticResource ShowHideToggleButtonTemplate}" IsChecked="{Binding DropBox.IsShown}"
          Height="50" Width="25" HorizontalAlignment="Center" RenderTransformOrigin="0.5, 0.5">
    <ToggleButton.RenderTransform>
        <TransformGroup>
            <RotateTransform Angle="270"/>
            <TranslateTransform Y="-12.5"/>
        </TransformGroup>
    </ToggleButton.RenderTransform>
</ToggleButton>

正如您所看到的，按钮的边界矩形仍然是垂直的，这会在按钮下方留下空白区域。

要做的事情：

1. 更新边界矩形以适合实际按钮的矩形
2. 支持4种状态（左，右，上，下）
3. 当我使用其中一个水平状态（顶部或底部）时，宽度应变为高度，高度应变为宽度。
4. 翻译Y不应该通过硬编码（取决于按钮的宽度和高度）

你能帮帮我吗？

Answer 1

最好使用LayoutTransform而不是RenderTransform，因为LayoutTransform可以更新布局边界。