如何在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>