Basics of Styling

Styles are extremely important because they allow developers to control the look and layout of controls across their application. By using styles you can simply change the style declaration and all controls in the application are updated automatically. This is a much faster alternative to updating each and every control in your application individually.

Here we will demonstrate a simple example for creating style, in a Silverlight Application.  However with same syntax and steps we can apply styles in WPF Applications and XBAP Applications.

Step 1: Create a new Silverlight Project

Start Visual Studio 2008. Create a Silverlight Application project. Learn how to create Silverlight Application here: Setting up Silverlight Project Environment.

For WPF Applications and XBAP Applications:

For WPF Application create new WPF Project. Learn how to create WPF Application here: Setting up WPF Project Environment.

For XBAP Application create new XBAP Project. Learn how to create XBAP Application here: Setting up XBAP Project Environment.

Step 2: Go to App.xaml

We will create our style in App.xaml. This is created by Visual Studio. The default content of App.xaml file is shown below.

 App.xaml window will look like this:

For WPF Applications and XBAP Applications: Do exactly the same.

Step 3: Write code for style

In Visifire, styles are declared within the controls <UserControl.Resources> tags. If you want to make them global to all controls you can put them in your App.xaml file within the <Application.Resources> tags.

To illustrate this point let's create a global style on how we will display Title Title element is the title for the chart. This is also used as an attribute for Horizontal Axis, Vertical Axis, Legend to set their individual titles.  throughout our sample application, the added part of code will be shown in blue:

For the XAML above:

1. xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts", in this line we are creating name space "vc:" for our chart and adding reference to  SLVisifire.Charts assembly.

2. Style - Declare each style within <Style></Style> tags in the <Application.Resources> or <UserControl.Resources> section.

3. Key - Set the name of the style (via x:Key="") so we can reference it from our controls. In our case we set x:Key="TitleStyle"

4. TargetType -The name of the FrameworkElement you are targeting. The syntax to define a TargetType is "vc:Element",where Element can be any chart element.  In our case above we are targeting a "vc:Title".

5. Setter - Each property we want to set for this style is declared as a Setter. You can set multiple setters per style. For example, FontSize, FontFamily, etc.

After adding above code to App.xaml, your App.xaml window will look like this:

For WPF Applications and XBAP applications:

All the steps are same except:

1. When we define our name space we will add reference to WPFVisifire.Charts assembly.

2. The format for TargetType is different. It will be  TargetType="{ x:Type vc:Title}".

So for WPF Applications and XBAP applications, code will look like this:

and App.xaml window will look as follows:

Step 4:  Adding XAML to Page.xaml

Here we will generate our chart using XAML, to create XAML:

1. Go to Chart Designer.

2. (Optional)Update required values in Chart Designer.

3. Make sure Silverlight radio button, at bottom left corner is ON.

4. Click on View XAML, copy the XAML in popup window

5. Paste copied XAML inside <Grid x:Name="LayoutRoot" Background="White"></Grid>  tag.

Note: To learn to create XAML yourself you can also see Create Chart XAML from Data

After that, Page.xaml will look like this:

Press F5 to run the chart you will see the following chart:

For WPF Applications and XBAP Applications:

All the steps are same except:

Before Clicking View XAML button, make sure WPF radio button is ON and Silverlight radio button is OFF,as shown below:

This will add reference to WPFVisifire.Charts assembly in XAML.

For WPF Application paste XAML in Window1.xaml and for XBAP Application paste XAML in Page1.xaml

Following screen shot will show how Window1.xaml will look in WPF Application. The difference from Silverlight Application will be highlighted in red rectangle:

Step 5: Add more Titles

Next, the following XAML below shows how to create multiple Titles with the same style applied to it.

In above XAML we are creating 3 Title Title element is the title for the chart. This is also used as an attribute for Horizontal Axis, Vertical Axis, Legend to set their individual titles. elements.

x:Name will used to identify particular element

Text: Simple title text.

Style="{StaticResource TitleStyle}" is applying our style "TitleStyle" to Title Title element is the title for the chart. This is also used as an attribute for Horizontal Axis, Vertical Axis, Legend to set their individual titles. Element.

Add the above XAML into Page.xaml, as shown in following screen shot, highlighted in red rectangle:

Press F5 to run the chart:

As you can see 3 new Titles are added at top of chart with style defined by style, "TitleStyle".

For WPF Applications and XBAP Applications: do exactly the same

Step 6: Add another Property in Style

If we want to add or change any property for these Titles all we have to do is change it in the style Setter rather than in each individual Title Title element is the title for the chart. This is also used as an attribute for Horizontal Axis, Vertical Axis, Legend to set their individual titles..

For Example in App.xaml we made the following changes (Highlighted in blue) in style, "TitleStyle"

Here, we have added another property, "FontColor" and set it as "Blue"

Now,Press F5 to run the chart:

As you can see all the 3 Titles are turned to blue.

For WPF Applications and XBAP Applications: Do exactly the same

So you can add and attach as many custom styles as you want in your application to make it look good.