带有 Storyboard Targetname 问题的 ToggleButton IsChecked 触发器

Question

我尝试使用 ToggleButton IsChecked 属性触发 Storyboard，其 TargetName 设置为 ScrollViewer，但它说在 ControlTemplate 的命名空间中找不到 TargetName.. 有什么意义，但我没有知道如何正确引用它。

所以我想获得以下信息：

• ToggButton Click (IsChecked = true) --> ScrollViewer 通过 Storyboard (StoryBoard1) 设置动画/更改
• ToggButton Click Again (IsChecked = false) --> ScrollViewer 通过 Storyboard (StoryBoard2) 设置动画/更改回原点

这是我的 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

这是Controltemplate & XAML 结构的常见问题。试试下面的代码：

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

我已将ScrollViewer 定义为资源，然后使用 StoryBoard.target 属性进行动画处理。而且效果很好。

Answer 2

您可以直接为切换按钮命名并在情节提要中使用它。

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