Working with ObjectAnimationUsingKeyFrames:

ObjectAnimationUsingKeyFrame:

Recently I had requirement to change brush resources on a event like mouse hover, to do this I start over using <ColorAnimation/> but in this we can change color values but not color resources.

To change the brush resource we had to dive into the XAML as Blend doesn’t seem to know about the ObjectAnimationUsingKeyFrames animation type.The ObjectAnimationUsingKeyFrames animation allows you to use object instead of primitive values for your animation keyframes. The only type of keyframe allowed in the ObjectAnimationUsingKeyFrames animation are Discrete keyframes. The reason is that there is no good way to interpolate between object values, I wanted to change the Fill of a rectangle from one resource-based Brush to another. For example, here are the brushes defined in the Resources section:

<LinearGradientBrush x:Key=”MouseHoverBackgroundBrush” EndPoint=”0.5,1″ StartPoint=”0.5,0″>

<GradientStop Color=”#FFEFF1F3″ Offset=”0″/>

<GradientStop Color=”#FFFBFBFB” Offset=”0.018″/>

<GradientStop Color=”#FFEDEDEA” Offset=”0.23″/>

<GradientStop Color=”#FFE0E0E0″ Offset=”0.965″/>

<GradientStop Color=”#FFF7F7F7″ Offset=”1″/>

</LinearGradientBrush>

<SolidColorBrush x:Key=”BackgroundBrush” Color=”#FF122F1A”/>

Now let us take a Button control’s style to work with this.

In button style at design time I have used background property to a brush resource called “ BackgroundBrush” and we wanted to set the MouseHoverBackgroundBrush during the Visual State Manager’s MouseOver state. Since Blend wouldn’t let us do it, we had to write the ObjectAnimationUsingKeyFrames XAML ourselves.

To do this, we created a Storyboard and an ObjectAnimationUsingKeyFrames element inside the MouseOver state (of the Visual State Manager for our Button’s ControlTemplate).In the new element we specified the Storyboard.TargetName and Storyboard.TargetProperty to “theBack” and “Fill“. Inside the animation, we created a DiscreteObjectKeyFrame for our one value. We just wanted to change it to the since new brush so we only needed one. We set the Keytime to “0:0:0” to specify that this should happen immediately.Lastly, we specified the StaticResource for the mouseOverBackBrush as the Value. Here’s the entire MouseOver state XAML:

<Style x:Key=”ButtonStyle1″ TargetType=”Button”>

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

<Setter Property=”Template”>

<Setter.Value>

<ControlTemplate TargetType=”Button”>

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name=”CommonStates”>

<VisualState x:Name=”Disabled”/>

<VisualState x:Name=”Normal”/>

<VisualState x:Name=”MouseOver”>

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration=”0″ Storyboard.TargetProperty=”Fill” Storyboard.TargetName=”rt” d:IsOptimized=”True”>

<DiscreteObjectKeyFrame KeyTime=”0:0:0″ Value=”{StaticResource Background}” />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name=”Pressed”/>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Rectangle x:Name=”rt” Fill=”{TemplateBinding Background}” StrokeEndLineCap=”Round” StrokeThickness=”2″/>

<Rectangle x:Name=”Hover” Fill=”#FF122F1A” StrokeEndLineCap=”Round” StrokeThickness=”2″ Visibility=”Collapsed”/>

<Border BorderBrush=”Black” BorderThickness=”1″ Background=”{TemplateBinding Background}” Visibility=”Collapsed”/>

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

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

We didn’t need to specify another animation in the Normal state the Visual State Manager automatically handles the resetting of our value back to the original state. It just works. Here’s two pictures of the button before and after the mouse over:

Advertisements

Page transitions 4 Samples

Four  samples of  Transitioning content control’s style with Slide in.

PageTransitions Example

Slide in Top to Bottom: Live and download sample style from here

Slide in Bottom to Top: Live and download sample style from here

Slide in Left to Right: Live and download sample style from here

Slide in Right to Left: Live and download sample style from here

Creating Behavior in Silverlight

Behaviors allow designers to take advantage of new levels of interactivity decoratively, without writing code. A behavior is something you attach to an element, modifying the way in which the element should present itself, or how the element should respond to user interactions.

There are many great behaviors available in Expression Blend inside Assets > Behavior section, we can just drag and drop any behavior on to appropriate item and set some relevant properties, that’s it our behavior works fine.

In this article i am going to demonstrate how to create a simple behavior, for demonstration purpose i am going to create a messagebox behavior.

Step 1:

Let us start with a simple Silverlight application. Fire up Visual Studio 2010, and click File->New to select a Silverlight 4.0 application, name it accordingly, and click OK.

Fire Up VisualStudio

Step 2:

Visual Studio will create a Solution. Right-click on the solution in the Solution Explorer and select Add then New Project…

Add New Project file in the Solution

Step 3:

This time create a Silverlight Class Library, and name it accordingly and rename the Class1.cs to PopupBegaviour.

Silverlight Class Library

Step 4:

Now we need to add a reference called System.Windows.Interactivity.dll In the Silverlight Class Library , this assembly located at:

C:\Program Files\Microsoft SDKs\Expression\Blend 3\Interactivity\Libraries\Silverlight\System.Windows.Interactivity.dll

Right click on references a popup opens and in that find for System.Windows.Interactivity and press OK.

Add Reference

Select Inerativity Dll

Step 5:

Add a Namespace inside the PopupBegaviour class

using System;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Interactivity;

namespace PopupBehavior
{
public class PopupBegaviour
{

}
}

Now Inherit the OpenWindow from TargetedTriggerAction<DependencyObject>,

TargetedTriggerAction<DependencyObject> means that while this behavior can be attached to any element, the Target can only
be a Dependency.

and now create a method to invoke the popup.

protected override void Invoke(object o)
{
MessageBox.Show(message);
}

Instead of having the message box’s contents be set only via code, we’d like to make it a Dependency Property so that anybody who uses this Action can easily set the text displayed via Expression Blend’s Properties Inspector. The code for doing that, is pretty straightforward.

public string message
{
get{return (string)GetValue(MessageProperty);}
set { SetValue(MessageProperty, value); }
}
public static readonly DependencyProperty MessageProperty = DependencyProperty.Register(“Message”,typeof(string),typeof(OpenWindow), new PropertyMetadata(null));

What we are going to do is put both of these chunks of code together into our action. Below you will find the full code for our ShowMessageBox Action with the additions you need to make beyond the code that is already there more clearly visible:

using System;
using System.Windows.Interactivity;

namespace OpenWindow
{
public class OpenWindow : TargetedTriggerAction<DependencyObject>
{

public string message
{
get{return (string)GetValue(MessageProperty);}
set { SetValue(MessageProperty, value); }
}
public static readonly DependencyProperty MessageProperty = DependencyProperty.Register(“Message”,typeof(string),typeof(OpenWindow), new PropertyMetadata(null));

protected override void Invoke(object o)
{

MessageBox.Show(message);
}
}
}

Step 6:

Now build the solution, and go to the Silverlight solution right click on References and add references that is crated after our Build, here it is OpenWindow.dll

add this reference.

Add reference for OpenWindow

Step 7:

Open  the Mainpage.xaml in Blend by right clicking on page you will see “Open in Expression Blend” select this option.

Open in Expression Blend

Step 8:

Now add a button control and select assets panel > go to Behaviors section, ours behavior will be there

Asstes panel to choose Behavior

now Drag and Drop on to the Button which is on art board,

Drag Behavior

now in side the property panel we can see the properties of our newly created behavior.

Properties Window for Behavior

That’s it now save and run our application and click on Button you will see a popup after that.

Popup

Copying/Exporting XAML from Expression Design to Expression Blend

Expression Design and Expression Blend are from same family of Expression studio,we can work on both for designing our applications, the only difference between them is , in Blend we have all Silverlight/WPF/WP 7 controls but in Expression design we don’t see any controls, but we can create our layout, it contains plenty of options to design our application’s layout.Expression Design is same as Adobe Illustrator including short cut keys.

As i said before we can design our application’s design  by using Expression design, also we can export our design to many formats like

  • XAML Silverlight 3 canvas: Select this option if you want to paste objects that can be animated or manipulated interactively in Silverlight 3 project or Windows Presentation Foundation (WPF) project in Expression Blend.
  • XAML WPF Resource dictionary: Select this option if you want to paste your objects as a collection of resources that you want to use as a resource dictionary in a WPF project in Expression Blend. Resource dictionaries are a collection of custom files or styles that comprise the different design elements of your application. You can add a resource dictionary to any WPF project in Expression Blend, and then apply the brush resources in the resource dictionary to the brush properties of any object in the project.
  • XAML Silverlight 4/WPF canvas: Select this option if you want to paste your objects as a collection of resources that you want to use as a resource dictionary in a WPF project in Expression Blend. Resource dictionaries are a collection of custom files or styles that comprise the different design elements of your application. You can add a resource dictionary to any WPF project in Expression Blend, and then apply the brush resources in the resource dictionary to the brush properties of any object in the project.
  • PNG
  • JPEG
  • GIF
  • TIFF
  • BMP
  • WDP(HD Photo)
  • PSD
  • PDF

In this Article i am going to explain how to Exporting or copy XAML Silverlight 3 canvas and how to add them in Expression Blend.

For this article purpose i have created a sample cloud design in Expression Design.

Design View

Now we will see how we can copy or export xaml to Expression Blend, well there are two ways, i am going to explain both ways.

Copy XAML:

to copy first select the object which you want to use in Blend, and then go to Edit menu > Select  Copy XAML

Copy Xaml from Edit menu

now we have a copy of selected object in our clip board, now open Expression blend and open the page on where you want to use this object, select Edit menu and select Paste or press Ctr+V to paste on your Art board.

Paste Option

Object on Blends's Art board

Export XAML:

to Export XAMl first select the object which you want to use in Blend, and then go to File menu > Select  Export option, Short cut key : Ctr+E,

Export Option

then a popup window opens. there will be many options (don’t worry about the options, i have explained about the options at end of this article) in that popup.

Popup

Go to the Export Properties and select format Combobox, in the available items from combo box select XAML Silverlight 3 Canvas and give the name if you want and change the location of file where you want to save, and then press Export all button.

Explanation of  options available on Export Popup Window:

  • Group by This option only appears if you choose the XAML WPF Resource Dictionary format. You can choose from three options: Document, Layers, and Objects. Each option dictates how the objects in the resource dictionary will be grouped once you paste the copied object into Blend.

Here are the other options that you can adjust:

  • Always name objects Select this option to give a default name to unnamed objects. The name appears in the XAML code.
  • Place grouped objects in a XAML layout container Select to wrap each grouped object in your Expression Design document in a separate canvas layout panel.

The Text options determine how text in your objects will be handled. These options do not appear if you choose the XAML WPF Resource Dictionary format.

  • Editable TextBlock Select this option to keep the text as individual, editable characters, even if the appearance of the text may change. Note that, as the message reads, you may lose some formatting in the conversion to XAML. Also, some fonts are not supported. For a complete list of the supported and unsupported text attributes, see the XAML text support topic in Help.
  • Paths Select this option to convert each character to outlines. You will not be able to edit the text.

Text Options

The Live effects options determine how Design handles the effects that you’ve applied to your objects.

  • Rasterize all Select this option to rasterize your live effects. If you clear this check box, some objects might be exported as solid lines or fills.
  • Convert to XAML effects Exports only those live effects currently supported by XAML code. As you can see in the below graphic, only Drop Shadow and Gaussian Blur will convert to XAML.

Live Effects

That’s all there is to it. Thanks for reading this article.

Managing Implicit styiles in ResourceDictionary with the help of BasedOn in Silverlight.

You have several different buttons that share the same control template and several style properties, but with a small change like the background and foreground color, for this small change it is not recommended to create different styles for each background, so the best way is to use the Based-on styles.Based-on styles are use full for cascading/inheriting styles.

So how can we do this ??

To create a based-on style, you simply need to include a reference to the base style in the derived style’s definition:  BasedOn=”{StaticResource BaseStyle}”

Example:
<!– Base style for all button controls –>
<Style x:Key=”CommonStyle”
TargetType=”Button”>
<Setter Property=”FontSize”
Value=”14″ />
<Setter Property=”FontFamily”
Value=”Verdana” />
<Setter Property=”Foreground”
Value=”DarkBlue” />
</Style>

<!– Base style for all Content controls –>
<Style x:Key=”ContentControlBaseStyle”
TargetType=”ContentControl”
BasedOn=”{StaticResource CommonStyle}”>
<Setter Property=”HorizontalContentAlignment”
Value=”Center” />
<Setter Property=”VerticalContentAlignment”
Value=”Center” />
</Style>

In the above style you can see that there is a commonstyle which contains common properties for all button controls, and if we have to add any special property
to any particular button then we can inherit the base style and add addition style like in the ContenControlBaseStyle in the above example.

Managing Style in ResourceDictionary by using Based-On Style:

we can make implicit styles by removing Key from style, but for some control’s style it won’t work, in this case we can use Based-on property. To do this
first define your control’s style in resourcedictionary and at the bottom of the style (after the closing tag of Style) add the Based on Tag, but don’t remove
x:Key property from the style.
Example:
let say we have a style for button:
<Style x:Key=”ButtonStyle1″
TargetType=”Button”>
<Setter Property=”FontSize”
Value=”14″ />
<Setter Property=”FontFamily”
Value=”Verdana” />
<Setter Property=”Foreground”
Value=”DarkBlue” />
</Style>
<Style TargetType=”Button” BasedOn=”{StaticResource ButtonStyle1}” />

that’s it now we have created implicit style with the help of Based-On , now all buttons of our project will get this style by default without applying any
Style property.The best practice to mange our styles in resource dictionary is to add all Based-on Tags at the bottom(after all styles) of the resource dictionary file
With this there is another advantage we can easily identify that which style is using for which control, and we can easily stop and play styles from single
location that is from based-on tag location,

Example:
If we want to stop dappling ButtonStyle1(from Above) instead of Commenting entire style simply comment <Style TargetType=”Button” BasedOn=”{StaticResource ButtonStyle1}” />
This is one of the good trick.