Skip Navigation LinksHome / Search


Results Per Page

Found 2 results for control skin.
Date between: <not defined> and <not defined>
Search in: News , Articles , Tips , Shows , Showcase , Books

Order by Publish Date   Ascending Title   Rating  

  • Tip: What is the difference between styling and skinning

    0 comments  /  posted by  Ivan Dragoev  on  Nov 14, 2008 (more than a year ago)
    Styling control means to apply to the control's properties predefined in the style values. Styling deals mainly with properties like Foreground, BackgroundFontStyle and FontSize, etc.
    Skinning, on the other hand, allows you to build your own presentation for that control by defining control template. Thus, you are able to completely replace the standard presentation with another, which includes more visual elements, animations and other effects.
    That's it!

  • 0 comments  /  posted by  Ivan Dragoev  on  Nov 14, 2008 (more than a year ago)

    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" >
      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!

Help us make SilverlightShow even better and win a free t-shirt. Whether you'd like to suggest a change in the structure, content organization, section layout or any other aspect of SilverlightShow appearance - we'd love to hear from you! Need a material (article, tutorial, or other) on a specific topic? Let us know and SilverlightShow content authors will work to have that prepared for you. (hide this)