I wanna share…

Archive for the ‘WPF’ Category

Button Animation in WPF

Button Animation in WPF

DownLoad Link: Click Here

Here I am describing about how to apply the animation for button control.  I defined a button control like this:

<Button Margin=”99,88,99,99″ Name=”button1″

Style=”{DynamicResource TransformingButton}” Content=”Enter” Foreground=”SpringGreen” BorderBrush=”Violet” OpacityMask=”DarkRed” IsCancel=”True” SnapsToDevicePixels=”False” ToolTip=”Please Click….” FontFamily=”Verdana” FontSize=”14″>

</Button>

You can see the DynamicResource name in Style property.

DynamicResource: DynamicResources are resolved at runtime. Use DynamicResources when the value of the resource could change during the lifetime of the Application.

I defined a Style in App.xaml file means under the Application.Resources tags.

Application.Resources: Resources defined at the application level can be accessed by all other pages that are part of the application.

These are the elements which are I used in the application.

ControlTemplate: Controls in Windows Presentation Foundation (WPF) have a ControlTemplate that contains the visual tree of that control. You can change the structure and appearance of a control by modifying the ControlTemplate of that control. There is no way to replace only part of the visual tree of a control; to change the visual tree of a control you must set the Template property of the control to its new and complete ControlTemplate.

Specifies the visual structure and behavioral aspects of a control that can be shared across multiple instances of the control.

StoryBoard: A Storyboard is a type of container timeline that provides targeting information for the timelines it contains. A Storyboard can contain any type of Timeline, including other container timelines and animations.

ContentPresenter: The concept of ContentPresenter is quite simple – it is a placeholder for any XAML content and it can be used to insert content at runtime.

Key-Frame Animation: Like a From/To/By animation, a key-frame animation animates the value of a target property. It creates a transition among its target values over its Duration.

ColorAnimationUsingKeyFrames: Animates the value of a Color property along a set of KeyFrames over a specified Duration.

DoubleAnimationUsingKeyFrames: Animates the value of a Double property between two target values using linear interpolation over a specified Duration.

SplineColorKeyFrame: Spline key frames like SplineColorKeyFrame create a variable transition between values according to the values of the KeySpline property

Code under Application.Resources is:

<Style x:Key=”TransformingButton” TargetType=”{x:Type Button}”>

<Setter Property=”Template”>

<Setter.Value>

<ControlTemplate TargetType=”{x:Type Button}”>

<ControlTemplate.Resources>

<Storyboard x:Key=”StoryBoard1″>

<ColorAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”ellipse” Storyboard.TargetProperty=”(Shape.Fill).(SolidColorBrush.Color)”>

<SplineColorKeyFrame KeyTime=”00:00:00″ Value=”PaleVioletRed”>

</SplineColorKeyFrame>

<SplineColorKeyFrame KeyTime=”00:00:30″ Value=”Violet”>

</SplineColorKeyFrame>

</ColorAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”ellipse” Storyboard.TargetProperty=”(UIElement.Opacity)”>

<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0.9″></SplineDoubleKeyFrame>

<SplineDoubleKeyFrame KeyTime=”00:00:30″ Value=”0.5″></SplineDoubleKeyFrame>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”ellipse” Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)”>

<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0″/>

<SplineDoubleKeyFrame KeyTime=”00:00:30″ Value=”360″/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”ellipse” Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)”>

<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0.953333333333333″/>

<SplineDoubleKeyFrame KeyTime=”00:00:30″ Value=”0.5″/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”ellipse” Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)”>

<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0.95″/>

<SplineDoubleKeyFrame KeyTime=”00:00:30″ Value=”0.5″/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</ControlTemplate.Resources>

<Grid>

<Ellipse x: Name=”ellipse” Fill=”CornflowerBlue” Stroke=”Wheat” RenderTransformOrigin=”0.5,0.5″>

<Ellipse.RenderTransform>

<TransformGroup>

<ScaleTransform/>

<SkewTransform/>

<RotateTransform/>

<TranslateTransform/>

</TransformGroup>

</Ellipse.RenderTransform>

</Ellipse>

<ContentPresenter HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}” VerticalAlignment=”{TemplateBinding VerticalContentAlignment}” SnapsToDevicePixels=”{TemplateBinding SnapsToDevicePixels}” RecognizesAccessKey=”True”/>

</Grid>

<ControlTemplate.Triggers>

<EventTrigger RoutedEvent=”FrameworkElement.Loaded”></EventTrigger>

<Trigger Property=”IsFocused” Value=”True”/>

<Trigger Property=”IsDefaulted” Value=”True”/>

<Trigger Property=”IsMouseOver” Value=”True”>

<Trigger.EnterActions>

<BeginStoryboard Storyboard=”{StaticResource StoryBoard1}”></BeginStoryboard>

</Trigger.EnterActions>

</Trigger>

<Trigger Property=”IsPressed” Value=”True”/>

<Trigger Property=”IsEnabled” Value=”False”/>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

Run the application and when the mouse over or click happens; the buttons rotates clockwise, gradually changes its color and size shrinks.

Before Focused or Mouse over or Click:

After Focused or Mouse over or Click:

Using DynamicResource in WPF

Using DynamicResource in WPF

DownLoad link: Click Here

DynamicResource: DynamicResources are resolved at runtime. Use DynamicResources when the value of the resource could change during the lifetime of the Application.

I will show you an example regarding DynamicResource.

<Window.Resources>

<SolidColorBrush x:Key=”brush” Color=”BlueViolet”></SolidColorBrush>

<Style TargetType=”Border” x:Key=”background”>

<Setter Property=”Background” Value=”Green”></Setter>

</Style>

</Window.Resources>

In my WPF application page I’ve one textbox and two ellipses. In Window. Resources I defined the SolidColorBrush and the Style properties.

In above code you can observe x: Key attribute. x: Key uniquely identifies elements that are created and referenced in a XAML-defined dictionary.

Here I’m using above resources. Have a look at below code.

You can use this syntax in xaml design page: {DynamicResource x:keyName}

<Grid>

<StackPanel>

<Border Style=”{StaticResource background}”>

<DockPanel Height=”360″ Width=”312″>

<Button x:Name=”button” Content=”Click” Click=”Button_Click” Background=”CadetBlue” Height=”40″ Width=”63″ />

</DockPanel>

</Border>

</StackPanel>

</Grid>

And in code behind page (.xaml.cs), I write this code in button click event.

private void Button_Click(object sender, RoutedEventArgs e)

{

this.button.SetResourceReference(BackgroundProperty, “brush”);

}

Run the page and you can see the color change of the button after you click on it.

Result window looks like this.


Hope you like this article;

Using StaticResources in WPF

Using StaticResources in WPF

DownLoad Link: Click Here

Resources are provides a simple way to reuse commonly defined objects and values. If we are defining the resources and we can use that resources number of times. (Just like applying themes and css to web pages).

Resources are two types:

1. Static Resource

2. Dynamic Resource.

StaticResource: StaticResources are resolved at compile time. Use StaticResources when it’s clear that you don’t need your resource re-evaluated when fetching it – static resources perform better than dynamic resources.

DynamicResource: DynamicResources are resolved at runtime. Use DynamicResources when the value of the resource could change during the lifetime of the Application.

I will show you an example regarding Static Resource.

In my WPF application page I’ve one textbox and two ellipses. In Window. Resources I defined the SolidColorBrush and the Style properties.

<Window.Resources>

<SolidColorBrush x:Key=”for1buttoncolor” Color=”Green”></SolidColorBrush>

<SolidColorBrush x:Key=”for2buttoncolor” Color=”CadetBlue”></SolidColorBrush>

<SolidColorBrush x:Key=”brush” Color=”Red”></SolidColorBrush>

<Style TargetType=”Border” x:Key=”background”>

<Setter Property=”Background” Value=”Orange”></Setter>

</Style>

<Style TargetType=”TextBox” x:Key=”TitleText”>

<Setter Property=”Background” Value=”White”/>

<Setter Property=”DockPanel.Dock” Value=”Top”/>

<Setter Property=”FontSize” Value=”14″/>

<Setter Property=”Foreground” Value=”#4E87D4″/>

<Setter Property=”FontFamily” Value=”Tahoma”/>

<Setter Property=”Margin” Value=”50,50,50,0″/>

<Setter Property=”Width” Value=”300″></Setter>

</Style>

</Window.Resources>

In above code you can observe x: Key attribute. x: Key uniquely identifies elements that are created and referenced in a XAML-defined dictionary.

Here I’m using above resources. Have a look at below code.

Syntax is :{ StaticResource x:keyName}

<Grid>

<StackPanel>

<Border Style=”{StaticResource background}”>

<DockPanel Height=”360″ Width=”312″>

<TextBox Style=”{StaticResource TitleText}” Height=”28″ Width=”150″></TextBox>

<Ellipse DockPanel.Dock=”Left” HorizontalAlignment=”Left” Height=”73″ Fill=”{StaticResource for1buttoncolor}” Width=”169″></Ellipse>

<Ellipse DockPanel.Dock=”Right” HorizontalAlignment=”Right” Width=”149″ Height=”73″ Fill=”{StaticResource for2buttoncolor}”></Ellipse> </DockPanel>

</Border>

</StackPanel>

</Grid>

Result window looks like this.