(X) Hide this
    • Login
    • Join
      • Generate New Image
        By clicking 'Register' you accept the terms of use .
        Login with Facebook
        Why Register?

Tip: What is control skinning?

Submit Article
(2 votes)
Ivan Dragoev
>
Ivan Dragoev
Joined Oct 25, 2007
Articles:   7
Comments:   9
More Articles
0 comments   /   posted on Nov 14, 2008
Tags:   styling , templating , ivan-dragoev
Categories:   Design

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!


Subscribe

Comments

No comments

Add Comment

Login to comment:
  *      *       
Login with Facebook
Forgotten Password? Registration Why register?