Skip Navigation LinksHome / Tips / View Tip

Tip: What is control skinning?

+ Add to SilverlightShow Favorites
0 comments   /   posted by Ivan Dragoev on Nov 14, 2008
(0 votes)
Tags: Silverlight , Skinning , Control Skin
Categories: Styles and Templates

Skinning is a way to completely replace the look of your control. In order to do that, you have to define new template and set it to the Control.Template property.

Building your own template allows you to make the control look and feel in the way you like. You might add new elements or remove the existing, you can also edit the visual states and transitions.

In the example the button shape is changed. All animations are removed for simplicity.

   1: <UserControl.Resources>
   2:     <Style x:Key="myButtonTemplate" TargetType="Button">
   3:         <Setter Property="Template">
   4:             <Setter.Value>
   5:                 <ControlTemplate TargetType="Button">
   6:                     <Grid>
   7:                         <Path Margin="2"  x:Name="BackgroundGradient" Stretch="Fill" Stroke="#FF94C2D8" 
   8:                               StrokeThickness="2" Opacity="1"
   9:                               Data="M44,-135 L137,-136 L163.00137,-114.43846 L138.14738,-98.33696 L40.513062,-96.888382 L65.010727,-116.44418 z" >
  10:                               
  11:                             <Path.Fill>
  12:                                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
  13:                                     <GradientStop Color="#FFA3AEB9" Offset="0"/>
  14:                                     <GradientStop Color="#FF8399A9" Offset="0.375"/>
  15:                                     <GradientStop Color="#FF718597" Offset="0.375"/>
  16:                                     <GradientStop Color="#FF617584" Offset="1"/>
  17:                                 </LinearGradientBrush>
  18:                             </Path.Fill>
  19:                         </Path>
  20:                         <ContentPresenter
  21:                             x:Name="contentPresenter"
  22:                             Content="{TemplateBinding Content}"
  23:                             ContentTemplate="{TemplateBinding ContentTemplate}"
  24:                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
  25:                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
  26:                             Margin="{TemplateBinding Padding}"/>
  27:                     </Grid>
  28:                 </ControlTemplate>
  29:             </Setter.Value>
  30:         </Setter>
  31:     </Style>
  32: </UserControl.Resources>

That's it!

Share


Comments

Comments RSS RSS
No comments

Add Comment

 
 

   
 
 
  
   
Please add 2 and 2 and type the answer here:

Join the free SilverlightShow webcast 'Running Silverlight Outside the Browser and with Elevated Trust'. Sept 7th, 8 am - 9 am PDT.
In this live session Chris Anderson will cover configuring and debugging OOB mode, toast notifications, elevated trust, direct file access and much more.
Learn more | Register | See more webinars (hide this)