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>

如果您在将其应用到代码中时遇到任何麻烦，请参考我为您提供的此链接以及download代码。并确保对您有用。

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>

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

2 个答案: