When to use a templated control over a UserControl?

Question

I was looking some tutorials on how to create custom controls in WinRT, and I have a question.

Let's say I want to create a simple control that contains some stuff, like a Grid with an image on the left and a couple of TextBlocks on the right.

I mean, something simple like:

<Grid Height="100">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.3*"/>
        <ColumnDefinition Width="0.7*"/>
    </Grid.ColumnDefinitions>
    <Image Source"/Assets/someRandomImage.png"/>
    <StackPanel Grid.Column="1"
                VerticalAlignment="Center">
        <TextBlock Text="Some text"
                   Margin="10,0,10,0"
                   FontSize="24"
                   FontWeight="SemiLight"
                   TextTrimming="CharacterEllipsis"/>
        <TextBlock Text="Some random description..."
                   Margin="10,5,10,0"
                   FontSize="18"
                   FontWeight="Light"
                   Foreground="Gray"
                   TextWrapping="Wrap"
                   TextTrimming="CharacterEllipsis"/>
    </StackPanel>
</Grid>

I would create a UserControl with this content, so I'd be able to see it in the XAML Designer while I'm working on its UI, and I'd add all the Properties and DependencyProperties in the UserControl code behind.

Then I saw that another approach would be to use a Template control, so I'd have to create a class that inherits from the Control class, then use the above XAML code as a template and apply it to the custom control and add all the rest of the logic there.

Of course, I'd also have to add the x:Name property to some those UIElements inside the control to be able to interact with them, but you get the idea.

I was wondering, is it ok to use either one of these two methods, or is better to use one in particular, and why? Also, I like using UserControls since I can see them in the Designer window, and instead I wouldn't be able to do that with a Template, I'd have to run the app and create an instance of the control to see what it actually looks like.

Thanks for your help, I think I'm not the only one with this doubt, so I hope this question will help others as well :D

Sergio

Answer 1

TLDR

A custom (templated) control allows an app to use the Template property to replace the control’s internal element tree. If you don’t need/want your control to have that re-templating feature, then use a UserControl as it’s easier.

UserControl

• A UserControl is a lot easier to create with Visual Studio or Blend giving you a decent design view support.
• You typically use it to compose a view in your app from multiple controls.'
• It works best for full screen or full-window views or if you have complex views that you want to break apart in smaller, possibly reusable code chunks.

• Such view is often backed with a corresponding view model if you choose to adopt the MVVM pattern.

• One problem with a UserControl is that while you can reuse it in multiple places in your app - it is difficult to make slight adjustments to the way it looks or behave in different places in your app since it doesn't use templates and the UI tree is loaded in the constructor.

• It is typically only reusable within the scope of the single app.

Custom control

• A custom control or in some cases templated control is best suited for a small chunk of UI that serves a single purpose - it visualizes a single, specific type of information.
• A templated control can have its template changed to adjust the visuals for particular use case. It allows you to have a button that looks like a default button in one app, a rounded one in another and one made solely up of images in yet another. It makes it more reusable which makes sense if you make more than one app or want to share your awesome control with the world.
• A well written custom control is usually reusable in more than one app since it doesn't depend on business logic of particular app.
• It typically derives from an existing platform control, such as Button, ToggleButton, ContentControl, Slider, TextBox or ListView to add to or override its logic. There are cases though when it makes sense to make one from scratch, subclassing "virtually abstract" Control, ItemsControl, RangeBase, Shape or even FrameworkElement (the last two are not templated).
• The visual tree of a templated control is loaded when the template is loaded which might occur as late as when the control's visibility is first changed from Collapsed to Visible which allows to defer loading parts of your UI to get performance improvements.
• Because the control template is only loaded once, these are ideal for use inside any ItemsControl DataTemplate (lists, gridviews, etc). If you were to use a UserControl, your performance could really suffer because the UserControl XAML is parsed over and over again.

Custom panel

A custom panel is yet another type of UI element that allows to customize how it lays out its children.