是否可以在 UWP 中仅使用 XAML 动态更改元素的样式？

Question

当光标悬停在一个元素上时，我想动态改变它的样式。

我知道对于Control，我可以使用ControlTemplate 和VisualStateManager 来做到这一点。

<Page
    x:Class="World.BlankPage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:World"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.Resources>
        <ControlTemplate x:Key="ControlTemplate" TargetType="ContentControl">
            <Grid x:Name="RootGrid" Width="100" Height="100" Background="Red" PointerEntered="RootGrid_PointerEntered" PointerExited="RootGrid_PointerExited">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup>
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="Active">
                            <VisualState.Setters>
                                <Setter Target="RootGrid.Background" Value="Blue"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Grid>
        </ControlTemplate>
    </Page.Resources>

    <Grid>
        <ContentControl Template="{StaticResource ControlTemplate}"/>
    </Grid>

</Page>

    public sealed partial class BlankPage1 : Page {

        public BlankPage1() {
            this.InitializeComponent();
        }

        private void RootGrid_PointerEntered(object sender,PointerRoutedEventArgs e) {
            if (VisualTreeHelper.GetParent((Grid)sender) is ContentControl control) VisualStateManager.GoToState(control,"Active",false);
        }

        private void RootGrid_PointerExited(object sender,PointerRoutedEventArgs e) {
            if (VisualTreeHelper.GetParent((Grid)sender) is ContentControl control) VisualStateManager.GoToState(control,"Normal",false);
        }

    }

但是，以上代码只适用于Control类，必须使用C#代码，在某些情况下不方便。

例如，我在下面的代码中有一个Grid，当光标悬停在它上面时，我想将其背景颜色更改为蓝色，我可以只使用 XAML 来做到这一点吗？

<Page
    x:Class="World.BlankPage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid>
        <Grid Width="100" Height="100" Background="Red"/>
    </Grid>

</Page>

Answer 1

这是我如何实现这一目标的更好示例。现在这不会是您需要初始化情节提要的全部 xaml。但是您几乎可以在任何元素上使用它。显然，您可以四处玩耍以获得不同的效果。

<Page
    x:Class="World.BlankPage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
   <Storyboard x:Name="sbGridb">
<ColorAnimation
                Storyboard.TargetName="myAnimatedBrush"
                Storyboard.TargetProperty="(Grid.Background). 
                (SolidColorBrush.Opacity)" 
                EnableDependentAnimation ="True"
                From="(W.e you want)" To="(The same or w.e els you want)" Duration="0:0:2" AutoReverse="True" 
                RepeatBehavior="Forever" />
     </Storyboard>
    </Page.Resources>

    <Grid x:Name="myGrid">
      <Grid.Background>
          <SolidColorBrush x:Name ="myAnimatedBrush" Color="DodgerBlue" 
           Opacity="1"/>
       </Grid.Background>
      <Grid Width="100" Height="100" Background="Red"/>
    </Grid>

</Page>

public main(){

    this.InitializeComponent();
    this.sbGridb.Begin();
}

希望这会有所帮助。

Answer 2

现在我确信我的问题有解决方案。我可以用简单的 xaml 代码做到这一点。