模板、触发器与动画

<Window x:Class="WpfControlTemplateTest.MainWindow"
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"
xmlns:local="clr-namespace:WpfControlTemplateTest"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<ResourceDictionary>
<Style TargetType="Button">
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="40" />
<Setter Property="Background" Value="LightGreen" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Foreground" Value="White" />
<!--利用样式属性指定模板-->
<Setter Property="Template">
<Setter.Value>
<!--通过样式属性值来设置外观模板ControlTemplate-->
<ControlTemplate TargetType="Button">
<Grid>
<Border CornerRadius="10" Background="LightGreen" />
<!--常用属性通过控件修改-->
<ContentPresenter
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Margin}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" To="200" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" To="100" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Window.Resources>
<Grid>
<Button x:Name="btn1" Content="btn1" />
<Rectangle x:Name="rt" Height="40" Width="10" Fill="Blue" HorizontalAlignment="Left" VerticalAlignment="Bottom" >
<Rectangle.RenderTransform>
<TranslateTransform x:Name="rtf" />
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</Window>

posted @ 2021-01-29 10:58  丹心石  阅读(70)  评论(0编辑  收藏  举报