首页 > 解决方案 > 使用 XAML 样式的 WPF 3d 按钮样式

问题描述

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

这是未按下按钮的样式:

在此处输入图像描述

这是按下按钮的样式:

在此处输入图像描述

标签: c#.netwpfxaml

解决方案


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

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

推荐阅读