Silverlight 4 中自定义 Busyindicator 样式
如何创建带自定义进度条的 Silverlight 4 Busyindicator 样式。
引言
这是一个简单但有效的忙碌指示器样式。区别在于它采用了全新的外观，而不是单调的标准进度条。
如何实现
进度条由 8 个片段（路径）组成，这些片段以圆形排列，并出现和消失。
- 首先，我们需要构建这些路径。借助 Expression Blend 4，这非常容易。
- 创建一个新项目，并添加两个圆，第二个圆比第一个圆小，但都居中对齐。然后在它们上面添加四个矩形，如下所示
- 现在，使用 Blend 的上下文菜单从较大的椭圆中减去较小的椭圆，然后从结果中减去矩形。
- 现在你需要释放组合路径
- 最后要做的是为每个路径添加适当的时间线和动画首选项。
结果如下
然后将所有路径分组到一个网格中，并放入一个 ViewBox 中。这将有助于图形保持其形状并自动调整大小。
这是 XAML
<Style TargetType="toolkit:BusyIndicator">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Background" Value="{StaticResource Brush5}"/>
<Setter Property="BusyContent" Value="Please wait..."/>
<Setter Property="FontFamily"
Value="{StaticResource FontFamily1}"/>
<Setter Property="FontSize" Value="{StaticResource FontSize1}"/>
<Setter Property="Foreground" Value="{StaticResource Brush2}"/>
<Setter Property="DisplayAfter" Value="00:00:00.1"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="OverlayStyle">
<Setter.Value>
<Style TargetType="Rectangle">
<Setter Property="Fill" Value="White"/>
<Setter Property="Opacity" Value="0.6"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="ProgressBarStyle">
<Setter.Value>
<Style TargetType="ProgressBar">
<Setter Property="Background"
Value="{StaticResource Brush1}"/>
<Setter Property="Foreground"
Value="{StaticResource Brush2}"/>
<Setter Property="IsIndeterminate"
Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Determinate"/>
<vsm:VisualState x:Name="Indeterminate">
<Storyboard BeginTime="0:0:0.15"
Duration="0:0:2.4"
RepeatBehavior="Forever" >
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="p1"
Storyboard.TargetProperty=
"Opacity">
<LinearDoubleKeyFrame
KeyTime="0:0:0.15"
Value="0"/>
<LinearDoubleKeyFrame
KeyTime="0:0:0.26"
Value="1"/>
<LinearDoubleKeyFrame
KeyTime="0:0:1.35"
Value="1"/>
<LinearDoubleKeyFrame
KeyTime="0:0:1.46"
Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="p2"
Storyboard.TargetProperty=
"Opacity">
<LinearDoubleKeyFrame
KeyTime="0:0:0.30"
Value="0"/>
<LinearDoubleKeyFrame
KeyTime="0:0:0.41"
Value="1"/>
<LinearDoubleKeyFrame
KeyTime="0:0:1.50"
Value="1"/>
<LinearDoubleKeyFrame
KeyTime="0:0:1.61"
Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="p3"
Storyboard.TargetProperty=
"Opacity">
<LinearDoubleKeyFrame
KeyTime="0:0:0.45"
Value="0"/>
<LinearDoubleKeyFrame
KeyTime="0:0:0.56"
Value="1"/>
<LinearDoubleKeyFrame
KeyTime="0:0:1.65"
Value="1"/>
<LinearDoubleKeyFrame
KeyTime="0:0:1.76"
Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="p4"
Storyboard.TargetProperty=
"Opacity">
<LinearDoubleKeyFrame
KeyTime="0:0:0.60"
Value="0"/>
<LinearDoubleKeyFrame
KeyTime="0:0:0.71"
Value="1"/>
<LinearDoubleKeyFrame
KeyTime="0:0:1.80"
Value="1"/>
<LinearDoubleKeyFrame
KeyTime="0:0:1.91"
Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="p5"
Storyboard.TargetProperty=
"Opacity">
<LinearDoubleKeyFrame
KeyTime="0:0:0.75"
Value="0"/>
<LinearDoubleKeyFrame
KeyTime="0:0:0.86"
Value="1"/>
<LinearDoubleKeyFrame
KeyTime="0:0:1.95"
Value="1"/>
<LinearDoubleKeyFrame
KeyTime="0:0:2.06"
Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="p6"
Storyboard.TargetProperty=
"Opacity">
<LinearDoubleKeyFrame
KeyTime="0:0:0.90"
Value="0"/>
<LinearDoubleKeyFrame
KeyTime="0:0:1.01"
Value="1"/>
<LinearDoubleKeyFrame
KeyTime="0:0:2.10"
Value="1"/>
<LinearDoubleKeyFrame
KeyTime="0:0:2.21"
Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="p7"
Storyboard.TargetProperty=
"Opacity">
<LinearDoubleKeyFrame
KeyTime="0:0:1.05"
Value="0"/>
<LinearDoubleKeyFrame
KeyTime="0:0:1.16"
Value="1"/>
<LinearDoubleKeyFrame
KeyTime="0:0:2.25"
Value="1"/>
<LinearDoubleKeyFrame
KeyTime="0:0:2.36"
Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="p8"
Storyboard.TargetProperty=
"Opacity">
<LinearDoubleKeyFrame
KeyTime="0:0:1.20"
Value="0"/>
<LinearDoubleKeyFrame
KeyTime="0:0:1.31"
Value="1"/>
<LinearDoubleKeyFrame
KeyTime="0:0:2.40"
Value="1"/>
<LinearDoubleKeyFrame
KeyTime="0:0:2.40"
Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Viewbox>
<Grid Height="35" Width="35">
<Path x:Name="p5" Opacity="0"
Data="M5.3666506,0.5000003
L5.7133517,0.72223777
C6.6946535,1.3184171
7.7845569,1.7536836
8.9464264,1.9914073
L8.9809875,1.998026
L8.9809875,8.876935
L8.8369169,8.8604708
C5.7175508,8.4639959
2.862067,7.2222071
0.50738931,5.3719926
L0.5,5.3660407 z"
Margin="6.496,0,0,0.124"
Stretch="Fill"
Stroke="#FF7E7E7E"
UseLayoutRounding="False"
HorizontalAlignment="Left"
Height="9.377"
VerticalAlignment="Bottom"
Width="9.481"
StrokeThickness="0"
Fill="{TemplateBinding Background}"/>
<Path x:Name="p4" Opacity="0"
Data="M4.1121063,0.5000006
L8.9784365,5.3657207
L8.9678411,5.3742528
C6.6131639,7.2244673
3.7576799,8.4662561
0.63831252,8.862731
L0.50000048,8.8785391
L0.50000048,1.999184
L0.52880186,1.9936675
C1.6906725,1.7559438
2.7805767,1.3206773
3.761878,0.72449797 z"
Margin="0,0,6.497,0.124"
Stretch="Fill"
Stroke="#FF7E7E7E"
UseLayoutRounding="False"
HorizontalAlignment="Right"
Height="9.379"
VerticalAlignment="Bottom"
Width="9.478"
StrokeThickness="0"
Fill="{TemplateBinding Background}"/>
<Path x:Name="p3" Opacity="0"
Data="M1.9976557,0.5 L8.8776493,
0.5 L8.8615131,
0.64116967 C8.4649878,
3.7601461 7.2230439,
6.615272 5.3725972,8.969655
L5.366652,8.9770346
L0.5,4.110992 L0.7222597,
3.7643437 C1.3185138,
2.7831655 1.7538347,1.6933979
1.9915864,0.53167284 z"
Margin="0,0,0.124,6.499"
Stretch="Fill"
Stroke="#FF7E7E7E"
UseLayoutRounding="False"
HorizontalAlignment="Right"
Height="9.477"
VerticalAlignment="Bottom"
Width="9.378" StrokeThickness="0"
Fill="{TemplateBinding Background}"/>
<Path x:Name="p6" Opacity="0"
Data="M0.5,0.5 L7.3799934,
0.5 L7.3860626,
0.53167284 C7.623816,
1.6933979 8.0591364,
2.7831655 8.6553907,
3.7643437 L8.8799105,
4.1145191 L4.0135803,
8.9802399 L4.0050535,
8.969655 C2.1546073,
6.615272 0.91266096,
3.7601461 0.51613933,
0.64116967 z"
Margin="0.12,0,0,6.496"
Stretch="Fill" Stroke="#FF7E7E7E"
UseLayoutRounding="False"
HorizontalAlignment="Left" Height="9.48"
VerticalAlignment="Bottom"
Width="9.38" StrokeThickness="0"
Fill="{TemplateBinding Background}"/>
<Path x:Name="p2" Opacity="0"
Data="M5.3666501,0.50000006
L5.3726025,0.50738847
C7.2230492,2.8617713
8.4649935,5.7168975
8.8615189,8.8358727
L8.877655,8.9770498
L1.9976631,8.9770498
L1.991592,8.9453697
C1.7538403,7.7836447
1.3185194,6.6938791
0.72226524,5.7126989
L0.5,5.3660417 z"
Margin="0,6.499,0.124,0"
Stretch="Fill" Stroke="#FF7E7E7E"
UseLayoutRounding="False"
HorizontalAlignment="Right"
Height="9.477"
VerticalAlignment="Top"
Width="9.378" StrokeThickness="0"
Fill="{TemplateBinding Background}"/>
<Path x:Name="p7" Opacity="0"
Data="M4.013588,0.50000024
L8.8799181,5.3657212
L8.6553917,5.7159047
C8.0591364,6.6970849
7.6238165,7.7868505
7.3860636,8.948576
L7.379993,8.9802561 L0.5,
8.9802561 L0.51614022,
8.8390789 C0.91266179,
5.7201033 2.154608,
2.8649771 4.0050545,
0.51059425 z"
Margin="0.12,6.496,0,0"
Stretch="Fill" Stroke="#FF7E7E7E"
UseLayoutRounding="False"
HorizontalAlignment="Left"
Height="9.48"
VerticalAlignment="Top"
Width="9.38" StrokeThickness="0"
Fill="{TemplateBinding Background}"/>
<Path x:Name="p1" Opacity="0"
Data="M0.50000048,
0.5 L0.63831252,0.5158087
C3.7576799,0.91228062
6.6131639,2.1540713 8.9678411,
4.0042858 L8.9784269,
4.0128117 L4.1120973,8.8785334
L3.761878,8.6540403 C2.7805767,
8.0578604 1.6906725,
7.6225948 0.52880186,7.3848715
L0.50000048,7.379354 z"
Margin="0,0.125,6.497,0"
Stretch="Fill"
Stroke="#FF7E7E7E"
UseLayoutRounding="False"
HorizontalAlignment="Right"
Height="9.379"
VerticalAlignment="Top"
Width="9.478"
StrokeThickness="0"
Fill="{TemplateBinding Background}"/>
<Path x:Name="p8" Opacity="0"
Data="M8.9809799,0.5
L8.9809799,7.3789091
L8.9464188,7.3855295
C7.7845492,7.6232529
6.6946459,8.0585184
5.7133441,8.6546984
L5.366652,8.8769302
L0.50000006,4.0108881
L0.50738156,4.0049438
C2.8620591,2.1547294
5.7175431,0.91293871 8.8369093,
0.5164668 z"
Margin="6.496,0.124,0,0"
Stretch="Fill"
Stroke="#FF7E7E7E"
UseLayoutRounding="False"
HorizontalAlignment="Left"
Height="9.377"
VerticalAlignment="Top"
Width="9.481" StrokeThickness="0"
Fill="{TemplateBinding Background}"/>
</Grid>
</Viewbox>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:BusyIndicator">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisibilityStates">
<VisualState x:Name="Hidden">
<Storyboard>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.001"
Storyboard.TargetProperty=
"(UIElement.Visibility)"
Storyboard.TargetName="busycontent">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.001"
Storyboard.TargetProperty=
"(UIElement.Visibility)"
Storyboard.TargetName="overlay">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Visible">
<Storyboard>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.001"
Storyboard.TargetProperty=
"(UIElement.Visibility)"
Storyboard.TargetName="busycontent">
<DiscreteObjectKeyFrame
KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.001"
Storyboard.TargetProperty=
"(UIElement.Visibility)"
Storyboard.TargetName="overlay">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="BusyStatusStates">
<VisualState x:Name="Idle">
<Storyboard>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.001"
Storyboard.TargetProperty=
"(Control.IsEnabled)"
Storyboard.TargetName="content">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Busy">
<Storyboard>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.001"
Storyboard.TargetProperty=
"(Control.IsEnabled)"
Storyboard.TargetName="content">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>False
</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="content"
Content="{TemplateBinding Content}"
HorizontalAlignment=
"{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment=
"{TemplateBinding VerticalContentAlignment}"
ContentTemplate=
"{TemplateBinding ContentTemplate}"/>
<Rectangle x:Name="overlay"
Style="{TemplateBinding OverlayStyle}"
d:IsHidden="True"/>
<ContentPresenter x:Name="busycontent">
<Border Background="{TemplateBinding Background}"
CornerRadius="4"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Border.Effect>
<DropShadowEffect Opacity="0.6"
BlurRadius="6" ShadowDepth="0" />
</Border.Effect>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl
Content="{TemplateBinding BusyContent}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="{TemplateBinding Foreground}"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
ContentTemplate=
"{TemplateBinding BusyContentTemplate}"
Grid.Row="0" Margin="5 5 5 2"/>
<ProgressBar
Style="{TemplateBinding ProgressBarStyle}"
Height="45"
Width="45" Grid.Row="2"
IsIndeterminate="True"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="5 2 5 5"/>
</Grid>
</Border>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
你不能完全复制粘贴这段代码并期望它能工作。有一些自定义资源，例如画笔和其他定义的参数在外部，但你可以轻松地编辑它并使其为你工作。
工作原理
如果你在线测试过该控件，你可能已经注意到图形的片段以这种方式出现和消失：一个接一个，八个图形按顺时针方向出现，直到它们全部出现，然后以相同的方向一个接一个地消失，直到它们全部消失。动画以相同的顺序无限循环。
所有这些运动都在进度条样式的不确定状态的 VSM 部分中定义。没有代码隐藏或其他来源，只有 XAML。
你可以从 这里 下载所有源代码以及其他控件样式。