CodePaste Logo
New Snippet New Snippet Recent Snippets Recent Snippets My Snippets My Snippets Web Code Search Snippets Search
Sign inor Register
Language: HTML

WPF Linear Gradient Fill and animated Fade

1998 Views
Copy Code Show/Hide Line Numbers
<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>
by Jerry Nixon
  June 30, 2010 @ 10:06pm
Tags:
Description:
This is the XAML (http://jerrytech.blogspot.com/2010/06/wpf-linear-gradient-fill-and-animated.html) just paste it into XamlPad

Add a comment


Report Abuse
brought to you by:
West Wind Techologies



If you find this site useful and use it frequently please consider making a donation to support this free service.
Donate