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

Question

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

我正在使用 .NET 4.0。

Answer 1

这是一个在按钮模板中使用路径的简单示例。此示例没有悬停/按下状态，也不是可自定义/通用的，但将为您提供一个起点。

<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>