このトピックでは、xamBusyIndicator コントロールにカスタム アニメーションを適用する方法について説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
事前作成済みの xamBusyIndicator アニメーションのセットが提供されるだけではなく、カスタム アニメーションを作成して、コントロールに適用することもできます。
以下のスクリーンショットは最終結果のプレビューです。
以下の手順では、カスタム アニメーションを xamBusyIndicator コントロールに適用する方法を示します。
XamBusyIndicator をページに追加
xamBusyIndicator をページに追加します。
XAML の場合:
<ig:XamBusyIndicator Name="BusyIndicator" IsBusy="True" />カスタム DataTemplate の作成
カスタム データ テンプレートを Window リソースとして作成します。
XAML の場合:
<Window.Resources>
<Style TargetType="{x:Type ProgressBar}" x:Key="ProgressBarStyle" >
<!-- スタイルのコンテンツはここ -->
</Style>
<DataTemplate x:Key="CustomBusyIndicatorTemplate">
<ProgressBar Height="22" Width="180" IsIndeterminate="True" Style="{StaticResource ProgressBarStyle}" />
</DataTemplate>
</Window.Resources>作成した CustomBusyAnimation オブジェクトを Animation プロパティに設定
BusyAnimations クラスの CreateCustomAnimation メソッドを使用して作成した CustomBusyAnimation オブジェクトを、コードビハインドで XamBusyIndicator Animation プロパティに設定します。
C# の場合:
CustomBusyAnimation customAnimation = BusyAnimations.CreateCustomAnimation(this.Resources["CustomBusyIndicatorTemplate"] as DataTemplate);
BusyIndicator.Animation = customAnimation;Visual Basic の場合:
Dim customAnimation As CustomBusyAnimation = BusyAnimations.CreateCustomAnimation(TryCast(Me.Resources("CustomBusyIndicatorTemplate"), DataTemplate))
BusyIndicator.Animation = customAnimationまたは XAML で以下のコードを使用:
XAML の場合:
<ig:XamBusyIndicator.Animation>
<ig:CustomBusyAnimation DataTemplate="{StaticResource CustomBusyIndicatorTemplate}" />
</ig:XamBusyIndicator.Animation>以下は、この手順の完全なコードです。
Window リソースとしてのカスタム テンプレートの作成
XAML の場合:
<Window.Resources>
<Style TargetType="{x:Type ProgressBar}" x:Key="ProgressBarStyle" >
<Setter Property="Foreground" Value="#FF0072C6"/>
<Setter Property="Background" Value="#FFE0E0E0"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="#FF797979" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid Name="TemplateRoot" SnapsToDevicePixels="true">
<Rectangle Fill="{TemplateBinding Background}"/>
<Rectangle Name="PART_Track" Margin="0" />
<Decorator x:Name="PART_Indicator" HorizontalAlignment="Left" Margin="0">
<Grid Name="Foreground">
<Rectangle Fill="{TemplateBinding Foreground}" Name="Indicator" />
<Grid x:Name="Animation" ClipToBounds="true" Visibility="Hidden">
<Rectangle Fill="{TemplateBinding Background}" Name="HiderPre" Margin="0,0,50,0" >
<Rectangle.RenderTransform>
<ScaleTransform x:Name="HiderPreTransform" ScaleX="0"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Fill="{TemplateBinding Background}" Name="HiderPost" RenderTransformOrigin="1, 0" Margin="50,0,0,0">
<Rectangle.RenderTransform>
<ScaleTransform x:Name="HiderPostTransform" ScaleX="1" />
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
<Grid Name="Overlay" Opacity="0.8"/>
</Grid>
</Decorator>
<Border BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="2"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsIndeterminate" Value="True">
<Setter TargetName="Animation" Property="Visibility" Value="Visible" />
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="HiderPreTransform"
Storyboard.TargetProperty="(ScaleTransform.ScaleX)" To="1"
Duration="0:00:1" AutoReverse="True"/>
<DoubleAnimation Storyboard.TargetName="HiderPostTransform"
Storyboard.TargetProperty="(ScaleTransform.ScaleX)" To="0"
Duration="0:00:1" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="CustomBusyIndicatorTemplate">
<ProgressBar Height="22" Width="180" IsIndeterminate="True" Style="{StaticResource ProgressBarStyle}" />
</DataTemplate>
</Window.Resources>ページへの xamBusyIndicator の追加と Animation プロパティへの CustomBusyAnimation の設定
XAML の場合:
<ig:XamBusyIndicator Name="BusyIndicator" IsBusy="True">
<ig:XamBusyIndicator.Animation>
<ig:CustomBusyAnimation DataTemplate="{StaticResource CustomBusyIndicatorTemplate}" />
</ig:XamBusyIndicator.Animation>
</ig:XamBusyIndicator>このトピックの追加情報については、以下のトピックも合わせてご参照ください。