Controls in Silverlight.(Part1… Content Controls)

Silverlight provides  a standard set of controls to let you build your application user interface.

The standard controls include:
CheckBox,RadioButton,Button,ScrollViewer,TextBox,ProgressBar,HyperlinkButton,ListBox,
PasswordBox,ComboBox,Slider..etc..

Built-in Controls in Silverlight

Additional controls are available at http://www.codeplex.com/Silverlight.

Most of times we want to customize the appearance of a control . In this post we shall see how
to customize a Silverlight control and make your own custom control. Follow these simple steps to get started.

  • Determine whether your control is a ContentControl or ItemsControl by looking at the control base class.
  • ContentControl : It has two important properties Content and Template. The Content property specifies the unique content for each instance of the control. The Template property defines a common appearance to all the instances of the controls.
  • ItemsControl : This control is used to customize the appearance of the list controls where the content is more than one item.The Content and Template properties are extended to set the content and appearance of each item.

Case 1) Working with Content Controls

To create a simple content control,you have to set the Template property which defines the appearance .
To add the control’s content into the template ,you need another container called ContentPresenter.Else your content will not be visible in the template.

The code below creates two content controls , the first one is a simple content control,with no elements.
The second content control includes a textbox as it’s content.So the template defined now applies to textbox and you get a  customized textbox.

ContentControl1

Here is the code.

<Grid x:Name=”LayoutRoot” Background=”White” Width=”400″ Height=”380″>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<!–Creating simple content control–>
<ContentControl Grid.Row=”0″ x:Name=”cstControl1″>
<ContentControl.Template>
<ControlTemplate>
<Border BorderBrush=”Chocolate” BorderThickness=”30″
CornerRadius=”10″ >
<ContentPresenter Content=”Hello”/>
</Border>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>

<!–Customizing the appearance of textbox–>
<ContentControl Grid.Row=”1″ x:Name=”cstTextControl1″ Width=”300″ Height=”100″>
<ContentControl.Content>
<TextBox Text=”Custom TextBox” Foreground=”DarkMagenta” />
</ContentControl.Content>
<ContentControl.Template>
<ControlTemplate>
<Border BorderThickness=”20″ CornerRadius=”10″ >
<Border.BorderBrush>
<LinearGradientBrush >
<GradientStop Color=”BlueViolet” Offset=”0″></GradientStop>
<GradientStop Color=”BlanchedAlmond” Offset=”1″></GradientStop>
</LinearGradientBrush>
</Border.BorderBrush>
<ContentPresenter/>
</Border>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
</Grid>

Advertisements

One Response to “Controls in Silverlight.(Part1… Content Controls)”

  1. Controls in Silverlight(Content Controls ..Part2) « Learning made easy Says:

    […] Controls in Silverlight.(Part1… Content Controls) […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s