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代码来做到这一点。

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

2 个答案: