WPF: Stop Animation For Hidden Controls on Windows Load - wpf

Question

I have a very simple fade in/out animation which works fine using data triggers. I have bind the data trigger to a bool property and inside trigger it set the opacity to 0 on false and vice versa.
Now the problem is the objects whose bool value is false upon loading, I don't expect them to show on load and then animate themselves to hide.
I have tried to set the opacity to 0 on style setter but no use
Here is the button style
<Style x:Key="LocationPickerButtonStyle" TargetType="{x:Type Button}">
<Style.Setters>
<Setter Property="Height" Value="93"/>
<Setter Property="Width" Value="93"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid >
<Image x:Name="DefaultImage" Source="something.png"/>
<Ellipse x:Name="HitTest" Fill="Transparent" Height="93" Width="93" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsLocationVisible}" Value="true">
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="showSelectedLocation">
<Storyboard Storyboard.TargetProperty="Opacity">
<DoubleAnimation Duration="0:0:1" From="0" To="1"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="showSelectedLocation"></StopStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
<DataTrigger Binding="{Binding IsLocationVisible}" Value="false">
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="hideSelectedLocation">
<Storyboard Storyboard.TargetProperty="Opacity" >
<DoubleAnimation Duration="0:0:1" From="1" To="0" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="hideSelectedLocation"></StopStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
<Trigger Property="Opacity" Value="0">
<Setter Property="Visibility" Value="Collapsed"></Setter>
</Trigger>
<Trigger Property="Opacity" Value="1">
<Setter Property="Visibility" Value="Visible"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>

Answer 1

Do these changes in your XAML :
Shift your DataTriggers from <ControlTemplate.Triggers> to Style.Triggers.
Set Opacity = 0 in Style Setter as starting Opacity for every Button.
Remove From = 1 in false DataTrigger.
With all the changes, your Style would look like this :
<Style x:Key="LocationPickerButtonStyle" TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsLocationVisible}" Value="true">
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="showSelectedLocation">
<Storyboard Storyboard.TargetProperty="Opacity">
<DoubleAnimation Duration="0:0:1" From="0" To="1"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="showSelectedLocation"></StopStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
<DataTrigger Binding="{Binding IsLocationVisible}" Value="false">
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="hideSelectedLocation">
<Storyboard Storyboard.TargetProperty="Opacity" >
<DoubleAnimation Duration="0:0:1" To="0" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="hideSelectedLocation"></StopStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
<Style.Setters>
<Setter Property="Height" Value="93"/>
<Setter Property="Width" Value="93"/>
<Setter Property="Opacity" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid >
<Image x:Name="DefaultImage" Source="something.png"/>
<Ellipse x:Name="HitTest" Fill="Transparent" Height="93" Width="93" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Opacity" Value="0">
<Setter Property="Visibility" Value="Collapsed"></Setter>
</Trigger>
<Trigger Property="Opacity" Value="1">
<Setter Property="Visibility" Value="Visible"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>