- 黑色方框背景色代码:
灰色方格背景DrawingBrush作为Bord贴图填充
ps:其中Stretch默认为Fill,所有AlignmentX/Y值无用,当Stretch为None,ViewBox和Viewport具有不同带大小及Stretch为Uniform或UniformToFill,而纵横比不同时将使用AlignmentX/Y。
<DrawingBrush x:Key="MyGridBrushResource"
Viewport="0,0,10,10" ViewportUnits="Absolute"
TileMode="Tile" Opacity="0.5"
AlignmentX="Left" AlignmentY="Top"
presentationOptions:Freeze="True">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Geometry="M0,0 L1,1" Brush="#44CCCCFF" />
<GeometryDrawing Geometry="M0,0 L1,0 1,0.05 0.05,0.05 0.05,1 0,1Z"
Brush="Gray" />
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
箭头绘图代码:
- 设置Marin的不同值,使箭头方框X轴不同位置
- 使用DrawingBursh里的3个Geometry组成箭头形状,贴图填充方框区域
<DrawingBrush x:Key="ArrowBackgroundBrush" Opacity="0.5"
Viewbox="0,0,1,1" Viewport="0,0,10,20" ViewportUnits="Absolute"
TileMode="Tile" presentationOptions:Freeze="True">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Geometry="M0,0 L1,0, 1,0.5" Brush="#9999FF" />
<GeometryDrawing Geometry="M0,0 L1,0.5, 0,1">
<GeometryDrawing.Brush>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Offset="0.0" Color="#9999FF" />
<GradientStop Offset="1.0" Color="Transparent" />
</LinearGradientBrush>
</GeometryDrawing.Brush>
</GeometryDrawing>
<GeometryDrawing Geometry="M0,1 L1,1, 1,0.5" Brush="#9999FF" />
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
Button按钮本身动画代码:
- 按压触发+鼠标进入、退出触发动画
<Style TargetType="{x:Type Button}" x:Key="CustomButtonStyle">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Padding" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Transparent">
<Rectangle
RadiusX="10" RadiusY="10"
StrokeThickness="5" Stroke="{TemplateBinding Background}"/>
<Rectangle
Margin="10"
Fill="{TemplateBinding Background}" />
<Rectangle x:Name="outlineRect"
RadiusX="10" RadiusY="10"
StrokeThickness="5">
<Rectangle.Stroke>
<SolidColorBrush x:Name="outlineRectangleBrush" Color="Transparent" />
</Rectangle.Stroke>
</Rectangle>
<Rectangle x:Name="sBackingRect"
Margin="10">
<Rectangle.Fill>
<SolidColorBrush x:Name="fillRectangleBrush" Color="Transparent" />
</Rectangle.Fill>
</Rectangle>
<Rectangle Name="glassCube"
RadiusX="10" RadiusY="10" Opacity="0"
Fill="{DynamicResource MyGlassBrushResource}"
StrokeThickness="2"
RenderTransformOrigin="0.5,0.5">
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0.0" Color="LightBlue" />
<GradientStop Offset="1.0" Color="Gray" />
</LinearGradientBrush>
</Rectangle.Stroke>
<Rectangle.OpacityMask>
<RadialGradientBrush>
<GradientStop Offset="0.0" Color="Transparent" />
<GradientStop Offset="1.0" Color="Black" />
</RadialGradientBrush>
</Rectangle.OpacityMask>
<Rectangle.RenderTransform>
<ScaleTransform x:Name="glassCubeScaleTransform" />
</Rectangle.RenderTransform>
</Rectangle>
<ContentPresenter x:Name="myContentPresenter"
Margin="{TemplateBinding Padding}"
Grid.Row="0" Grid.Column="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Trigger.EnterActions>
<BeginStoryboard HandoffBehavior="Compose">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="outlineRectangleBrush"
Storyboard.TargetProperty="Color"
To="Red" Duration="0:0:0.25"
AutoReverse="True"
FillBehavior="Stop" />
<ColorAnimation
Storyboard.TargetName="fillRectangleBrush"
Storyboard.TargetProperty="Color"
To="{x:Static SystemColors.HighlightColor}" Duration="0:0:0.25"
AutoReverse="True"
FillBehavior="Stop" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="outlineRect" Property="Rectangle.Opacity" Value="0" />
<Setter TargetName="glassCube" Property="Rectangle.Opacity" Value="0.75" />
</Trigger>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard Name="mouseEnterBeginStoryboard">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="glassCube"
Storyboard.TargetProperty="Opacity"
To="1" Duration="0:0:0.5"
/>
<ColorAnimation
Storyboard.TargetName="outlineRectangleBrush"
Storyboard.TargetProperty="Color"
To="{x:Static SystemColors.HighlightColor}" Duration="0:0:0.5"
/>
<DoubleAnimation
Storyboard.TargetName="glassCubeScaleTransform"
Storyboard.TargetProperty="ScaleX"
By="-0.1" Duration="0:0:0.5"
AutoReverse="True" RepeatBehavior="Forever" />
<DoubleAnimation
Storyboard.TargetName="glassCubeScaleTransform"
Storyboard.TargetProperty="ScaleY"
By="-0.1" Duration="0:0:0.5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<RemoveStoryboard BeginStoryboardName="mouseEnterBeginStoryboard" />
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="glassCube"
Storyboard.TargetProperty="Opacity"
To="0" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Button点击事件触发右侧方框动画代码:
简单的故事版动画目标元素、目标属性、持续时间、From、By、To等组合构成了不同的动画效果
<Button Grid.Row="10" Grid.Column="0" Grid.ColumnSpan="3"
Background="LimeGreen" Style="{StaticResource CustomButtonStyle}">
Start Animations
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard FillBehavior="Stop">
<!-- Demonstrates the From and To properties used together.
Animates the rectangle's Width property from 50 to 300 over 10 seconds. -->
<DoubleAnimation
Storyboard.TargetName="fromToAnimatedRectangle"
Storyboard.TargetProperty="Width"
From="50" To="300" Duration="0:0:10" />
<!-- Demonstrates the To property used by itself.
Animates the Rectangle's Width property from its base value
(100) to 300 over 10 seconds. -->
<DoubleAnimation
Storyboard.TargetName="toAnimatedRectangle"
Storyboard.TargetProperty="Width"
To="300" Duration="0:0:10" />
<!-- Demonstrates the By property used by itself.
Increments the Rectangle's Width property by 300 over 10 seconds.
As a result, the Width property is animated from its base value
(100) to 400 (100 + 300) over 10 seconds. -->
<DoubleAnimation
Storyboard.TargetName="byAnimatedRectangle"
Storyboard.TargetProperty="Width"
By="300" Duration="0:0:10" />
<!-- Demonstrates the From and By properties used by together.
Increments the Rectangle's Width property by 300 over 10 seconds.
As a result, the Width property is animated from 50
to 350 (50 + 300) over 10 seconds. -->
<DoubleAnimation
Storyboard.TargetName="fromByAnimatedRectangle"
Storyboard.TargetProperty="Width"
From="50" By="300" Duration="0:0:10" />
<!-- Demonstrates the From property used by itself.
Animates the rectangle's Width property from 50 to its base value (100)
over 10 seconds. -->
<DoubleAnimation
Storyboard.TargetName="fromAnimatedRectangle"
Storyboard.TargetProperty="Width"
From="50" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。