WPF Expander Border Animation은 포함 된 모든 컨트롤에 영향을 미칩니 까?
-
19-09-2019 - |
문제
WPF Expander를 사용하여 여러 아날로그 프로세스 변수를 표시합니다.
이 변수 중 하나가 '경고'또는 '알람'상태에 들어가면 Expander의 경계를 '빛나는'(또는 플래시)로 만들고 싶습니다.
이를 달성하기 위해 내보기 모델 ( 'ancalogwarningActive'및 'analogalarmactive')에서 몇 가지 부울 속성에 바인딩 된 일부 데이터 트리거를 사용하고 있습니다. 데이터 트리거는 Expander Border 불투명도를 애니메이션하는 스토리 보드를 시작합니다.
데이터 트리거는 내가 기대하는대로 작동합니다. 적절한 테두리 색상이 나타나고 불투명도 애니메이션이 시작됩니다. 그러나 두 가지 문제가 있습니다.
전체 확장기 (및 모든 포함 된 제어)의 불투명도는 국경의 불투명도만이 아니라 변화하고 있습니다.
'아날로그 워닝 활성'및 '아날로그 언어'태그가 거짓으로 돌아 오면 테두리가 사라지지만 opactiy 애니메이션은 무기한으로 계속됩니다 (즉, 전체 확장기가 계속해서 사라지고 있습니다).
다음은 내가 사용하는 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>
해결책
질문 1
국경과 같은 시각의 불투명도 설정은 시각적 및 모든 후손에 영향을 미칩니다. 그렇기 때문에 국경을 설정하는 이유는 모든 것이 사라집니다.
두 가지 선택이 있습니다. 1. 국경 뇌졸중 속성에 애니메이션 또는 2. 국경의 후손이 아닌 내용을 변경하십시오.
스트로크 속성을 애니메이션하는 것은 코드에 대한 사소한 일이지만 모든 브러시가 투명하고 뒤로 쉽게 애니메이션 할 수있는 것은 아니라는 단점이 있습니다. 예를 들어, 그라디언트 브러시는 어렵습니다. 또한 국경이 다양한 색상이었고 100% 투명으로 가고 싶지 않다면 색상을 바꾸지 않고 스트로크를 애니메이션 할 수있는 좋은 방법이 없습니다.
국경의 후손이 아닌 내용을 변경하는 것은 매우 간단하며 대부분의 경우 내가하는 경향이 있습니다. 간단히 교체 :
<Border x:Name="MyBorder" Stroke="Red" StrokeThickness="3" CornerRadius="6">
<my:ContentHere />
</Border>
이것으로 :
<Grid>
<Border x:Name="MyBorder" Stroke="Red" StrokeThickness="3" Stroke="Red" CornerRadius="6">
<Border Stroke="Transparent" StrokeThickness="3" CornerRadius="Red">
<my:ContentHere />
</Border>
</Grid>
이제 눈에 보이는 국경의 불투명도는 애니메이션 할 수 있으며 투명한 사람은 어린이의 레이아웃과 클리핑을 제어합니다.
Cornerradius 또는 기타 재미있는 사업이 없다면 콘텐츠에 마진을 설정하고 투명한 테두리를 포기할 수 있습니다.
<Grid>
<Border x:Name="MyBorder" Stroke="Red" StrokeThickness="3" />
<my:ContentHere Margin="3" />
</Grid>
질문 #2
언뜻보기에는 트리거 값이 거짓으로 돌아간 후 애니메이션이 계속 실행되는 XAML에 문제가 없지만 매우 면밀히 보지 않았습니다. 내가 알아 차린 바에 따르면 나는 그것이 현재 가치에서 애니메이션을 멈출 것이라고 생각할 것이라고 생각합니다.
StopStoryboard를 Removestoryboard로 교체 해 보겠습니다. Removestoryboard는 애니메이션 속성을 원래 값으로 다시 재설정해야합니다.