Question

如何制作菱形按钮风格，文字显示为水平，如this

我这样做了，但不知道下一步该做什么：

<Style x:Key="Button">
        <Setter Property="Button.Height" Value="40"/>
        <Setter Property="Button.Width" Value="40"/>           

        <Setter Property="Button.RenderTransform">
            <Setter.Value>
                <RotateTransform Angle="45"/>
            </Setter.Value>
        </Setter>            
</Style>

Answer 1

最简单的选择是不使用Button控件Content依赖项属性定义文本内容，而是在单独的控件中定义Text，例如显而易见的{{1}因为渲染变换，内容也将被旋转45度。

在您的风格中，如果您希望按钮看起来与您提供的链接完全相同，则还应设置以下依赖项属性：TextBlock，BorderThickness（黑色）和{ {1}}（白色）

BorderBrush

将Button / TextBlock对放在同一个布局区域中，并将Button控件与TextBlock重叠。根据您设置Background控制元素的维度，您可以轻松使用<Grid.Resources> <Style TargetType="Button"> <Setter Property="Height" Value="100"/> <Setter Property="Width" Value="100"/> <Setter Property="BorderThickness" Value="4"/> <Setter Property="BorderBrush" Value="Black"/> <Setter Property="Background" Value="White"/> <Setter Property="RenderTransform"> <Setter.Value> <RotateTransform Angle="45"/> </Setter.Value> </Setter> </Style> </Grid.Resources>控件上的Button依赖项属性，并将其精确地放在您想要的位置。如果我选择Grid作为这两个控件定义的布局容器，这将是我的选择。

如果我选择使用Canvas，我会使用附加的属性Margin和TextBlock，就像这样

Canvas.Left

根据您的Canvas.Top维度，您实际上可以<Canvas Margin="100,0,0,0"> <Button x:Name="myButton"/> <TextBlock Text="TextTextText" Canvas.Left="-40" Canvas.Top="60"/> </Canvas>计算这两个距离，并对这两个附加属性执行CLR property。对于这种情况，我为Button尺寸（宽度：100，高度：100）的偏移设置了这些值。

PS。提供的代码适用于UWP（我更习惯于它：p），所以我并不是特别100％确定该解决方案适用于WPF的bat。

Answer 2

您可以像尝试一样将按钮旋转45度，然后添加一个旋转-45度的TextBlock以使其保持水平。我确信有更好的方法，但这应该有效。

<Button>
    <TextBlock Text="Testing">
        <TextBlock.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform Angle="-45"/>
            <TranslateTransform/>
        </TransformGroup>
    </TextBlock.RenderTransform>
    </TextBlock>
    <Button.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform Angle="45"/>
            <TranslateTransform/>
        </TransformGroup>
    </Button.RenderTransform>
</Button>

WPF - 菱形按钮样式，内有文字

2 个答案: