.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Explicit and Implicit Styling in Silverlight

Posted By:Manas Patnaik       Posted Date: January 06, 2011    Points: 75    Category: Silverlight    URL: http://www.dotnetspark.com  

Introduction to Styling option in silverlight .
 

We all are aware of CSS and user control concept in Asp.Net which is used for styling the webpage .In line with similar concept Silverlight provides option to use predefined look to  controls.While Styles used for applying simple make over to controls ,Templates are used for complex styling with a option to change complete visual representation.Generally Styles are used for a consistent look through out the application and control templates are used for visual improvement of controls.

In this post we will create a style and will attach to a control.

Defining A style

Styles are set common properties that can be reusable by various other instances.In Silverlight styles are defined in resource file can be applied to a control against its Style property.
image

Now suppose we need a like Button style for our application.The first step we need to do is to create a Style in resource file.Here in this example i will add a style to Application.Resource tag under app.xaml file.The code bellow shows a style named MyCustomStyleButton with TargetType of Button ,Target Type will ensure that this style can be used for  specific type of control only.

Lets Create a Style for Button

  1. <Application.Resources>
  2. <Style x:Name="MyCustomeStyledButton" TargetType="Button">
  3. Style>
  4. Application.Resources>

Now we will add properties to this style using a Setter property collection.

  1. <Application.Resources>
  2. <Style x:Name="MyCustomeStyledButton" TargetType="Button">
  3. <Setter Property="Background" Value="AliceBlue"/>
  4. <Setter Property="Height" Value="28?/>
  5. <Setter Property="Width" Value="125?/>
  6. <Setter Property="VerticalAlignment" Value="Center"/>
  7. Style>
  8. Application.Resources>

Now for complex properties we can define style as follows.

  1. <Setter Property="BorderBrush">
  2. <Setter.Value>
  3. <LinearGradientBrush EndPoint="1,0.5? StartPoint="0,0.5?>
  4. <GradientStop Color="Red" Offset="0? />
  5. <GradientStop Color="#FF792525? Offset="1? />
  6. <GradientStop Color="#FF351010? Offset="0.439? />
  7. LinearGradientBrush>
  8. Setter.Value>
  9. Setter>

So overall the button style is ready and ready to be implemented for button type controls.

  1. <Style x:Name="MyCustomeStyledButton" TargetType="Button" >
  2. <Setter Property="Foreground" Value="Red"/>
  3. <Setter Property="Height" Value="28?/>
  4. <Setter Property="Width" Value="125?/>
  5. <Setter Property="VerticalAlignment" Value="Center"/>
  6. <Setter Property="FontWeight" Value="ExtraBold"/>
  7. <Setter Property="BorderBrush">
  8. <Setter.Value>
  9. <LinearGradientBrush EndPoint="1,0.5? StartPoint="0,0.5?>
  10. <GradientStop Color="Red" Offset="0? />
  11. <GradientStop Color="#FF792525? Offset="1? />
  12. <GradientStop Color="#FF351010? Offset="0.439? />
  13. LinearGradientBrush>
  14. Setter.Value>
  15. Setter>
  16. Style>

Applying style to a Button

Now , we need to attach the custom style to our button .Which can be done by adding static resource to the button style property.

Code Snippet
  1. <Button Content="Submit"
  2. Margin="51,48,0,0?
  3. Name="button1?
  4. Style="{StaticResource MyCustomeStyledButton}"
  5. >

And our button will look like as defined in styleimage

Explicit and Implicit Styling

As of example , above is a Explicit method of applying style to  control , Where the controls are assigned with style names .but for if we want same button look through out application as a default style then we need to follow the implicit way of styling .

For implicit style we will remove the name attribute from the XAML .So then the the style is applicable to all control of specified Target Type.

implicit Style Definition

Code Snippet
  1. <Style TargetType="Button" >
  2. <Setter Property="Foreground" Value="Red"/>
  3. <Setter Property="Height" Value="28?/>
  4. <Setter Property="Width" Value="125?/>
  5. <Setter Property="VerticalAlignment" Value="Center"/>
  6. <Setter Property="FontWeight" Value="ExtraBold"/>
  7. <Setter Property="BorderBrush">
  8. <Setter.Value>
  9. <LinearGradientBrush EndPoint="1,0.5? StartPoint="0,0.5?>
  10. <GradientStop Color="Red" Offset="0? />
  11. <GradientStop Color="#FF792525? Offset="1? />
  12. <GradientStop Color="#FF351010? Offset="0.439? />
  13. LinearGradientBrush>
  14. Setter.Value>
  15. Setter>
  16. Style>

Conclusion

However styles usually maintains the consistency and also minimize the redundant code in xaml file tremendously. In our next post we will see how to change the look of control using control templates.


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend