- 1 year ago
How to make illumination moving effect on hover WINUI 3
Comment
1 / 1
To create a moving illumination effect on hover in a WINUI 3 app, you can use a combination of XAML animations and event handlers. Here's an example of how to achieve this:
- Add a
Grid
element to your XAML page to contain the element that will be illuminated:
xml<Grid x:Name="IlluminatedElementContainer">
<Rectangle x:Name="IlluminatedElement" Fill="White" />
</Grid>
- Add a
PointerEntered
event handler to theIlluminatedElement
element that will start the illumination animation:
xml<Rectangle x:Name="IlluminatedElement" Fill="White" PointerEntered="OnIlluminatedElementPointerEntered" />
csharpprivate void OnIlluminatedElementPointerEntered(object sender, PointerRoutedEventArgs e)
{
// Start the illumination animation
IlluminationStoryboard.Begin();
}
- Add a
PointerExited
event handler to theIlluminatedElement
element that will stop the illumination animation:
xml<Rectangle x:Name="IlluminatedElement" Fill="White" PointerEntered="OnIlluminatedElementPointerEntered" PointerExited="OnIlluminatedElementPointerExited" />
csharpprivate void OnIlluminatedElementPointerExited(object sender, PointerRoutedEventArgs e)
{
// Stop the illumination animation
IlluminationStoryboard.Stop();
}
- Define the illumination animation using a
Storyboard
element:
xml<Storyboard x:Name="IlluminationStoryboard">
<DoubleAnimation Storyboard.TargetName="IlluminatedElement"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
To="-50"
Duration="0:0:0.5"
AutoReverse="True"
RepeatBehavior="Forever" />
<DoubleAnimation Storyboard.TargetName="IlluminatedElement"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
To="-50"
Duration="0:0:0.5"
AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>
- Add a
TranslateTransform
to theIlluminatedElement
element to define the starting position of the illumination effect:
xml<Rectangle x:Name="IlluminatedElement" Fill="White">
<Rectangle.RenderTransform>
<TranslateTransform X="0" Y="0" />
</Rectangle.RenderTransform>
</Rectangle>
In this example, the DoubleAnimation
elements in the IlluminationStoryboard
animate the TranslateTransform.X
and TranslateTransform.Y
properties of the IlluminatedElement
element. This causes the element to move 50 pixels to the left and up, and then back to its starting position, creating an illumination effect. The AutoReverse="True"
and RepeatBehavior="Forever"
properties cause the animation to play back and forth indefinitely.
By using XAML animations and event handlers, you can create a moving illumination effect on hover in your WINUI 3 app.