How to change UserControl template when a event raise?

Question

Hi Guys,

I write a user control in metro style apps project like following. How to change control outer ring color when mouse or finger enter control area.

<UserControl 
    x:Class="MyUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Kail.Demo.Snaker.Shell"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="100"
    d:DesignWidth="100">
    
    <Grid>
        <Grid.Resources>
            <ControlTemplate x:Key="templatePosition" TargetType="Button">
                <Grid>
                    <!-- When mouse or finger enter control area, outer ring should become new color from orange-->
                    <Ellipse Name="ellipseOuterRing" Width="100" Height="100" Fill="Orange"/>
                    <Ellipse Name="ellipseInnerRing" Width="95" Height="95" Fill="White"/>
                </Grid>
            </ControlTemplate>
        </Grid.Resources>
        <Grid>
            <Button Name="button" Template="{StaticResource ResourceKey=templatePosition}"></Button>
        </Grid>
    </Grid>
</UserControl>

In wpf, I can use ControlTemplate.Triggers to implement. But I can't find similar mark in metro style project xaml.

How can I implement it?

Regards,

Kaneabell

Answer 1

Hi Kaneabell,

You can still use VisualState to accomplish that in a Metro Style app. It's similar to how VisualState works in WPF.

See  XAML essential controls sample for more information. "it shows you how to style a control, use a control to create a template, and work with the Visual State Manager."

Best regards,

---

Min Zhu [MSFT]
MSDN Community Support | Feedback to us