Posted by: Zeeshan Amjad | February 24, 2010

Apply Gradient to Border


We have already saw one example of border here. Now we are going to apply the gradient on border of the border control. At the same time we are applying the animation at the width of the border control. Here is complete XAML code of the program.

  1: <Window x:Class="WpfBorder.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     xmlns:local="clr-namespace:WpfBorder"
  5:     Title="Border Animation" Height="300" Width="400">
  6:     <Grid>
  7:         <Border Name="border" Margin="10" BorderThickness="25" CornerRadius="55, 5, 55, 5">
  8:             <Border.BorderBrush>
  9:                 <LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
 10:                     <GradientStop Offset="1" Color="AliceBlue"/>
 11:                     <GradientStop Offset="0" Color="DarkBlue"/>
 12:                 </LinearGradientBrush>
 13:             </Border.BorderBrush>
 14:                 
 15:             <Border.Triggers>
 16:                 <EventTrigger RoutedEvent="Border.Loaded">
 17:                     <BeginStoryboard>
 18:                         <Storyboard>
 19:                             <DoubleAnimation
 20:                                 Storyboard.TargetName="border"
 21:                                 Storyboard.TargetProperty="Width"
 22:                                 From="10.0" To="350.0" Duration="0:0:5"/>
 23:                         </Storyboard>
 24:                     </BeginStoryboard>
 25:                 </EventTrigger>
 26:             </Border.Triggers>
 27:                                     
 28:             <Border.Background>
 29:                 <LinearGradientBrush>
 30:                     <LinearGradientBrush.GradientStops>
 31:                         <GradientStop Offset="0.142" Color="Red"/>
 32:                         <GradientStop Offset="0.285" Color="Orange"/>
 33:                         <GradientStop Offset="0.428" Color="Yellow"/>
 34:                         <GradientStop Offset="0.571" Color="Green"/>
 35:                         <GradientStop Offset="0.714" Color="Blue"/>
 36:                         <GradientStop Offset="0.857" Color="Indigo"/>
 37:                         <GradientStop Offset="1.0" Color="Violet"/>
 38:                     </LinearGradientBrush.GradientStops>
 39:                 </LinearGradientBrush>
 40:             </Border.Background>            
 41:         </Border>        
 42:     </Grid>
 43: </Window>
 44: 

This program not only display the gradient in the border but also do the animation on the width. Here are two output of this program.

BorderAnimation_01

BorderAnimation_02

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: