このトピックでは、 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 プロパティはバインディング依存プロパティです。
以下のスクリーンショットは最終結果のプレビューです。
この手順を実行するには、以下が必要です。
以下の参照をプロジェクトに追加します。
InfragisticsWPF4.Controls.Editors.XamColorPicker.v20.1
InfragisticsWPF4.Controls.Editors.XamSlider.v20.1
InfragisticsWPF4.v20.1
以下のステップは、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このトピックの追加情報については、以下のトピックも合わせてご参照ください。