WEBfactory 2010

Open Microsoft Visual Studio 2013 and create a new Silverlight Class Library project. We will name it SilverlightControlLibrary (the name can be different but keep in mind that it will be used further in the code).

In the new solution, delete the Class1.cs file which was automatically created and add a new Silverlight Templated Control. We will name it CustomControl (the name can be different but keep in mind that it will be used further in the code).

Open the Generic.xaml from the Themes folder available in the Solution Explorer. The user interface is already set up for us, so we only need to add the desired elements.

Add a Grid element inside the existing Border in the Generic.xaml. Every element will be placed inside a grid row, so the grid must have three rows defined. Set the column's width to 100 pixels and the rows height to 100 pixels, so we can contain the UI elements in a manageable size.

<Grid>
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="100" />
	</Grid.ColumnDefinitions>
	<Grid.RowDefinitions>
		<RowDefinition Height="30" />
		<RowDefinition Height="30" />
		<RowDefinition Height="30" />
	</Grid.RowDefinitions>
</Grid>

Now add the first element, the TextBlock, on the first row of the grid. Name it Label. The element's name will allow us to reference it later in code.

<TextBlock x:Name="Value"
	Grid.Row="0"
	Grid.Column="0" />

Add the TextBox element on the second row of the grid and name it Textbox.

<TextBox x:Name="Input"
	Grid.Row="1"
	Grid.Column="0" />

Add the final element, the Button, on the third row of the grid. Name it Button and add a meaningful text content.

<Button x:Name="Button"
	Grid.Row="2"
	Grid.Column="0"
	Content="Submit Value" />

Open Blend for Visual Studio 2013 and create a new Silverlight Control Library project. We will name it SilverlightControlLibrary (the name can be different but keep in mind that it will be used further in the code).

In the new solution, delete the MainControl.xaml file which was automatically created. Add a new folder name Themes and inside it, add a new Resource Dictionary named Generic.

Next, add a new Class to the project, named CustomControl (the name can be different but keep in mind that it will be used further in the code) to the project. This class will be linked to the resource dictionary created above.

To be able to apply the Style that we will create in the Generic.xaml as a Template, we need to make our new class inherit the Control base class. Inside the CustomControl.cs, add the inheritance to the public CustomControl class.

public class CustomControl : Control

Next we need to connect the Generic.xaml resource dictionary to the newly created class by declaring the same namespace in the Generic.xaml as in the CustomControl class. Open the Generic.xaml in code view and add the common namespace.

xmlns:local="clr-namespace:SilverlightControlLibrary"

Inside the resource dictionary, we need to create the styling structure that will hold our UI elements.

<Style TargetType="local:CustomControl">
	<Setter Property="Template">
       	<Setter.Value>
			<ControlTemplate TargetType="local:CustomControl">

			</ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Now we need to switch the Generic.xaml to Design view. Upon switching, Blend will tell you that the Generic.xaml cannot be edited in the Design view. To make the Generic.xaml editable in Design view, follow the next steps:

Click the Resources tab at the bottom of the Resources panel, expand the Generic.xaml node and click on the button corresponding to [CustomControl default] resource dictionary.

We need to edit the Style of the resource dictionary, so head into the Objects and Timeline panel and right-click the Style object. Select Edit Template > Edit Current.

Now we can edit the Generic.xaml template and add the UI elements.

Inside the editable Template, add a Border element to define our control's area (the Border is directly available in the Toolbox, under the Grid element - select it and double-click the button to place a default Border) and set it's size to auto.

Inside the Border element, add a Grid container for the UI elements (the Grid is directly available in the Toolbox - double-click the button to place a default Grid) and set it's size to auto.

In the Grid's Properties panel, expand the Layout properties (using the arrow at the bottom of the Layout section) and use the ColumnDefinitions and RowDefinitions collection editors to define one column and three rows to house the UI elements. Set the column's width to 100 pixels and each row's height to 30 pixels. This will help us contain the UI elements at a manageable size.

Now it's time to populate the Grid with the UI elements. Add a TextBlock in the first row, a TextBox in the second row and a Button in the third row. You can use the Toolbox to add the three elements and the Layout properties to place them in the appropriate rows (Row and Column properties) and scale them to fit the available space (Width/Height on Auto and Alignment to Stretch).

The layout of our custom control should look like this:

The next step is to program the control, so follow this link to get started: Programming the Silverlight Custom Control