WPF - Apply multiple styles on different elements at same time

[KushMishra]

Hi All,

Could anyone please suggest on how to apply multiple styles to multiple elements at runtime and that too the styles should be applied at the same time on all elements.
For instance, I want to animate two buttons but their styles are different. Now if I apply the style to both, the style which is applied first at runtime by the compiler would be invoked and so, I will not have the blinking effect at the same time for these 2 buttons.

Any suggestions please?
Thanks.

[ddanbe]

Perhaps this can help.

[KushMishra]

Hi,

rproffitt, Surely I will (If you have anything, you could share) :)

ddanbe, Actually I am using MVVM and also, I want to apply blinking animation (like trigger) at the same time to multiple conditions. Here's the present scenario I have:

I have 2 properties bound to 2 separate controls, say 2 checkboxes. Now, if one of the checkbox is checked then, it would check if my button's content value is greater than 0 and if yes, then the buttoon should start blinking. Now, the problem is suppose one of the button is already blinking, then upon checking the other checkbox, if the second button has also got some value greater than 0, then the second button should also start blinking but in sync with the first button.

Perhaps, the start storyboard or pause storyboard could help or if possible, could we use some triggers and control the animation effect?

Thanks very much indeed.

[KushMishra]

Here's my code that did not work out for me (the buttons are getting animated but not together).

<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Button x:Name="btnFirst" Content="First Button">
            <Button.Style>
                <Style>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsFirstChecked, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Value="True">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard FillBehavior="Stop">
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>            
        </Button>
        <CheckBox x:Name="chkFirst" Content="Check First" IsChecked="{Binding IsFirstChecked, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

        <Button x:Name="btnSecond" Content="Second Button">
            <Button.Style>
                <Style>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsSecondChecked, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Value="True">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard FillBehavior="Stop">
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>
        <CheckBox x:Name="chkSecond" Content="Check Second" IsChecked="{Binding IsSecondChecked, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
    </StackPanel>

[KushMishra]

Anyone please ?

[rproffitt]

I don't want to upset you again but my fix would be to use a timer then in the timer apply the effect you want on the controls.