WPF 形状按钮 - Visual Studio/Blend

Question

我最近开始学习 WPF，遇到了一个小问题。我正在尝试创建一个适合我在 Photoshop 中制作的样式的基本按钮形状（透明）。

这是形状（它就像一个两边各有一个三角形的盒子）。 http://prntscr.com/g3esel

如果在 Blend 中更容易做到并将其实现到视觉中，那么我很想知道如何。

按钮样式：

        <Style x:Key="Clicky" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <StackPanel Orientation="Horizontal">
                        <Grid Height="74" Width="284" Background="{TemplateBinding Background}"/>
                        <TextBlock Text="{TemplateBinding Content}"  TextAlignment="Center" VerticalAlignment="Center"/>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Cursor" Value="Hand" />
                <Setter Property="Button.Opacity" Value="10" />
            </Trigger>
        </Style.Triggers>
    </Style>

谢谢！

Answer 1

您需要为Button 创建一个ControlTemplate。这可以在 Blend 和 Visual Studio 中完成。我在VS2015中做到了。 这是您的代码：

但是，为了将来，在发布问题之前尝试做some work yourself。包含足够的代码以允许其他人重现该问题。如需帮助，请阅读如何创建Minimal, Complete, and Verifiable example。

<Grid Background="Red">
    <Button Height="52" Opacity="0.8">
        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="Background">
                    <Setter.Value>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                            <GradientStop Color="#053755" Offset="0" />
                            <GradientStop Color="#053755" Offset="0.5" />
                            <GradientStop Color="#061F31" Offset="0.5" />
                            <GradientStop Color="#061F31" Offset="1.0" />
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Border Margin="-1,0" Grid.Column="1" Background="{TemplateBinding Background}"  BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,1">
                                    <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}"/>
                                </Border>
                                <Path Fill="{TemplateBinding Background}" Data="M13,0 0,25 0,27 13,52 13,52" Stroke="{TemplateBinding BorderBrush}" Width="13" Stretch="Fill" ClipToBounds="True"/>
                                <Path Grid.Column="2" Data="M0,0 13,25 13,27 0,52" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" Width="13" Stretch="Fill" ClipToBounds="True"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Button.Style>
    </Button>
</Grid>