WPFエキスパンダーを使用して、多数のアナログプロセス変数を表示しています。
これらの変数の1つが「警告」または「アラーム」状態になったときに、エキスパンダーの境界線を「グロー」(またはフラッシュ)にしたい。
これを実現するために、ビューモデルのいくつかのブールプロパティ(「AnalogWarningActive」および「AnalogAlarmActive」)にバインドされたいくつかのデータトリガーを使用しています。データトリガーは、エキスパンダーの境界線の不透明度をアニメーション化するストーリーボードを開始します。
データトリガーは期待どおりに機能します。適切な境界線の色が表示され、不透明度のアニメーションが開始されます。ただし、2つの問題があります。
境界線の不透明度だけでなく、エキスパンダー全体(および含まれているすべてのコントロール)の不透明度が変化しています。
'AnalogWarningActive'および'AnalogAlarmActive'タグがFalseに戻ると、境界線は消えますが、不透明なアニメーションは無期限に続行されます(つまり、エキスパンダー全体がフェードインおよびフェードアウトし続けます)。
これが私が使用しているxamlです:
<SolidColorBrush x:Key="AnalogAlarmBrush" Color="#FFFF8080" />
<SolidColorBrush x:Key="AnalogWarningBrush" Color="#FFFFFF80" />
<Storyboard x:Key="AlarmBorderFlasher" AutoReverse="True" RepeatBehavior="Forever">
<DoubleAnimation
Storyboard.TargetProperty="(Border.Opacity)"
From="1.0" To="0.4"
Duration="0:0:0.8" />
</Storyboard>
<Expander Header="Test Data" IsExpanded="True">
<Expander.Style>
<Style TargetType="{x:Type Expander}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=AnalogWarningActive}" Value="True" >
<DataTrigger.EnterActions>
<BeginStoryboard Name="WarningBorderStoryboard" Storyboard="{StaticResource AlarmBorderFlasher}" />
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="WarningBorderStoryboard" />
</DataTrigger.ExitActions>
<DataTrigger.Setters>
<Setter Property="BorderBrush" Value="{StaticResource AnalogWarningBrush}" />
<Setter Property="BorderThickness" Value="4" />
</DataTrigger.Setters>
</DataTrigger>
<DataTrigger Binding="{Binding Path=AnalogAlarmActive}" Value="True" >
<DataTrigger.EnterActions>
<BeginStoryboard Name="AlarmBorderStoryboard" Storyboard="{StaticResource AlarmBorderFlasher}" />
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="AlarmBorderStoryboard" />
</DataTrigger.ExitActions>
<DataTrigger.Setters>
<Setter Property="BorderBrush" Value="{StaticResource AnalogAlarmBrush}" />
<Setter Property="BorderThickness" Value="4" />
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
</Style>
</Expander.Style>
<!-- snipped the contents of the expander (a tabcontrol and a few text boxes, labels, etc)-->
</Expander>