Question

我有一个自定义用户控件，就像带有文本的图标按钮一样。我希望它具有与PointerOver相同的Pressed和AppBarButton动画，但是VisualStateManager似乎不起作用。

这是控件的xaml：

<UserControl
    x:Class="SMPlayer.IconTextButton"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:SMPlayer"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="300"
    d:DesignWidth="400"
    mc:Ignorable="d">

    <Grid
        x:Name="Root"
        Background="{x:Bind Background}"
        CornerRadius="{x:Bind CornerRadius}"
        Tapped="Root_Tapped">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Viewbox
            x:Name="ContentViewbox"
            Grid.Column="1"
            Height="{ThemeResource AppBarButtonContentHeight}"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Center"
            AutomationProperties.AccessibilityView="Raw">
            <ContentPresenter
                x:Name="IconContent"
                Content="{x:Bind Icon}"
                Foreground="{x:Bind Foreground}" />
        </Viewbox>
        <TextBlock
            x:Name="LabelTextBlock"
            Grid.Column="2"
            Margin="0,0,10,0"
            VerticalAlignment="Center"
            AutomationProperties.AccessibilityView="Raw"
            FontSize="{x:Bind FontSize}"
            FontWeight="{x:Bind FontWeight}"
            Foreground="{x:Bind Foreground}"
            Text="{x:Bind Label}"
            TextAlignment="Center"
            TextWrapping="Wrap" />
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Target="Root.CornerRadius" Value="20" />
                    </VisualState.Setters>
                    <Storyboard>
                        <PointerUpThemeAnimation Storyboard.TargetName="ContentRoot" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                        <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPointerOver}" />
                        <Setter Target="IconContent.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                        <Setter Target="LabelTextBlock.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                    </VisualState.Setters>
                    <Storyboard>
                        <PointerUpThemeAnimation Storyboard.TargetName="LabelTextBlock" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                    <VisualState.Setters>
                        <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                        <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPressed}" />
                        <Setter Target="IconContent.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
                        <Setter Target="LabelTextBlock.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
                    </VisualState.Setters>
                    <Storyboard>
                        <PointerDownThemeAnimation Storyboard.TargetName="LabelTextBlock" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</UserControl>

我的代码有什么问题？预先感谢！

Answer 1

UWP Visual State Manager不适用于PointerOver和受压状态

请检查此document，您需要使用VisualStateManager调用GoToState方法在匹配事件处理程序中后面代码中的状态之间进行转换。

VisualStateManager.GoToState(this, "PointerOver", useTransitions);

UWP视觉状态管理器不适用于PointerOver和受压状态

1 个答案: