Silverlight control template–Part II

As I promised in my last post I will show you how to change the visual appearance of controls that are not content control.

For this explanation I will create round text box.

I will start from the end and show you the complete result:

And the style code:

<Style x:Key="TextBoxStyle" TargetType="TextBox">
          <Setter Property="Template">
              <Setter.Value>
                  <ControlTemplate TargetType="TextBox">
                      <Grid x:Name="RootElement">
                          <Border x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" 
                                  CornerRadius="15" BorderBrush="Black" >
                              <ScrollViewer Height="Auto" 
                                                    x:Name="ContentElement" Width="100"
                                                    BorderThickness="0" 
                                                    IsTabStop="False" 
                                                    Padding="{TemplateBinding Padding}" 
                                                    Margin="5"/>
                          </Border>
                      </Grid>
                  </ControlTemplate>
              </Setter.Value>
          </Setter>
</Style>

At first, it's look exactly the same as the example of the round button. but the big difference is in the bolded text. because text box does not have a content we cannot use content presenter to holds it's content. but every textbox has the place where you can write things, and you need some way to present it in your template!

In my case, The ScrollViewer comes to help. and why? because in the textbox defenition it defines "place holder" for the text area, in order for us to be able replace it with another control. so I defined a ScrollViewer and gave it the name of the part "ContentElement".

What? Where? How?

From msdn:

[TemplatePartAttribute(Name = "ContentElement", Type = typeof(FrameworkElement))]
[TemplateVisualStateAttribute(Name = "InvalidUnfocused", GroupName = "ValidationStates")]
[TemplateVisualStateAttribute(Name = "InvalidFocused", GroupName = "ValidationStates")]
[TemplateVisualStateAttribute(Name = "ReadOnly", GroupName = "CommonStates")]
[TemplateVisualStateAttribute(Name = "Normal", GroupName = "CommonStates")]
[TemplateVisualStateAttribute(Name = "Disabled", GroupName = "CommonStates")]
[TemplateVisualStateAttribute(Name = "Unfocused", GroupName = "FocusStates")]
[TemplateVisualStateAttribute(Name = "Valid", GroupName = "ValidationStates")]
[TemplateVisualStateAttribute(Name = "MouseOver", GroupName = "CommonStates")]
[TemplateVisualStateAttribute(Name = "Focused", GroupName = "FocusStates")]
public class TextBox : Control

The control defines TemplatePart that can be any FrameworkElement and by defining this part it will behave as text holder for the text box. (p.s the state the you see are the visual state that you can define to the control)

Here is the same code with button as ContentElement part of the textbox:

(The text is not the content of the button! you can write whatever you like in runtime)

All silverlight controls defines parts that helps you change the control's appearance without loosing it's behivor! all you need to do is go to the control definition is msdn – and start desigining your controls!

Silverlight rocks!!