1

我为用于展开/折叠控件的 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 不应该通过硬编码（它取决于按钮的宽度和高度）

你能帮我解决这个问题吗？

4

1 回答 1

1

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

于 2013-11-11T06:45:35.373 回答