Question

我想要旋转的按钮和形状（六边形）。但我不希望它的背景被轮换。如何将图像放置到旋转的六边形按钮？这是我的代码：

<Button Height="182" Width="155" RenderTransformOrigin="0.5,1.368">
    <Button.Background>
        <ImageBrush ImageSource="mob.png"/>
    </Button.Background>
    <Button.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform Angle="270"/>
            <TranslateTransform X="187.488" Y="-187.488"/>
        </TransformGroup>
    </Button.RenderTransform>

    <Button.Template>
        <ControlTemplate>
              <ed:RegularPolygon Fill="{TemplateBinding Background}"/>
          </ControlTemplate>
     </Button.Template>
 </Button>

Answer 1

我可以建议您创建一个ControlTemplate来处理您之后的所有事情吗？

在模板中，确保绘制多边形，然后将其旋转为所需的任何值，然后将ContentPresenter控件添加到模板中。这应该绘制按钮的任何内容。在你的cas eI中，我会把mod.png作为内容。

绑定ContentPrester需要使用TemplateBinding，如下所示。

<!-- DRAW HEXAGON HERE -->
<ContentPresenter Conent="{TemplateBinding Content}"/>

并确保您对六边形而不是内容应用任何旋转。

Answer 2

您无法在按钮上使用RenderTransform执行此操作，因为这会旋转整个填充多边形。您可以使用包含折线的几何图形的ed:RegularPolygon代替Path，例如PathGeometry：

<Button Height="182" Width="155">
    <Button.Background>
        <ImageBrush ImageSource="mob.png"/>
    </Button.Background>

    <Button.Template>
        <ControlTemplate>
            <Path Fill="{TemplateBinding Background}">
                <Path.Data>
                    <PathGeometry>
                        <PathGeometry.Transform>
                            ... put transform here ...
                        </PathGeometry.Transform>
                        <PathGeometry.Figures>
                            ... put polyline data here ...
                        </PathGeometry.Figures>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </ControlTemplate>
    </Button.Template>
</Button>

旋转六角形按钮但不旋转图像

2 个答案: