Question

我尝试使用ToggleButton IsChecked属性触发一个Storyboard，其中TargetName设置为ScrollViewer，但是它表示在ControlTemplate的命名空间中找不到TargetName ..是什么让我感觉到，但我没有＆＃39 ;我知道如何正确引用它。

所以我想跟着得到：

ToggButton Click（IsChecked = true） - ＆gt; ScrollViewer通过Storyboard（StoryBoard1）动画/更改
ToggButton再次点击（IsChecked = false） - ＆gt; 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＆amp;的常见问题。 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命名，并在故事板中使用它。

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

带有故事板目标名称问题的ToggleButton IsChecked触发器

2 个答案: