我想用故事板来改变我正在使用的按钮的边界颜色。问题是我不知道如何开始我的故事板。当我点击元素时,我希望它能改变颜色。我到目前为止的代码是:
<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不起作用。
答案 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
状态Button
(Template
内)答案 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>