Animation Silverlight ProgressBar:是否动态设置不确定RadientFill?
我正在为SL4中的ProgressBar设计样式,除了不确定的动画外,它几乎完成了。这将是一种类型化样式,ProgressBar的宽度不会是固定值。我正在尝试在故事板中设置“to”值,但我没有取得多大成功Animation Silverlight ProgressBar:是否动态设置不确定RadientFill?,animation,silverlight-4.0,binding,progress-bar,Animation,Silverlight 4.0,Binding,Progress Bar,我正在为SL4中的ProgressBar设计样式,除了不确定的动画外,它几乎完成了。这将是一种类型化样式,ProgressBar的宽度不会是固定值。我正在尝试在故事板中设置“to”值,但我没有取得多大成功 <DoubleAnimation Duration="00:00:.5" Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.Transform).(TransformGroup.Children)[0].X" Sto
<DoubleAnimation Duration="00:00:.5" Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.Transform).(TransformGroup.Children)[0].X" Storyboard.TargetName="IndeterminateGradientFill" From="0" To="{Binding ElementName=ProgressBarRootGrid, Path=ActualWidth}"/>
有什么建议吗?我建议将形状的水平对齐设置为拉伸,然后设置RenderTransforms Scale X属性的动画 这应该让您开始:
<UserControl x:Class="SilverlightTestImages.MainPage"
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"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<ControlTemplate x:Key="ProgressBarControlTemplate1" TargetType="ProgressBar">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Determinate"/>
<VisualState x:Name="Indeterminate">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Duration="0:0:1" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border BorderBrush="Black" BorderThickness="1" CornerRadius="2">
<Rectangle x:Name="rectangle" Fill="#FF1B6C0B" RadiusX="1" RadiusY="1" RenderTransformOrigin="0,0.5">
<Rectangle.RenderTransform>
<CompositeTransform ScaleX="0"/>
</Rectangle.RenderTransform>
</Rectangle>
</Border>
</Grid>
</ControlTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<ProgressBar Height="10" VerticalAlignment="Bottom" Template="{StaticResource ProgressBarControlTemplate1}" IsIndeterminate="True"/>
</Grid>
</UserControl>
更新
要完成类似于VS2010的工作,进度条有点困难,因为在某些方面设置了翻译动画。来自Silverlight测试团队的Jeff Wilcox有一个很好的控件,可以根据您的需要进行安装。转到并在“获取代码”下下载RelativeAnimatingContentControl.cs。然后使用下面的动画,这应该接近你要找的
<UserControl
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:Microsoft_Phone_Controls_Unsupported="clr-namespace:Microsoft.Phone.Controls.Unsupported"
x:Class="SilverlightTestImages.MainPage"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<ControlTemplate x:Key="ProgressBarControlTemplate1" TargetType="ProgressBar">
<Microsoft_Phone_Controls_Unsupported:RelativeAnimatingContentControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Determinate"/>
<VisualState x:Name="Indeterminate">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Duration="0:0:1" To="100.1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Background" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border BorderBrush="#FFBCBCBC" BorderThickness="1" CornerRadius="2">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF5F5F5"/>
<GradientStop Color="#FFE5E5E5" Offset="0.49"/>
<GradientStop Color="#FFB4B4B4" Offset="0.5"/>
<GradientStop Color="#FFC8C8C8" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Border BorderBrush="#B2FFFFFF" BorderThickness="1" CornerRadius="2"/>
<Rectangle x:Name="Background" RadiusX="1" RadiusY="1" RenderTransformOrigin="0,0.5" Width="100" HorizontalAlignment="Left">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#0041DE0C"/>
<GradientStop Color="#9941DE0C" Offset="0.4"/>
<GradientStop Color="#9941DE0C" Offset="0.6"/>
<GradientStop Color="#0041DE0C" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.RenderTransform>
<CompositeTransform TranslateX="-20.1"/>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</Border>
</Microsoft_Phone_Controls_Unsupported:RelativeAnimatingContentControl>
</ControlTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<ProgressBar Height="20" Width="200" VerticalAlignment="Center" HorizontalAlignment="Center" Template="{StaticResource ProgressBarControlTemplate1}" IsIndeterminate="True" />
</Grid>
</UserControl>
形状的HA设置为“拉伸”。一个样品会很有帮助。我基本上是在尝试获得与VS的不确定状态栏相同的效果,单一的绿色渐变在轨道上滑动。我深入研究了开箱即用的动画,现在我明白了我的问题所在。您提供的代码非常有用。非常感谢。