ToggleButton IsChecked Trigger with Storyboard Targetname Issue - wpf

Question

I tried to trigger a Storyboard, whichs TargetName is set to a ScrollViewer, with the ToggleButton IsChecked Property, but it says that the TargetName could not be found in the namespace of ControlTemplate.. what makes sence, but I don't know how to refer it correctly.
So I wanted following to get:
ToggButton Click (IsChecked = true) --> ScrollViewer animates/changes trough Storyboard (StoryBoard1)
ToggButton Click Again (IsChecked = false) --> ScrollViewer animates/changes back trough Storyboard (StoryBoard2)
Here's my XAML:
<Window x:Class="myProject.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ignore="http://www.galasoft.ch/ignore"
xmlns:view="clr-namespace:Messenger4u.View"
mc:Ignorable="d ignore">
<Window.Resources>
<ResourceDictionary>
<Storyboard x:Key="Storyboard1" SpeedRatio="3">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
Storyboard.TargetName="ScrollViewer">
<EasingThicknessKeyFrame KeyTime="0" Value="0,2,0,0"/>
<EasingThicknessKeyFrame KeyTime="0:0:1" Value="200,2,0,0"/>
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Storyboard2" SpeedRatio="3">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
Storyboard.TargetName="ScrollViewer">
<EasingThicknessKeyFrame KeyTime="0" Value="200,2,0,0"/>
<EasingThicknessKeyFrame KeyTime="0:0:1" Value="0,2,0,0"/>
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</ResourceDictionary>
</Window.Resources>
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefiniton/>
<RowDefiniton/>
</Grid.RowDefinitions>
<ToggleButton Width="44" Height="34"
Margin="8, 0, 0, 0"
HorizontalAlignment="Left"
IsChecked="{Binding IsMenuOpen}"
IsEnabled="{Binding IsLoggedIn}">
<ToggleButton.Style>
<Style>
<Setter Property="ToggleButton.Background">
<Setter.Value>
<ImageBrush ImageSource="Skins/Images/btn-top-menu.png"/>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
<ToggleButton.Template>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border CornerRadius="3" Background="{TemplateBinding Background}">
<ContentPresenter Margin="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="Skins/Images/btn-top-menu-hover.png"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource Storyboard2}"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<ScrollViewer x:Name="ScrollViewer" Grid.Row="1"
Margin="0, 2, 0, 0"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<Grid>
<ContentControl Content="{Binding CurrentPageViewModel}"/>
</Grid>
</ScrollViewer>
</Grid>
</Window>

Answer 1

It's the usual problem with Controltemplate & XAML structure. try below code.:
<Window.Resources>
<ResourceDictionary>
<ScrollViewer x:Key="ScrollViewer"
Margin="0, 2, 0, 0"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<ContentControl Content="{Binding CurrentPageViewModel}"/>
</ScrollViewer>
<Storyboard x:Key="Storyboard1" SpeedRatio="3" >
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
Storyboard.Target="{StaticResource ScrollViewer}">
<EasingThicknessKeyFrame KeyTime="0" Value="0,2,0,0"/>
<EasingThicknessKeyFrame KeyTime="0:0:1" Value="200,2,0,0"/>
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Storyboard2" SpeedRatio="3">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
Storyboard.Target="{StaticResource ScrollViewer}">
<EasingThicknessKeyFrame KeyTime="0" Value="200,2,0,0"/>
<EasingThicknessKeyFrame KeyTime="0:0:1" Value="0,2,0,0"/>
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</ResourceDictionary>
</Window.Resources>
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition/>
</Grid.RowDefinitions>
<ToggleButton Width="44" Height="34"
Margin="8, 0, 0, 0"
HorizontalAlignment="Left"
IsChecked="{Binding IsMenuOpen}"
IsEnabled="{Binding IsLoggedIn}">
<ToggleButton.Style>
<Style>
<Setter Property="ToggleButton.Background">
<Setter.Value>
<ImageBrush ImageSource="Resources/SOF.gif"/>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
<ToggleButton.Template>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border CornerRadius="3" Background="{TemplateBinding Background}">
<ContentPresenter Margin="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="Resources/SOF.gif"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource Storyboard2}"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<ContentControl Content="{StaticResource ScrollViewer}" Grid.Row="1"/>
</Grid>
I've defined the ScrollViewer as a Resource and then use
StoryBoard.target property to animate. and it works fine.

Answer 2

You can directly give a name for the togglebutton and use it in the Storyboard.
<ToggleButton x:Name="myToggle"
Width="44" Height="34"
Margin="8, 0, 0, 0"
HorizontalAlignment="Left"
IsChecked="{Binding IsMenuOpen}"
IsEnabled="{Binding IsLoggedIn}">
<Storyboard x:Key="Storyboard1" SpeedRatio="3">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="myToggle"
Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ScrollViewer">
<EasingThicknessKeyFrame KeyTime="0" Value="0,2,0,0"/>
<EasingThicknessKeyFrame KeyTime="0:0:1" Value="200,2,0,0"/>
</ThicknessAnimationUsingKeyFrames>
</Storyboard>