Recommended

Skip Navigation LinksHome / Search

Search

 
Results Per Page

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

Order by Publish Date   Ascending |  Title   |  Rating  

  • Skinning and Styling Silverlight Controls

    0 comments  /  posted by  Silverlight Show  on  Nov 11, 2009 (7 months ago)
    Tags: Styling , Skinning , Controls , Expression Blend , Silverlight 3
    In this article Vincent Leung demonstrates how to build custom template for Silverlight 3 TabControl.

    To change a look of Silverlight controls the way that you want it to, you can style it by modifying default template of the control. Silverlight controls have XAML based templates that can easily be changed and saved as new template. You can change the look for entire control without writing any line of code in C#. It can be done completely in XAML. However if you want to do minor modifications to the look of control such as change background color or default font you can do it directly in XAML without need to change default template of the control.



  • Skins for WPF and Silverlight

    0 comments  /  posted by  Silverlight Show  on  Oct 05, 2009 (8 months ago)
    Tags: Skinning , User Experiences , Expression Blend , WPF
    Jared Bienz has another screencast on skinning WPF and Silverlight controls.

    In this screencast we'll cover the topics needed to create custom skins for WPF and Silverlight. Topics include Resources, Templates, Styles and Dictionaries, and we'll see how each builds upon the other to provide a very rich and flexible skinning system on these platforms.

  • Tip: What is control skinning?

    0 comments  /  posted by  Ivan Dragoev  on  Nov 14, 2008 (more than a year ago)
    Tags: Silverlight , Skinning , Control Skin

    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!


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)