代码之家  ›  专栏  ›  技术社区  ›  google dev

如何在CSS附加示例中设置WPF按钮的样式

  •  1
  • google dev  · 技术社区  · 6 年前

    我试着在css中看到按钮的外观 here 当你按下这个按钮时,它看起来好像进入了里面。

    以下是我的 XAML DropShadowEffect ,但与css中的不同。

    我如何才能实现完全像在css?

    是否可以将CSS转换为XAML?

    <Window x:Class="Window1"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            mc:Ignorable="d"
            Title="Window1" Height="250" Width="400">
        <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 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>
                                <Border BorderThickness="0,0,0,0"
                                        CornerRadius="5" Margin="0,6,0,-5" AllowDrop="True">
                                    <Border.Background>
                                        <RadialGradientBrush SpreadMethod="Reflect">
                                            <GradientStop Color="#FFA8A8A8" Offset="0.923"/>
                                            <GradientStop Color="White"/>
                                            <GradientStop Color="#FFE0E0E0" Offset="0.391"/>
                                        </RadialGradientBrush>
                                    </Border.Background>
                                </Border>
                                <Border x:Name="Shadowborder" BorderBrush="Black" BorderThickness="0,0,0,10"
                                        CornerRadius="5">
                                    <Border.Effect>
                                        <DropShadowEffect Direction="270" Opacity="0.5"/>
                                    </Border.Effect>
                                </Border>
                                <Border CornerRadius="5" x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                                    <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </Border>
                            </Grid>
    
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsDefaulted" Value="true">
                                    <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="true">
                                    <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
                                    <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                                </Trigger>
                                <Trigger Property="IsPressed" Value="true">
                                    <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                                    <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
                                    <Setter Property="Margin" TargetName="border" Value="0,5,0,-5"/>
                                    <Setter Property="Margin" TargetName="Shadowborder" Value="0,5,0,-5"/>
                                    <Setter Property="Effect" TargetName="Shadowborder">
                                        <Setter.Value>
                                            <DropShadowEffect Direction="270" Opacity="0.3" BlurRadius="1" ShadowDepth="1"/>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                                    <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                                    <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
        <Grid>
            <Button HorizontalAlignment="Center" VerticalAlignment="Center" Padding="20" Content="Hello!"/>
        </Grid>
    </Window>
    
    1 回复  |  直到 6 年前
        1
  •  3
  •   Mr. Squirrel.Downy    6 年前

    在CSS中实现完全的外观?

    是的,你只需要通过大脑从CSS转换成XAML。

    <Button HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Padding="25,10"
            Content="Hello!"
            FontSize="36"
            FontFamily="Franklin Gothic Medium">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed"
                                Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ThicknessAnimation Storyboard.TargetName="BUTTON_FACE"
                                                        Storyboard.TargetProperty="Margin"
                                                        To="0,4,0,4"
                                                        Duration="0:0:0.15">
                                        <ThicknessAnimation.EasingFunction>
                                            <QuinticEase EasingMode="EaseInOut" />
                                        </ThicknessAnimation.EasingFunction>
                                    </ThicknessAnimation>
                                    <DoubleAnimation Storyboard.TargetName="BUTTON_SHADOW"
                                                        Storyboard.TargetProperty="ShadowDepth"
                                                        To="2"
                                                        Duration="0:0:0.15">
                                        <DoubleAnimation.EasingFunction>
                                            <QuinticEase EasingMode="EaseInOut" />
                                        </DoubleAnimation.EasingFunction>
                                    </DoubleAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ThicknessAnimation Storyboard.TargetName="BUTTON_FACE"
                                                        Storyboard.TargetProperty="Margin"
                                                        To="0,0,0,8"
                                                        Duration="0:0:0.15">
                                        <ThicknessAnimation.EasingFunction>
                                            <QuinticEase EasingMode="EaseInOut" />
                                        </ThicknessAnimation.EasingFunction>
                                    </ThicknessAnimation>
                                    <DoubleAnimation Storyboard.TargetName="BUTTON_SHADOW"
                                                        Storyboard.TargetProperty="ShadowDepth"
                                                        To="6"
                                                        Duration="0:0:0.15">
                                        <DoubleAnimation.EasingFunction>
                                            <QuinticEase EasingMode="EaseInOut" />
                                        </DoubleAnimation.EasingFunction>
                                    </DoubleAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                </ControlTemplate.Triggers>
                <Grid>
                    <Grid.Effect>
                        <DropShadowEffect x:Name="BUTTON_SHADOW"
                                            BlurRadius="6"
                                            Color="Gray"
                                            Direction="-90"
                                            ShadowDepth="6" />
                    </Grid.Effect>
                    <Border CornerRadius="0,0,10,10"
                            VerticalAlignment="Bottom"
                            Height="18">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0"
                                                    EndPoint="0,1">
                                <GradientStop Color="#DEDEDE"
                                                Offset="0.3" />
                                <GradientStop Color="#BEBEBE"
                                                Offset="0.5" />
                                <GradientStop Color="#4E4E4E"
                                                Offset="1" />
                            </LinearGradientBrush>
                        </Border.Background>
                    </Border>
                    <Border Name="BUTTON_FACE"
                            Margin="0,0,0,8">
                        <Border.Effect>
                            <DropShadowEffect BlurRadius="0"
                                                Color="White"
                                                Direction="90"
                                                ShadowDepth="1" />
                        </Border.Effect>
                        <Border CornerRadius="10"
                                Background="#E8E8E8">
                            <Border.Effect>
                                <DropShadowEffect BlurRadius="1"
                                                    Direction="-90"
                                                    ShadowDepth="1"
                                                    Color="White" />
                            </Border.Effect>
                            <Grid>
                                <Rectangle RadiusX="10"
                                            RadiusY="10">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint="0,2"
                                                                EndPoint="2,0"
                                                                MappingMode="Absolute"
                                                                SpreadMethod="Reflect">
                                            <GradientStop Color="#00FFFFFF"
                                                            Offset="0" />
                                            <GradientStop Color="#00FFFFFF"
                                                            Offset="0.2" />
                                            <GradientStop Color="#FFD2D2D1"
                                                            Offset="0.2" />
                                            <GradientStop Color="#FFD2D2D1"
                                                            Offset="0.8" />
                                            <GradientStop Color="#00FFFFFF"
                                                            Offset="0.8" />
                                            <GradientStop Color="#00FFFFFF"
                                                            Offset="1" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <Rectangle RadiusX="10"
                                            RadiusY="10">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint="0,0"
                                                                EndPoint="1,0">
                                            <GradientStop Color="#00FFFFFF"
                                                            Offset="0" />
                                            <GradientStop Color="#7FFFFFFF"
                                                            Offset="0.2" />
                                            <GradientStop Color="#7FFFFFFF"
                                                            Offset="0.8" />
                                            <GradientStop Color="#00FFFFFF"
                                                            Offset="1" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <Rectangle RadiusX="10"
                                            RadiusY="10">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint="0,0"
                                                                EndPoint="1,0">
                                            <GradientStop Color="#4CD2D2D2"
                                                            Offset="0" />
                                            <GradientStop Color="#00D2D2D2"
                                                            Offset="0.2" />
                                            <GradientStop Color="#00D2D2D2"
                                                            Offset="0.8" />
                                            <GradientStop Color="#4CD2D2D2"
                                                            Offset="1" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <Rectangle RadiusX="10"
                                            RadiusY="10">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush EndPoint="0,0"
                                                                StartPoint="0,1">
                                            <GradientStop Color="#00FFFFFF"
                                                            Offset="0.5" />
                                            <GradientStop Color="#4CFFFFFF"
                                                            Offset="0.5" />
                                            <GradientStop Color="#33FFFFFF"
                                                            Offset="1" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <Border>
                                    <Border.Effect>
                                        <DropShadowEffect BlurRadius="0"
                                                            Direction="-90"
                                                            ShadowDepth="1"
                                                            Color="White" />
                                    </Border.Effect>
                                    <ContentPresenter x:Name="contentPresenter"
                                                        Focusable="False"
                                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                        Margin="{TemplateBinding Padding}"
                                                        RecognizesAccessKey="False"
                                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                        <ContentPresenter.Effect>
                                            <DropShadowEffect BlurRadius="0"
                                                                Direction="90"
                                                                ShadowDepth="1"
                                                                Color="#262F33" />
                                        </ContentPresenter.Effect>
                                    </ContentPresenter>
                                </Border>
                            </Grid>
                        </Border>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Button.Template>
    </Button>
    

    我好像发现了一些有趣的东西。

    在XAML-XAML CSS中使用CSS

    https://forums.xamarin.com/discussion/67249/xamlcss-styling-xaml-applications-with-css