Tech
News
Videos
Forums
Jobs
Books
Events
More
Interviews
Live
Learn
Training
Career
Members
Blogs
Challenges
Certification
Contribute
Article
Blog
Video
Ebook
Interview Question
Collapse
Feed
Dashboard
Wallet
Learn
Achievements
Network
Rewards
SharpGPT
Premium
Contribute
Article
Blog
Video
Ebook
Interview Question
Register
Login
Color Animation in LinearGradientBrush using XAML
WhatsApp
XAML Designer
6y
32.3
k
0
5
Resource
0
This code snippet below creates a Canvas control on a Grid.
The Canvas control is filled with a LinearGradientBrush with 5 different colors and color stops.
On Windows.Triggers, we add a trigger on Window.Loaded event and using a StoryBoard, we add ColorAnimation on each GradientStop and change color for current color to next color in the Gradient Stops.
<
Window
x:Class
=
"InkSample.MainWindow"
xmlns
=
"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
=
"http://schemas.microsoft.com/winfx/2006/xaml"
Title
=
"MainWindow"
Height
=
"350"
Width
=
"525"
>
<
Window.Triggers
>
<
EventTrigger
RoutedEvent
=
"Window.Loaded"
>
<
EventTrigger.Actions
>
<
BeginStoryboard
>
<
Storyboard
RepeatBehavior
=
"Forever"
AutoReverse
=
"True"
>
<
ColorAnimation
Storyboard.TargetName
=
"Canvas1"
Storyboard.TargetProperty
=
"(Canvas.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"
From
=
"Red"
To
=
"Orange"
Duration
=
"0:0:5"
/>
<
ColorAnimation
Storyboard.TargetName
=
"Canvas1"
Storyboard.TargetProperty
=
"(Canvas.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
From
=
"Orange"
To
=
"Green"
Duration
=
"0:0:5"
/>
<
ColorAnimation
Storyboard.TargetName
=
"Canvas1"
Storyboard.TargetProperty
=
"(Canvas.Background).(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)"
From
=
"Green"
To
=
"Blue"
Duration
=
"0:0:5"
/>
<
ColorAnimation
Storyboard.TargetName
=
"Canvas1"
Storyboard.TargetProperty
=
"(Canvas.Background).(LinearGradientBrush.GradientStops)[3].(GradientStop.Color)"
From
=
"Blue"
To
=
"Black"
Duration
=
"0:0:5"
/>
<
ColorAnimation
Storyboard.TargetName
=
"Canvas1"
Storyboard.TargetProperty
=
"(Canvas.Background).(LinearGradientBrush.GradientStops)[4].(GradientStop.Color)"
From
=
"Black"
To
=
"Red"
Duration
=
"0:0:5"
/>
</
Storyboard
>
</
BeginStoryboard
>
</
EventTrigger.Actions
>
</
EventTrigger
>
</
Window.Triggers
>
<
Grid
>
<
Canvas
Name
=
"Canvas1"
>
<
Canvas.Background
>
<
LinearGradientBrush
>
<
GradientStop
Color
=
"Red"
Offset
=
"0.0"
/>
<
GradientStop
Color
=
"Orange"
Offset
=
"0.40"
/>
<
GradientStop
Color
=
"Green"
Offset
=
"0.60"
/>
<
GradientStop
Color
=
"Blue"
Offset
=
"0.80"
/>
<
GradientStop
Color
=
"Black"
Offset
=
"1.00"
/>
</
LinearGradientBrush
>
</
Canvas.Background
>
</
Canvas
>
</
Grid
>
</
Window
>
WPF
XAML