激活Storyboard WP8

时间:2014-02-28 10:49:26

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

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

<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不起作用。

4 个答案:

答案 0 :(得分:2)

如果您希望故事板改变您塑造按钮的路径的颜色,则必须将故事板移动到路径资源中:

<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 sb = h.Resources["StoryBoard1"] as Storyboard;

其中h是路径

答案 1 :(得分:1)

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

  • 将您的故事板定义为资源,在Button.Click中添加处理程序并在代码后面启动动画
  • 使用VisualStateManager Pressed状态ButtonTemplate内)

Source (see Remarks section)

答案 2 :(得分:1)

不需要故事板

您需要使用按钮的视觉状态,并且可以借助样式

来完成

请看下面的风格

<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”上面的样式处理你的要求,我在那里给了一个Image源。

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

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

并在其中声明你的风格。

希望这有帮助。

答案 3 :(得分:0)

试试这段代码。

添加这些名称空间

  

的xmlns:交互式= “使用:Microsoft.Xaml.Interactivity”   的xmlns:核心= “使用:Microsoft.Xaml.Interactions.Core”   的xmlns:媒体= “使用: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>