激活情节提要 WP8答案

【问题标题】：Activating Storyboard WP8激活情节提要 WP8
【发布时间】：2014-02-28 10:49:26
【问题描述】：

我想使用情节提要来更改我正在使用的按钮的边界颜色。问题是我不知道如何开始我的故事板。当我点击元素时，我希望它改变颜色。到目前为止我得到的代码是：

<Button BorderBrush="Transparent" BorderThickness="0">
        <Button.Template>
            <ControlTemplate>
                <Path x:Name="CountryUser" Stretch="Fill" StrokeThickness="{StaticResource StrokeUserControl}"  StrokeLineJoin="Round" Stroke="Black" Data="{Binding CountryView.MapData}" Fill="{StaticResource CountryBackground}"/>
            </ControlTemplate> 
        </Button.Template>

        <Button.Triggers>
            <EventTrigger RoutedEvent="Click">
                <BeginStoryboard>
                    <Storyboard x:Name="StoryBoard1">
                        <ColorAnimation  Storyboard.TargetName="CountryUser" Storyboard.TargetProperty="Stroke" From="Black" To="Blue"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>

    </Button>

我使用eas event.trigger的点击不起作用。

【问题讨论】：

如果你想使用你当前的实现，请查看我更新的答案。谢谢。

标签： visual-studio xaml windows-phone-8 storyboard eventtrigger

【解决方案1】：

如果您希望故事板更改您塑造按钮的路径的颜色，因为您必须将故事板移动到路径资源中：

<Button x:Name="Button1" BorderThickness="0" BorderBrush="Transparent">
        <Button.Template>
            <ControlTemplate x:Name="Control">
                <Path x:Name="CountryUser" Style="{StaticResource style_ColorButton}" Data="{Binding CountryView.MapData}" Fill="{StaticResource CountryBackground}">
                    <Path.Resources>
                        <Storyboard x:Name="StoryBoard1">
                            <ColorAnimation Storyboard.TargetName="CountryUser" Storyboard.TargetProperty="(Stroke).(SolidColorBrush.Color)" To="Blue" Duration="0"/>
                        </Storyboard>
                    </Path.Resources>
                </Path>
            </ControlTemplate> 
        </Button.Template>

您应该从后面的代码中找到按钮，找到按钮后，使用 VisualTreeHelper 查找按钮中的路径，然后从后面的代码开始情节提要。由于 Storyboard 已设置为资源，一旦找到路径，您应该执行以下操作：

Storyboard sb = h.Resources["StoryBoard1"] as Storyboard;

其中 h 是路径

【讨论】：

【解决方案2】：

Silverlight 仅支持将 Loaded 作为 RoutedEvent 的值。您的选择是：

将情节提要定义为资源，在 Button.Click 中添加处理程序并在后面的代码中启动动画
将VisualStateManager 用于Pressed 的Button 状态（在Template 内部）

Source (see Remarks section)

【讨论】：

我建议更改视觉状态而不是添加故事板。
@lisp 我按照你最后添加的源代码，这里说我应该从资源字典中检索我的故事板，我不知道该怎么做，有什么帮助吗？
@JonasN89 用于在Page 中定义的Storyboard ResourceDictionary 和x:Name="ButtonTapStoryboard"：var storyboard = (Storyboard)this.Resources["ButtonTapStoryboard"]; storyboard.Begin();
@lisp 我已经以 MVVM 样式构建了我的代码，所以我没有在 xaml 文件的代码隐藏中进行编码。所以我找不到名字，同样的方式？
@JonasN89 MVVM 绝对允许在仅与 UI 相关的操作中使用 code behind（此代码与 ViewModel 无关）（并且在 msdn 上建议了 code behind 选项！）。如果您是一个纯粹主义者并且喜欢在 .xaml 中定义尽可能多的内容，请使用 VisualStateManager。

【解决方案3】：

不需要故事板

你需要玩弄按钮的视觉状态，你可以借助样式来做到这一点

看看下面的样式

<Style x:Key="style_ColorButton" TargetType="Button">
        <Setter Property="Background" Value="Black"/>
        <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
        <Setter Property="Padding" Value="10,3,10,5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Green"/>                              
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0">
                            <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

在上面的样式中，VisualState "Pressed" 处理你的要求，我已经在那里给出了一个图像源。

将此样式与按钮一起使用。

<Button Height="40" Width="40" BorderThickness="0" Name="btnAcceptCrop" Click="btnAcceptCrop_Click" Style="{StaticResource style_ColorButton}" Background="Black" ForeGround="White"/>

在代码中设置样式

btnAcceptCrop.Style = (Style)App.Current.Resources["style_ColorButton"];

在页面中声明样式

在页面中的所有命名空间声明下方

只做一个标签

<phone:PhoneApplicationPage.Resources>
</phone:PhoneApplicationPage.Resources>

并在其中声明你的风格。

希望这会有所帮助。

【讨论】：

【解决方案4】：

试试这个代码。

添加这些命名空间

xmlns:Interactivity="使用:Microsoft.Xaml.Interactivity" xmlns:Core="使用：Microsoft.Xaml.Interactions.Core" xmlns:Media="使用:Microsoft.Xaml.Interactions.Media"

编辑

使用TemplateBinding 更改点击时的路径颜色。

 <Page.Resources>
    <Storyboard x:Name="ButtonStoryboard">
        <ColorAnimation Duration="0" To="Red" Storyboard.TargetProperty="(Control.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="button" d:IsOptimized="True"/>
    </Storyboard>
 </Page.Resources>

   <Button x:Name="button" Background="Blue" BorderBrush="Black" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="864,248,0,0" Height="90" Width="214">
        <Button.Template>
            <ControlTemplate>
                <Grid Background="White">
                    <Path x:Name="CountryUser" Stretch="Fill" Height="50" Width="50" StrokeThickness="15"  StrokeLineJoin="Round" Stroke="{TemplateBinding BorderBrush}" Data="M13.5,14.25v-5h13v5h-2v-3h-9v3H13.5z M9,14.75h22v11.5h-4.5v4.5h-13v-4.5H9V14.75z M28.5,23.75v-6.5h-17
    v6.5H28.5z M13.5,22.75v-2.5h13v2.5H13.5z" Fill="{TemplateBinding BorderBrush}"/>
                </Grid>
            </ControlTemplate>
        </Button.Template>
        <Interactivity:Interaction.Behaviors>
            <Core:EventTriggerBehavior EventName="Tapped">
                <Media:ControlStoryboardAction Storyboard="{StaticResource ButtonStoryboard}"/>
            </Core:EventTriggerBehavior>
        </Interactivity:Interaction.Behaviors>
    </Button>

【讨论】：

我尝试添加命名空间，但是当我添加代码时它找不到可附加的属性，知道为什么吗？
你添加了 2 个 dll Microsoft.xaml.Interations & . Microsoft.xaml.Interactivity ?
@JonasN89 您应该右键单击项目中包含视图和视图模型的引用。按添加参考。在新窗口中按下框架，选择扩展。在那里你会找到 System.Windows.Interactivity 和 System.Windows.Interactions。添加这些后，您应该能够遵循 asitis 示例