Windows Phone 8 中的 VisualStateManager答案

【问题标题】：VisualStateManager in Windows Phone 8Windows Phone 8 中的 VisualStateManager
【发布时间】：2014-07-09 19:20:02
【问题描述】：

我正在尝试使用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);
}

【问题讨论】：

你的代码在哪里？你试过什么？你有什么问题？是什么意思？你有错误吗？ ...
对不起，代码没有立即添加。不，不会出现错误。但是 VisualStateManager.GoToState 返回 false。
手机上没有“鼠标指针” - 使用轻按或触摸事件？
有一个 MouseOver 类型的东西，你可以将手指悬停在按钮上，或者按屏幕上的其他位置然后将手指移到按钮上。

标签： c# xaml windows-phone-8 appearance

【解决方案1】：

您的 VisualStateManager 不正确。据我所知，没有“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}"/>

实际截图

【讨论】：