このトピックでは、 xamBusyIndicator コントロールのデフォルトのアニメーション ブラシをカスタマイズする方法を説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
以下の表は、 xamBusyIndicator コントロールのビルド済みアニメーション、カスタム可能なブラシ、使用できる確定モードおよび非確定モードを簡単に説明します。詳細は、概要表の後に記載されています。
AzureBusyAnimation、 LowerElementsFill、 UpperElementsFill の各プロパティを使用して、デフォルトの Azure アニメーション ブラシを変更します。
注:
ランタイムにアニメーション ブラシを変更する場合は、ランタイムでのアニメーション ブラシの変更のセクションを参照してください。
以下のスクリーンショットは、以下の設定の結果、 xamBusyIndicator の Azure アニメーションの外観がどのようになるかを示しています。
以下のコードはこの例を実装します。
XAML の場合:
<ig:XamBusyIndicator IsBusy="True" Name="Azure" >
<ig:XamBusyIndicator.Animation>
<ig:AzureBusyAnimation LowerElementsFill="#FFB8D432" UpperElementsFill="#FF59B4D9"/>
</ig:XamBusyIndicator.Animation>
</ig:XamBusyIndicator>GearsBusyAnimation、 BigGearFill、 SmallGearFill の各プロパティを使用して、デフォルトの Gears アニメーション ブラシを変更します。
注:
ランタイムにアニメーション ブラシを変更する場合は、ランタイムでのアニメーション ブラシの変更のセクションを参照してください。
以下のスクリーンショットは、以下の設定の結果、 xamBusyIndicator の Gears アニメーションの外観がどのようになるかを示しています。
以下のコードはこの例を実装します。
XAML の場合:
<ig:XamBusyIndicator IsBusy="True" Name="Gears" >
<ig:XamBusyIndicator.Animation>
<ig:GearsBusyAnimation BigGearFill="#FF324047" SmallGearFill="#FF43A898"/>
</ig:XamBusyIndicator.Animation>
</ig:XamBusyIndicator>ProgressRingBusyAnimation RingBackground、 Background、 Foreground、 RingFill の各プロパティを使用して、デフォルトの ProgressRing アニメーション ブラシを変更します。
注:
ランタイムにアニメーション ブラシを変更する場合は、ランタイムでのアニメーション ブラシの変更のセクションを参照してください。
以下のスクリーンショットは、以下の設定の結果、 xamBusyIndicator の ProgressRing アニメーションの外観がどのようになるかを示しています。
RingFill
Background
RingBackground
Foreground
以下のコードはこの例を実装します。
XAML の場合:
<ig:XamBusyIndicator IsBusy="True" IsIndeterminate="False" Name="ProgressRingDeterminate" ProgressValue=".5" >
<ig:XamBusyIndicator.Animation>
<ig:ProgressRingBusyAnimation RingBackground="Red" Background="Green" Foreground="White" RingFill="Blue" />
</ig:XamBusyIndicator.Animation>
</ig:XamBusyIndicator>SingleBrushBusyAnimation と AnimationFill のプロパティを使用して、デフォルトの SpinnerBalls アニメーション ブラシを変更します。
注:
ランタイムにアニメーション ブラシを変更する場合は、ランタイムでのアニメーション ブラシの変更のセクションを参照してください。
以下のスクリーンショットは、以下の設定の結果、 xamBusyIndicator の SpinnerBalls アニメーションの外観がどのようになるかを示しています。
以下のコードはこの例を実装します。
XAML の場合:
<ig:XamBusyIndicator IsBusy="True" Name="SpinnerBalls">
<ig:XamBusyIndicator.Animation>
<ig:SpinnerBallsBusyAnimation AnimationFill="#FF609BAE" />
</ig:XamBusyIndicator.Animation>
</ig:XamBusyIndicator>SingleBrushBusyAnimation と AnimationFill のプロパティを使用して、デフォルトの SpinnerBars アニメーション ブラシを変更します。
注:
ランタイムにアニメーション ブラシを変更する場合は、ランタイムでのアニメーション ブラシの変更のセクションを参照してください。
以下のスクリーンショットは、以下の設定の結果、 xamBusyIndicator の SpinnerBars アニメーションの外観がどのようになるかを示しています。
以下のコードはこの例を実装します。
XAML の場合:
<ig:XamBusyIndicator IsBusy="True" Name="SpinnerBars" >
<ig:XamBusyIndicator.Animation>
<ig:SpinnerBarsBusyAnimation AnimationFill="#FF3C7B82" />
</ig:XamBusyIndicator.Animation>
</ig:XamBusyIndicator>SingleBrushBusyAnimation と AnimationFill のプロパティを使用して、デフォルトの SpinnerBarsWave アニメーション ブラシを変更します。
注:
ランタイムにアニメーション ブラシを変更する場合は、ランタイムでのアニメーション ブラシの変更のセクションを参照してください。
以下のスクリーンショットは、以下の設定の結果、 xamBusyIndicator の SpinnerBarsWave アニメーションの外観がどのようになるかを示しています。
以下のコードはこの例を実装します。
XAML の場合:
<ig:XamBusyIndicator IsBusy="True" Name="SpinnerBarsWave" >
<ig:XamBusyIndicator.Animation>
<ig:SpinnerBarsWaveBusyAnimation AnimationFill="#FF3C7B82" />
</ig:XamBusyIndicator.Animation>
</ig:XamBusyIndicator>SingleBrushBusyAnimation と AnimationFill のプロパティを使用して、デフォルトの SpinnerSegmented アニメーション ブラシを変更します
注:
ランタイムにアニメーション ブラシを変更する場合は、ランタイムでのアニメーション ブラシの変更のセクションを参照してください。
以下のスクリーンショットは、以下の設定の結果、 xamBusyIndicator の SpinnerSegmented アニメーションの外観がどのようになるかを示しています。
以下のコードはこの例を実装します。
XAML の場合:
<ig:XamBusyIndicator IsBusy="True" Name="SpinnerSegmented" >
<ig:XamBusyIndicator.Animation>
<ig:SpinnerSegmentedBusyAnimation AnimationFill="#FF43A898" />
</ig:XamBusyIndicator.Animation>
</ig:XamBusyIndicator>以下の例は、ランタイムに xamColorPicker コントロールを使用して、 xamBusyIndicator Gears アニメーション ブラシをバインドし、変更する方法を示します。
アニメーションのカラーを動的に変更するために、 GearsBusyAnimationPresenter BigGearFill および SmallGearFill プロパティを使用して、 xamColorPicker の SelectedColorPreview プロパティにバインドします。
初期化のみに使用されバインドできない GearsBusyAnimation、 BigGearFill および SmallGearFill プロパティとは異なり、 GearsBusyAnimationPresenter、 BigGearFill および SmallGearFill プロパティはバインディング依存プロパティです。
以下のスクリーンショットは最終結果のプレビューです。
この手順を実行するには、以下が必要です。
以下の NuGet パッケージ参照をプロジェクトに追加します。
Infragistics.WPF.ColorPicker
Infragistics.WPF
NuGet フィードのセットアップと NuGet パッケージの追加の詳細については、NuGet フィード ドキュメントを参照してください。
以下のステップは、Gears アニメーション ブラシをランタイムで変更する方法を示します。
xamBusyIndicator コントロールのページへの追加
XAML の場合:
<ig:XamBusyIndicator Name="Gears" IsBusy="True" Animation="Gears" Width="200" />xamColorPicker コントロールをページに追加し、その SelectedColorPreview プロパティを xamBusyIndicator アニメーション ブラシにバインドします。
XAML の場合:
<ig:XamColorPicker SelectedColor="#FF324047" Width="100" SelectedColorPreview="{Binding ElementName=Gears, Path=AnimationPresenter.BigGearFill, Mode=TwoWay, Converter={StaticResource ColorToSolidColorBrushValueConverter}}" />以下は、この手順の完全なコードです。
XAML の場合:
<Grid>
<Grid.Resources>
<local:ColorToSolidColorBrushValueConverter x:Key="ColorToSolidColorBrushValueConverter" />
</Grid.Resources>
<StackPanel>
<ig:XamBusyIndicator Name="Gears" IsBusy="True" Animation="Gears" Width="200" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="BigGearFill" Width="100" />
<ig:XamColorPicker SelectedColor="#FF324047" Width="100"
SelectedColorPreview="{Binding ElementName=Gears, Path=AnimationPresenter.BigGearFill, Mode=TwoWay, Converter={StaticResource ColorToSolidColorBrushValueConverter}}" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="SmallGearFill" Width="100"/>
<ig:XamColorPicker SelectedColor="#FF43A898" Width="100"
SelectedColorPreview="{Binding ElementName=Gears, Path=AnimationPresenter.SmallGearFill, Mode=TwoWay, Converter={StaticResource ColorToSolidColorBrushValueConverter}}" />
</StackPanel>
</StackPanel>
</Grid>C# の場合:
public class ColorToSolidColorBrushValueConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var result = new Color();
if (value is SolidColorBrush)
result = ((SolidColorBrush)value).Color;
return result;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
SolidColorBrush result = null;
if (value is Color)
result = new SolidColorBrush((Color)value);
return result;
}
}Visual Basic の場合:
Public Class ColorToSolidColorBrushValueConverter
Implements IValueConverter
Public Function Convert(value As Object, targetType As Type, parameter As Object, culture As CultureInfo) As Object
Dim result = New Color()
If TypeOf value Is SolidColorBrush Then
result = DirectCast(value, SolidColorBrush).Color
End If
Return result
End Function
Public Function ConvertBack(value As Object, targetType As Type, parameter As Object, culture As CultureInfo) As Object
Dim result As SolidColorBrush = Nothing
If TypeOf value Is Color Then
result = New SolidColorBrush(DirectCast(value, Color))
End If
Return result
End Function
End Classこのトピックの追加情報については、以下のトピックも合わせてご参照ください。