ToggleButton IsChecked Trigger with Storyboard Targetname Issue

2
votes

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>
2
wpfxamlstoryboardtogglebutton

2 Answers

1
votes

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.

0
votes

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>