如何像 CSS 附加示例中那样设置 WPF 按钮样式
我尝试让按钮的外观像 CSS 中一样，您可以在此处看到。当你按下这个按钮时，它看起来就像进去了一样。
以下是我的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>
实现的效果跟CSS中的一模一样？
是的，您只需要通过您的大脑将 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 中使用 CSS - XamlCSS
https://forums.xamarin.com/discussion/67249/xamlcss-styling-xaml-applications-with-css
| 归档时间： |
|
| 查看次数： |
692 次 |
| 最近记录： |