I m trying to animate the content of a metro styled button. My problem is that the content of the button does not change color. The foreground color does not change.
在此显示我的按钮样式 :
<Style x:Key="MetroButtonStyle"
TargetType="Button">
<Setter Property="MinWidth"
Value="40"/>
<Setter Property="Width"
Value="100"/>
<Setter Property="MinHeight"
Value="88"/>
<Setter Property="HorizontalAlignment"
Value="Center"/>
<Setter Property="Foreground"
Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="AppButton"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="MouseOverEllipse"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="PressedEllipse"/>
<ColorAnimation Duration="0"
To="Black"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="EllipseInnerContent"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimation Duration="0"
To="#7F8D8D8D"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="EllipseInnerContent"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel Orientation="Vertical"
HorizontalAlignment="Center">
<Grid Margin="0,14,0,5"
HorizontalAlignment="Center"
MinWidth="40">
<Ellipse x:Name="PressedEllipse"
Fill="{TemplateBinding Foreground}"
Opacity="0"
Width="40"
Height="40"/>
<Ellipse x:Name="MouseOverEllipse"
Fill="#7F8D8D8D"
Opacity="0"
Width="40"
Height="40"/>
<Ellipse Fill="Transparent"
Stroke="{TemplateBinding Foreground}"
StrokeThickness="2"/>
<ContentPresenter x:Name="EllipseInnerContent"
Content="{TemplateBinding Content}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
<TextBlock x:Name="LabelText"
TextWrapping="Wrap"
HorizontalAlignment="Center"
FontFamily="Segoe UI"
FontSize="12"
Text="{TemplateBinding Tag}"
Foreground="{TemplateBinding Foreground}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here s is how i use it. This does not works:
<Button Style="{StaticResource MetroButtonStyle}"
Tag="Blah">
<TextBlock Text="XXX"/>
</Button>
此工作 :
<Button Style="{StaticResource MetroButtonStyle}"
Tag="Blah"
Content="XXX"/>