Стиль кнопки 3D в WPF с использованием стиля XAML

Question

У меня есть вопрос, как реализовать с помощью XAML стиль следующей кнопки?

Вот стиль для не нажатой кнопки:

А вот стиль для нажатой кнопки:

Answer 1

Это не полное решение, так как вам все равно нужно добавить дополнительные триггеры для таких вещей, как наведение мыши и отключенное состояние, но в качестве отправной точки вы можете создать стиль, похожий на

<Window.Resources>
    <SolidColorBrush x:Key="LightGreyBrush" Color="#c0c0c0"/>
    <SolidColorBrush x:Key="MidGreyBrush" Color="#808080"/>
    <SolidColorBrush x:Key="DarkGreyBrush" Color="#404040"/>

    <Style TargetType="{x:Type Button}" x:Key="3DButtonStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Border x:Name="TopLeftBorder" BorderBrush="{StaticResource LightGreyBrush}" BorderThickness="3,3,0,0" />
                        <Border x:Name="BottomRightBorder" BorderBrush="{StaticResource DarkGreyBrush}" BorderThickness="0,0,3,3" />
                        <Grid Margin="3" Background="{StaticResource MidGreyBrush}">
                            <ContentPresenter Margin="{TemplateBinding Padding}"/>
                        </Grid>
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="TopLeftBorder" Property="BorderBrush" Value="{StaticResource DarkGreyBrush}"/>
                            <Setter TargetName="BottomRightBorder" Property="BorderBrush" Value="{StaticResource LightGreyBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid>
    <Button HorizontalAlignment="Left" VerticalAlignment="Top" Margin="16" Padding="16,8" Content="Click Me ..." Style="{StaticResource 3DButtonStyle}"/>
</Grid>

Answer 2

Добавить это пространство имен в XAML

        xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" 

После добавления

<Window.Resources>
    <Style x:Key="ToggleButtonStyle1" TargetType="{x:Type ToggleButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="Storyboard1">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="Chrome">
                                <EasingDoubleKeyFrame KeyTime="0" Value="3"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Chrome">
                                <EasingDoubleKeyFrame KeyTime="0" Value="4"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Chrome">
                                <EasingDoubleKeyFrame KeyTime="0" Value="2"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="Chrome">
                                <EasingDoubleKeyFrame KeyTime="0" Value="3"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>
                    <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding Button.IsDefaulted}" SnapsToDevicePixels="true" RenderTransformOrigin="0.5,0.5">
                        <Microsoft_Windows_Themes:ButtonChrome.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform/>
                                <SkewTransform/>
                                <RotateTransform/>
                                <TranslateTransform/>
                            </TransformGroup>
                        </Microsoft_Windows_Themes:ButtonChrome.RenderTransform>
                        <Microsoft_Windows_Themes:ButtonChrome.Effect>
                            <DropShadowEffect/>
                        </Microsoft_Windows_Themes:ButtonChrome.Effect>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Microsoft_Windows_Themes:ButtonChrome>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Trigger.ExitActions>
                                <StopStoryboard BeginStoryboardName="Storyboard1_BeginStoryboard"/>
                            </Trigger.ExitActions>
                            <Trigger.EnterActions>
                                <BeginStoryboard x:Name="Storyboard1_BeginStoryboard" Storyboard="{StaticResource Storyboard1}"/>
                            </Trigger.EnterActions>
                        </Trigger>
                        <Trigger Property="IsKeyboardFocused" Value="true">
                            <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Window.Resources>

И последняя кнопка добавления:

 <UniformGrid>
    <ToggleButton Content="Button 1" Width="100" VerticalAlignment="Center" Style="{DynamicResource ToggleButtonStyle1}" />
    <ToggleButton Content="Button 2" Width="100" VerticalAlignment="Center" Style="{DynamicResource ToggleButtonStyle1}" />
</UniformGrid>

И если у вас возникли проблемы с применением этого в вашем коде, перейдите по этой ссылке, которую я вам предоставляю, а также загрузите код. и применять его, безусловно, работа для вас.