Question

Is there a way to use a visual XAML designer to author WPF Custom Controls, just like you would with User Controls?

As far as I can see there is nothing like this in Visual Studio 2010 and 2012. I’ve also looked at Expression Blend 4 and none of them seem to support this.

I find this hard to believe as it seems to me like this would be an obvious and necessary feature.

Just to be clear, I’m looking for a XAML editor where I would visually see the result of the XAML as a rendered control as I work with it, exactly like you would when authoring a User Control in Visual Studio 2010.

Answer 1

Here’s one thing that I’ve come up with:

1. In Visual Studio 2010 create a new WPF Custom Control project.
2. Add a new resource dictionary called CustomControl1Dictionary.xaml.
3. Add a new User Control called CustomControl1View.xaml.

4. Change the code in the project like this:

   CustomControl1Dictionary.xaml

   <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                       xmlns:local="clr-namespace:WpfCustomControlLibrary1">
       <Style TargetType="{x:Type local:CustomControl1}">
           <Setter Property="Template">
               <Setter.Value>
                   <ControlTemplate TargetType="{x:Type local:CustomControl1}">
                       <Border Background="{TemplateBinding Background}"
                               BorderBrush="{TemplateBinding BorderBrush}"
                               BorderThickness="{TemplateBinding BorderThickness}">
                           <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30" FontWeight="Bold">This freaking sucks!</TextBlock>
                       </Border>
                   </ControlTemplate>
               </Setter.Value>
           </Setter>
       </Style>    
   </ResourceDictionary>
   

   Themes\Generic.xaml

   <ResourceDictionary
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
       <ResourceDictionary.MergedDictionaries>
           <ResourceDictionary Source="/WpfCustomControlLibrary1;component/CustomControl1Dictionary.xaml" />
       </ResourceDictionary.MergedDictionaries>
   </ResourceDictionary>
   

   CustomControl1View.xaml

   <UserControl x:Class="WpfCustomControlLibrary1.CustomControl1View"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                xmlns:local="clr-namespace:WpfCustomControlLibrary1"
                mc:Ignorable="d" 
                d:DesignHeight="292" d:DesignWidth="786">
       <local:CustomControl1 />
   </UserControl>
   

This lets me open the user control as a pop-up window and I can see the changes to the XAML that I make in the custom control resource dictionary after I build the project and click on the user control designer.