[英]Is it possible to dynamically change the style of an element using only XAML in UWP?
当光标悬停在元素上时,我想动态地改变它的样式。
我知道对于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>
这是我如何实现这一目标的更好例子。 现在,这不是所有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();
}
希望这会有所帮助。
现在我确信我的问题有一个解决方案。 我可以使用简单的xaml代码完成此操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.