如何在WPF中创建具有斜面压花效果的按钮

Question

我是WPF的新手。创建具有不规则形状和具有类似此图像的浮雕效果的按钮的最佳方法/实践是什么

我正在使用.NET 4.0。

Answer 1

这是一个使用Button模板中Paths的简单示例。此示例没有悬停/按下状态，并且不可自定义/通用，但会为您提供一个起点。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
  <Window.Resources>
    <Style x:Key="FocusVisual">
      <Setter Property="Control.Template">
        <Setter.Value>
          <ControlTemplate>
            <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
    <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
    <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
    <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
    <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
    <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
    <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
    <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
    <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
    <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
    <Style x:Key="BeveledButton" TargetType="{x:Type Button}">
      <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
      <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
      <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
      <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
      <Setter Property="BorderThickness" Value="1"/>
      <Setter Property="HorizontalContentAlignment" Value="Center"/>
      <Setter Property="VerticalContentAlignment" Value="Center"/>
      <Setter Property="Padding" Value="1"/>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type Button}">
            <Grid Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
              <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
              </Grid.RowDefinitions>
              <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
              </Grid.ColumnDefinitions>
              <Path Data="M0,0 L0,100 L25,75 L25,25 Z" Grid.Column="0" Grid.RowSpan="4" Fill="#CCC" Stretch="Fill"/>
              <Path Data="M0,0 L100,0 L75,25 L25,25 Z" Grid.Row="0" Grid.ColumnSpan="4" Fill="#999" Stretch="Fill"/>
              <Path Data="M0,25 L100,25 L75,0 L25,0 Z" Grid.Row="3" Grid.ColumnSpan="4" Fill="#666" Stretch="Fill"/>
              <Path Data="M25,0 L25,100 L0,75 L0,25 Z" Grid.Column="3" Grid.RowSpan="4" Fill="#333" Stretch="Fill"/>
              <ContentPresenter Grid.ColumnSpan="4" Grid.RowSpan="4" x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Window.Resources>
  <Grid>
    <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="113" Margin="206,128,0,0" Height="53.96" Style="{DynamicResource BeveledButton}" />
  </Grid>
</Window>