c# - Windows Phone 8 中的 VisualStateManager

Question

我正在尝试使用 VisualStateManager 更改按钮的外观。但它不起作用。请帮忙!

XAML

<Button x:Name="button" Background="AntiqueWhite" Grid.Row="2" Grid.Column="0" MouseEnter="button_MouseEnter" MouseLeave="button_MouseLeave">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="ColorState">
            <VisualState x:Name="MouseEnter">
                <Storyboard Storyboard.TargetProperty="Background">
                    <ColorAnimation To="Aquamarine" Duration="0:1:30"/>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="MouseLeave"/>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Button>

С#

private void button_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{
    bool bol = VisualStateManager.GoToState(this, MouseEnter.Name, true);
}

private void button_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
{
    bool bol = VisualStateManager.GoToState(this, MouseLeave.Name, true);
}

Answer 1

您的 VistualStateManager 不正确。据我所知，没有“MouseEnter”，但有一个 MouseOver

这是 <Button> 的完整 ControlTemplate .我注释掉了 MouseOver 状态的默认行为，并在您的颜色变化动画中进行了编码。您所要做的就是将任何按钮的样式设置为此“Chubs_ButtonStyle”，它将突出显示为 Aquamarine。希望这会有所帮助。

---

<phone:PhoneApplicationPage.Resources>
    <Style x:Key="Chubs_ButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="Transparent"/>
        <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 PhoneFontSizeMedium}"/>
        <Setter Property="Padding" Value="10,5,10,6"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <!-- restore it back to original color -->
                                        <ColorAnimation To="AntiqueWhite" Storyboard.TargetProperty="(ContentContainer.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonBackground" Duration="0"/>
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <!--
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        -->
                                        <ColorAnimation To="Aquamarine" Storyboard.TargetProperty="(ContentContainer.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonBackground" Duration="0"/>
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                        </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" Margin="{StaticResource PhoneTouchTargetOverhang}">
                            <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>
</phone:PhoneApplicationPage.Resources>

---

像这样将样式应用于按钮

<Button x:Name="button" Background="AntiqueWhite" Grid.Column="0" Width="100" Height="100" Style="{StaticResource Chubs_ButtonStyle}"/>

---

实际截图