Показывать зеленый цвет при заполнении пути в течение 5 секунд

Question

У меня есть пользовательский элемент управления с группой кнопок, и стиль кнопок переопределяется с помощью класса Path.Теперь каждая кнопка имеет различный дизайн.

Запрос: 1. нажатие на одну кнопку изменит цвет заливки пути на 5 секунд, а затем вернется в предыдущее состояние.2. За пределами этой группы кнопок у меня есть общая кнопка, которая меняет цвет всех кнопок на 5 секунд и возвращает их в нормальное состояние.3. У меня есть еще одна общая кнопка для отмены времени смены цвета.То есть, как только я нажму кнопку отмены, таймер будет отменен.

<Style x:Key="ConfigureInstButton" TargetType="Button">
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Canvas x:Name="cnv" Width="{TemplateBinding ActualWidth}" Height="{TemplateBinding Height}">
                        <Grid Width="{Binding ActualWidth, ElementName=cnv}" Height="{Binding ActualHeight, ElementName=cnv}">
                            <Border x:Name="borderRect" Background="{TemplateBinding Background}" BorderThickness="0" BorderBrush="{StaticResource solidBrush_LightGray_0.75_darker}"
                                    CornerRadius="2">
                                <Path x:Name="pathInstrumentType" Tag="{TemplateBinding Tag}" Margin="5">
                                    <Path.Style>
                                        <Style TargetType="Path">
                                            <Setter Property="Stretch" Value="Uniform" />
                                            <Setter Property="Fill" Value="{StaticResource solidBrush_LightGray_0.75_darker}" />
                                        </Style>
                                    </Path.Style>
                                </Path>
                            </Border>
                            <Button x:Name="LoadingImage" Tag="{TemplateBinding Tag}" Style="{DynamicResource Loading}" Visibility="Collapsed" Margin="0,2,0,0" />

                            <Border  x:Name="borderConfigure" BorderThickness="1" BorderBrush="{StaticResource solidBrush_LightGray_0.75_darker}" Visibility="Collapsed" Tag="{TemplateBinding Content}"
                                    Background="{StaticResource solidBrush_Highlight}" Opacity="0.6" Panel.ZIndex="2" CornerRadius="2">
                                <Path x:Name="pathConfigure" Margin="5" Height="18">
                                    <Path.Style>
                                        <Style TargetType="Path">
                                            <Setter Property="Data" Value="{StaticResource geoData_ConfigureInstrument}" />
                                            <Setter Property="Stretch" Value="Uniform" />
                                            <Setter Property="Fill" Value="{StaticResource solidBrush_White_0.05_darker}" />
                                        </Style>
                                    </Path.Style>
                                </Path>
                            </Border>
                        </Grid>
                    </Canvas>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="borderConfigure" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="borderRect" Property="Opacity" Value="0.2" />
                            <Setter Property="Cursor" Value="Hand" />
                        </Trigger>

                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 1

Я нашел решение с этим.

<Style x:Key="ConfigureInstButton" TargetType="Button">
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Canvas x:Name="cnv" Width="{TemplateBinding ActualWidth}" Height="{TemplateBinding Height}">
                        <Grid Width="{Binding ActualWidth, ElementName=cnv}" Height="{Binding ActualHeight, ElementName=cnv}">
                            <Border x:Name="borderRect" Background="{TemplateBinding Background}" BorderThickness="0" BorderBrush="{StaticResource solidBrush_LightGray_0.75_darker}"
                                    CornerRadius="2">
                                <StackPanel Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center">
                                    <Path x:Name="pathInstrumentType" Stretch="Uniform" Tag="{TemplateBinding Tag}" Visibility="Visible" Fill="{StaticResource solidBrush_LightGray_0.75_darker}">
                                    <Path.LayoutTransform>
                                        <RotateTransform Angle="0"></RotateTransform>
                                    </Path.LayoutTransform>
                                </Path>
                                    <Path x:Name="pathInstrumentStatus" Tag="{TemplateBinding Tag}" Stretch="Uniform" Height="18" Width="22" 
                                          Visibility="Collapsed" Fill="{StaticResource solidBrush_LightGray_0.75_darker}">
                                        <Path.LayoutTransform>
                                            <RotateTransform Angle="0"></RotateTransform>
                                        </Path.LayoutTransform>
                                    </Path>
                                </StackPanel>
                            </Border>
                            <Button x:Name="LoadingImage" Tag="{TemplateBinding Tag}" Style="{DynamicResource Loading}" Visibility="Collapsed" Margin="0,2,0,0" />
                            <Border  x:Name="borderConfigure" BorderThickness="1" BorderBrush="{StaticResource solidBrush_LightGray_0.75_darker}" Visibility="Collapsed" Tag="{TemplateBinding Content}"
                                    Background="{StaticResource solidBrush_Highlight}" Opacity="0.6" Panel.ZIndex="2" CornerRadius="2">
                                <Path x:Name="pathConfigure" Margin="5" Height="18">
                                    <Path.Style>
                                        <Style TargetType="Path">
                                            <Setter Property="Data" Value="{StaticResource geoData_ConfigureInstrument}" />
                                            <Setter Property="Stretch" Value="Uniform" />
                                            <Setter Property="Fill" Value="{StaticResource solidBrush_White_0.05_darker}" />
                                        </Style>
                                    </Path.Style>
                                </Path>
                            </Border>
                        </Grid>
                    </Canvas>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="borderConfigure" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="borderRect" Property="Opacity" Value="0.2" />
                            <Setter Property="Cursor" Value="Hand" />
                        </Trigger>
                        <DataTrigger Binding="{Binding Processing}" Value="false">
                            <Setter Property="Visibility" TargetName="pathInstrumentType" Value="Visible" />
                            <Setter Property="Visibility" TargetName="LoadingImage" Value="Collapsed" />
                        </DataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsNonEditable}" Value="True" />
                                <Condition Binding="{Binding Processing}" Value="True" />
                            </MultiDataTrigger.Conditions>
                            <MultiDataTrigger.Setters>
                                <Setter TargetName="pathInstrumentType" Property="Visibility" Value="Collapsed" />
                                <Setter TargetName="LoadingImage" Property="Visibility" Value="Visible" />
                            </MultiDataTrigger.Setters>
                        </MultiDataTrigger>
                        <DataTrigger Binding="{Binding SendFileStatus}" Value="{x:Static labMgr:InstrumentProcessState.Success}">
                            <Setter Property="Margin" TargetName="pathInstrumentStatus" Value="8" />
                            <DataTrigger.EnterActions>
                                <BeginStoryboard Name="ColorStoryboard">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="pathInstrumentStatus" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                                            <LinearColorKeyFrame KeyTime="0:0:0" Value="#8092D050"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pathInstrumentStatus" Storyboard.TargetProperty="Data">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource geoData_SendStateFileSucces}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pathInstrumentType" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Collapsed}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoadingImage" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Collapsed}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pathInstrumentStatus" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ParallelTimeline BeginTime="0:0:5">
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="pathInstrumentType" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                                                <LinearColorKeyFrame KeyTime="0:0:0" Value="#FFA6A6A6"/>
                                            </ColorAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pathInstrumentType" Storyboard.TargetProperty="Tag">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="True"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pathInstrumentStatus" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Collapsed}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pathInstrumentType" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </ParallelTimeline>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <StopStoryboard BeginStoryboardName="ColorStoryboard"/>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding SendFileStatus}" Value="{x:Static labMgr:InstrumentProcessState.Failed}">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard Name="FColorStoryboard">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="pathInstrumentStatus" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                                            <LinearColorKeyFrame KeyTime="0:0:0" Value="#FFFF5050"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pathInstrumentStatus" Storyboard.TargetProperty="Data">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource geoData_SendStateFileFailed}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pathInstrumentType" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Collapsed}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoadingImage" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Collapsed}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pathInstrumentStatus" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ParallelTimeline BeginTime="0:0:5">
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="pathInstrumentType" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                                                <LinearColorKeyFrame KeyTime="0:0:0" Value="#FFA6A6A6"/>
                                            </ColorAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pathInstrumentType" Storyboard.TargetProperty="Tag">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="True"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pathInstrumentStatus" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Collapsed}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pathInstrumentType" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </ParallelTimeline>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <StopStoryboard BeginStoryboardName="FColorStoryboard"/>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding SendFileStatus}" Value="{x:Static labMgr:InstrumentProcessState.Cancelled}">
                            <DataTrigger.EnterActions>
                                <StopStoryboard BeginStoryboardName="ColorStoryboard"/>
                                <StopStoryboard BeginStoryboardName="FColorStoryboard"/>
                            </DataTrigger.EnterActions>
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>