Click here to Skip to main content
13,503,383 members
Click here to Skip to main content
Add your own
alternative version


5 bookmarked
Posted 6 Apr 2011

How to Design a Custom Control by Editing the Part Template?

Rate this:
Please Sign up or sign in to vote.
This is a continuation to my previous post "How to create a Custom Control in Silverlight".

This is a continuation to my previous post "How to create a Custom Control in Silverlight". In this tutorial, we will discuss the template and modify our basic template to give a better look as per our needs. In this chapter, we will learn about Template Part and how to modify the existing template.

Read more to learn in depth about Custom Controls in Silverlight. This will benefit you not only for Silverlight but for WPF and Windows Phone 7 development too. In the end, don't forget to provide your feedback.

As mentioned, this is a continuation to my previous post "How to create a Custom Control in Silverlight" that I posted yesterday. Here we will learn about Template Parts. Hope this will clear the basic idea behind custom controls. It's not at all hard if you understand it properly.

So, let's begin with the post. Hope you have the previous example intact with you.

Modifying the Template

Open the Generic.xaml page. As shown earlier, you have the following style present in your file. As marked below, you have the ControlTemplate and inside that you have a Border control. We will now modify this template to give a better look to our control with a header title and a content area.


Let us design our control template. You can design as you wish, but for now, just go with my code. Inside the Border control, we will add a Grid panel and divide it to two rows. The first row will have a fixed height and the second row will have a variable height.

Now add a Border control in the first row and name it. Don't forget to use proper names. Generally, a control template should define its child element prefixed with "PART_". In this scenario, we are adding a header panel and hence we will name it "PART_HeaderPanel". Give a background color (hard code it for now, once we implement the custom properties in a later article, we will change it there), and add a TextBlock with white foreground color as a child element to the header panel. Also, provide a text to it.

In the second row, we will add a ContentPresenter which will hold any child element. For the time being, we will not assign any properties to it. Hence, we will see a blank part in the UI. We will add it from the control level, once we implement the proper properties in the next chapter.

Here is our Control Template which you can use as a reference:

<Style TargetType="local:MyControl">
    <Setter Property="Template">
            <ControlTemplate TargetType="local:MyControl">
                <Border Background="{TemplateBinding Background}"

                        BorderBrush="{TemplateBinding BorderBrush}"

                        BorderThickness="{TemplateBinding BorderThickness}">
                            <RowDefinition Height="25"/>
                            <RowDefinition MinHeight="100" 

                        <Border x:Name="PART_HeaderPanel" 


                            <TextBlock x:Name="PART_HeaderText" 



                        <ContentPresenter x:Name="PART_Content" 


Again, we are using hard coded text and color here and will implement them from the Template binding later. Make sure that you properly name your important controls there. We are using Part_HeaderPanel, PART_HeaderText, and PART_Content. We may need them later from the code-behind file, i.e., the control's class file.


Make sure that you have the proper TargetType mentioned for the Style and ControlTemplate. Don't play with this for now.


Let's run our application now and we will see the below UI in the browser window. The Border control became a ChildWindow like control. This is our custom control (as of now).


The blue area is our header panel which has a header title, and the yellow portion is our content area, where we may add child controls later.

What Next?

Hope this series of articles is helping you to understand Custom Control creation in Silverlight. Oh yeah, don't forget that the same thing is applicable for both WPF and Windows Phone 7 too. Here, we discussed a basic level of implementing a control template. More yet to come. In later chapters, we will discuss this in depth.

Follow my blog for the next part of the series. Also find me on Twitter @kunal2383. You will get updates there as well. Thank you so much for reading my articles/tutorials. Happy coding.

Also, don't forget to leave your comment here. Suggestions are welcome.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Kunal Chowdhury «IN»
Software Developer (Senior)
India India
Kunal Chowdhury is a Microsoft "Windows Platform Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik Developer Expert, Nokia Developer Champion, Windows 10 Champion, Microsoft Rockstar, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.

He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows Store (WinRT) app development. He posts his findings, articles, tutorials in his technical blog and CodeProject.

Book authored:

Connect with me on:

My CodeProject Awards/Prizes:

You may also be interested in...


Comments and Discussions

QuestionCaption = Başlık dont write why? Pin
rasih23-Nov-12 1:39
memberrasih23-Nov-12 1:39 
GeneralMy vote of 5 Pin
Gerrard5758-Jun-12 11:04
memberGerrard5758-Jun-12 11:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.180417.1 | Last Updated 6 Apr 2011
Article Copyright 2011 by Kunal Chowdhury «IN»
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid