使用 XAML 样式的 WPF 3d 按钮样式

Question

我有一些问题如何使用 XAML 实现下一个按钮样式？

这是未按下按钮的样式：

这是按下按钮的样式：

Answer 1

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

如果您在代码中应用它时遇到任何问题，请参考我提供给您的链接并下载代码。 并应用它肯定对你有用。

Answer 2

这不是一个完整的解决方案，因为您仍然需要为鼠标悬停和禁用状态等内容添加额外的触发器，但作为起点，您可以创建类似的样式

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