Language: HTML
WPF Linear Gradient Fill and animated Fade
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Jerry Nixon"> <Page.Resources> <Style TargetType="Border" x:Key="BorderStyle"> <!-- Outer Border Style --> <Setter Property="Opacity" Value=".5" /> <Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="Margin" Value="5,5,5,0" /> <Setter Property="Width" Value="200" /> <Setter Property="CornerRadius" Value="0,15,0,15" /> <Setter Property="BorderBrush" Value="Black" /> <Setter Property="BorderThickness" Value="1" /> <Setter Property="Height" Value="40" /> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <LinearGradientBrush.GradientStops> <GradientStop Color="GhostWhite" Offset="0" x:Name="Stop1" /> <GradientStop Color="LightSteelBlue" Offset="0.5" x:Name="Stop2" /> <GradientStop Color="SteelBlue" Offset="0.5" x:Name="Stop3" /> <GradientStop Color="LightSteelBlue" Offset="1" x:Name="Stop4" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Setter.Value> </Setter> <!-- Outer Border Triggers --> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <ColorAnimation Storyboard.TargetProperty="(Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" To="White" Duration="0:0:0.0" /> <ColorAnimation Storyboard.TargetProperty="(Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" To="Orange" Duration="0:0:0.0" /> <ColorAnimation Storyboard.TargetProperty="(Background).(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" To="OrangeRed" Duration="0:0:0.0" /> <ColorAnimation Storyboard.TargetProperty="(Background).(LinearGradientBrush.GradientStops)[3].(GradientStop.Color)" To="Orange" Duration="0:0:0.0" /> <DoubleAnimation Storyboard.TargetProperty="(Background).(LinearGradientBrush.GradientStops)[2].(GradientStop.Offset)" To="1" Duration="0:0:0.0" /> <DoubleAnimation Storyboard.TargetProperty="(Opacity)" To="1" Duration="0:0:0.0" /> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard> <Storyboard> <ColorAnimation Storyboard.TargetProperty="(Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" To="White" Duration="0:0:1.0" /> <ColorAnimation Storyboard.TargetProperty="(Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" To="LightSteelBlue" Duration="0:0:1.0" /> <ColorAnimation Storyboard.TargetProperty="(Background).(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" To="SteelBlue" Duration="0:0:1.0" /> <ColorAnimation Storyboard.TargetProperty="(Background).(LinearGradientBrush.GradientStops)[3].(GradientStop.Color)" To="LightSteelBlue" Duration="0:0:1.0" /> <DoubleAnimation Storyboard.TargetProperty="(Background).(LinearGradientBrush.GradientStops)[2].(GradientStop.Offset)" To=".5" Duration="0:0:1.5" /> <DoubleAnimation Storyboard.TargetProperty="(Opacity)" To=".5" Duration="0:0:1.0" /> </Storyboard> </BeginStoryboard> </Trigger.ExitActions> </Trigger> </Style.Triggers> </Style> <Style TargetType="TextBlock" x:Key="TextStyle"> <!-- Inner TextBlock Style --> <Setter Property="HorizontalAlignment" Value="Stretch" /> <Setter Property="VerticalAlignment" Value="Center" /> <Setter Property="TextAlignment" Value="Center" /> <Setter Property="FontSize" Value="20" /> </Style> </Page.Resources> <Border BorderBrush="Black" BorderThickness="1" Margin="10" Height="400" Width="230"> <ScrollViewer> <StackPanel> <Border Style="{StaticResource BorderStyle}"><TextBlock Text="Jerry Nixon" Style="{StaticResource TextStyle}" /></Border> <Border Style="{StaticResource BorderStyle}"><TextBlock Text="Jerry Nixon" Style="{StaticResource TextStyle}" /></Border> <Border Style="{StaticResource BorderStyle}"><TextBlock Text="Jerry Nixon" Style="{StaticResource TextStyle}" /></Border> <Border Style="{StaticResource BorderStyle}"><TextBlock Text="Jerry Nixon" Style="{StaticResource TextStyle}" /></Border> <Border Style="{StaticResource BorderStyle}"><TextBlock Text="Jerry Nixon" Style="{StaticResource TextStyle}" /></Border> <Border Style="{StaticResource BorderStyle}"><TextBlock Text="Jerry Nixon" Style="{StaticResource TextStyle}" /></Border> <Border Style="{StaticResource BorderStyle}"><TextBlock Text="Jerry Nixon" Style="{StaticResource TextStyle}" /></Border> <Border Style="{StaticResource BorderStyle}"><TextBlock Text="Jerry Nixon" Style="{StaticResource TextStyle}" /></Border> <Border Style="{StaticResource BorderStyle}"><TextBlock Text="Jerry Nixon" Style="{StaticResource TextStyle}" /></Border> <Border Style="{StaticResource BorderStyle}"><TextBlock Text="Jerry Nixon" Style="{StaticResource TextStyle}" /></Border> <Border Style="{StaticResource BorderStyle}"><TextBlock Text="Jerry Nixon" Style="{StaticResource TextStyle}" /></Border> <Border Style="{StaticResource BorderStyle}"><TextBlock Text="Jerry Nixon" Style="{StaticResource TextStyle}" /></Border> <Border Style="{StaticResource BorderStyle}"><TextBlock Text="Jerry Nixon" Style="{StaticResource TextStyle}" /></Border> <Border Style="{StaticResource BorderStyle}"><TextBlock Text="Jerry Nixon" Style="{StaticResource TextStyle}" /></Border> </StackPanel> </ScrollViewer> </Border> </Page>
Tags:
Description:
This is the XAML (http://jerrytech.blogspot.com/2010/06/wpf-linear-gradient-fill-and-animated.html) just paste it into XamlPad
Report Abuse
Subscribe
Discuss
What's new
What is it
New Snippet
Recent Snippets
My Snippets
Web Code
Search

