[英]Animating WPF ImageBrush in ProgressBar Control Template
I have a Control Template for Progress Bar in my Resource Dictionary. 我的资源字典中有一个进度栏控制模板。 Complete code goes like this:
完整的代码如下所示:
<ControlTemplate x:Key="KinasticPB" TargetType="ProgressBar">
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard x:Name="str">
<QuaternionAnimation x:Name="quatanim"
Storyboard.TargetProperty="(ImageBrush.Viewport)"
From="0,0,36,36"
To="36,0,36,36"
Duration="0:0:5"
AutoReverse="False"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
<!-- Custom progress bar goes here -->
<Border Name="PART_Track"
Width="{TemplateBinding Width}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Height="{TemplateBinding Height}"
CornerRadius="0"
Padding="1.5" >
<Grid>
<!-- Rounded mask (stretches to fill Grid) -->
<Border Name="mask" Background="#EEEEEE" CornerRadius="0"/>
<!-- Any content -->
<Rectangle Name="PART_Indicator" HorizontalAlignment="Left" Height="{TemplateBinding Height}">
<Rectangle.OpacityMask>
<VisualBrush Visual="{Binding ElementName=mask}" />
</Rectangle.OpacityMask>
<Rectangle.Fill>
<ImageBrush x:Name="imgbrush"
ImageSource="/Kinastic.UCLibrary;component/Media/tex.png"
AlignmentX="Left"
Stretch="Fill"
TileMode="Tile"
AlignmentY="Top"
ViewportUnits="Absolute"
Viewport="0,0,36,36"
ViewboxUnits="RelativeToBoundingBox"
Viewbox="0,0,1,1"
>
</ImageBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>
</ControlTemplate>
But the animation won't work. 但是动画无法正常工作。 What I want to achieve is create an animated progress bar filling.
我要实现的是创建一个动画进度条填充。 I figured it out, that I only need to change ImageBrush's viewport values.
我发现,只需要更改ImageBrush的视口值即可。 Probably it is TargetProperty which is wrong.
可能是TargetProperty错误。
To animate a rect (the ViewPort type) use a RectAnimation rather than a QuaternionAnimation. 要为矩形(ViewPort类型)设置动画,请使用RectAnimation而不是QuaternionAnimation。 The storyboard.TargetName property of the animation needs be set to imgbrush as well.
动画的storyboard.TargetName属性也需要设置为imgbrush 。 Try:
尝试:
<ControlTemplate
x:Key="KinasticPB"
TargetType="ProgressBar">
<ControlTemplate.Triggers>
<EventTrigger
RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard
x:Name="str">
<RectAnimation
x:Name="quatanim"
Storyboard.TargetName="imgbrush"
Storyboard.TargetProperty="(ImageBrush.Viewport)"
From="0,0,36,36"
To="36,0,36,36"
Duration="0:0:5"
AutoReverse="False"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
<!-- Custom progress bar goes here -->
<Border
Name="PART_Track"
Width="{TemplateBinding Width}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Height="{TemplateBinding Height}"
CornerRadius="0"
Padding="1.5">
<Grid>
<!-- Rounded mask (stretches to fill Grid) -->
<Border
Name="mask"
Background="#EEEEEE"
CornerRadius="0" />
<!-- Any content -->
<Rectangle
Name="PART_Indicator"
HorizontalAlignment="Left"
Height="{TemplateBinding Height}">
<Rectangle.OpacityMask>
<VisualBrush
Visual="{Binding ElementName=mask}" />
</Rectangle.OpacityMask>
<Rectangle.Fill>
<ImageBrush
x:Name="imgbrush"
ImageSource="/Kinastic.UCLibrary;component/Media/tex.png"
AlignmentX="Left"
Stretch="Fill"
TileMode="Tile"
AlignmentY="Top"
ViewportUnits="Absolute"
Viewport="0,0,36,36"
ViewboxUnits="RelativeToBoundingBox"
Viewbox="0,0,1,1">
</ImageBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>
</ControlTemplate>
The problem is back. 问题又回来了。 I had to change it to UserControl, to put some code behind it and it doesn't work again.
我不得不将其更改为UserControl,以在其后添加一些代码,该代码不再起作用。 I am getting XamlParseException at line
我在行上收到XamlParseException
<ProgressBar Width="{Binding ElementName=Width}" Name="ProgressBar" Height="{Binding ElementName=Height}" Value="20" />
However, when I comment the ControlTemplate.Trigger section, it works well. 但是,当我评论ControlTemplate.Trigger部分时,它运行良好。
<UserControl x:Class="Kinastic.UCLibrary.AnimatedProgressBar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" d:DesignHeight="30" d:DesignWidth="300" Height="30" Width="300">
<UserControl.Resources>
<!--<Storyboard x:Name="str" x:Key="str1">
<RectAnimation x:Name="quatanim"
Storyboard.TargetName="imgbrush"
Storyboard.TargetProperty="(ImageBrush.Viewport)"
From="0,0,36,36" To="36,0,36,36" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>-->
<Style TargetType="ProgressBar">
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="10" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="#666666" />
<Setter Property="BorderThickness" Value="1.6" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Name="KinasticPB" TargetType="ProgressBar">
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard x:Name="str">
<RectAnimation
x:Name="rectanim"
Storyboard.TargetName="{DynamicResource imgbrush}"
Storyboard.TargetProperty="(ImageBrush.Viewport)"
From="0,0,36,36"
To="36,0,36,36"
Duration="0:0:5"
AutoReverse="False"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
<!-- Custom progress bar goes here -->
<Border Name="PART_Track"
Width="{TemplateBinding Width}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Height="{TemplateBinding Height}"
CornerRadius="0"
Padding="1.5" >
<Grid>
<!-- Rounded mask (stretches to fill Grid) -->
<Border Name="mask" Background="#EEEEEE" CornerRadius="0"/>
<!-- Any content -->
<Rectangle Name="PART_Indicator" HorizontalAlignment="Left" Height="{TemplateBinding Height}">
<Rectangle.OpacityMask>
<VisualBrush Visual="{Binding ElementName=mask}" />
</Rectangle.OpacityMask>
<Rectangle.Fill>
<ImageBrush
x:Name="imgbrush"
ImageSource="/Kinastic.UCLibrary;component/Media/tex.png"
AlignmentX="Left"
Stretch="Fill"
TileMode="Tile"
AlignmentY="Top"
ViewportUnits="Absolute"
Viewport="0,0,36,36"
ViewboxUnits="RelativeToBoundingBox"
Viewbox="0,0,1,1"
>
</ImageBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<ProgressBar
Width="{Binding ElementName=Width}"
Name="ProgressBar"
Height="{Binding ElementName=Height}"
Value="20" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.