Is it possible to dynamically change the style of an element using only XAML in UWP?

Question

When the cursor hovers over an element, I want to change its style dynamically.

I know that for a Control, I can do this using ControlTemplate and 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);
        }

    }

However, the above code only applies to Control classes and must use C# code, which is inconvenient for some situations.

For example, I have a Grid in the following code, and when the cursor hovers over it, I want to change its background color to blue, can I do this using only 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>

Azurry · Answer 1 · 2019-04-18T11:29:43.430

0

Here's a better example of how i'd achieve this. Now this isn't going to be all xaml you will need to initialize the storyboard. but you can use this on almost any element. Obviously you can play around to get different effects.

<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();
}

Hope this helps a bit more.

edited Apr 18 '19 at 11:29

answered Apr 16 '19 at 19:37

Azurry

491
3
16

For your first solution, look here: [Trigger element is not supported in UWP](https://stackoverflow.com/questions/31929071/trigger-element-xaml-is-not-supported-in-a-uwp-project). And for second, I am confused about it. – srnldai Apr 17 '19 at 09:30
Ah man I dint even realize I actually answered this, My Apologize it was a late night. The Answer to your question is Yes and No, You can Dynamically change elements like your Grid views background using only xaml, However the tricky part is Triggers for these event's Give me a little bit and ill find you a neat example. – Azurry Apr 18 '19 at 11:11
Thanks for your answer, I think I understand that it is not feasible to dynamically change the style of an element using only XAML in UWP. – srnldai Apr 18 '19 at 14:42
I wish I could be of more help, I'm still learning myself. I'd maybe advise you to take a look at custom controls and brushes, That would most likely be your best bet for this. If you want to move past trying to only achieve this using xaml. – Azurry Apr 18 '19 at 18:40

score 0 · Answer 2 · answered Apr 28 '19 at 13:42

0

Now I am sure that there is a solution for my question. I can do this with simple xaml code.

answered Apr 28 '19 at 13:42

srnldai

259
1
7

Is it possible to dynamically change the style of an element using only XAML in UWP?

2 Answers2