UWP User Controls expose internal StackPanel - controls

Question

I'm relatively new to UWP being a developer used to using Windows forms.
In windows forms what I'm attempting to do I would do quite easily through form inheritance.
UWP seems to have no form of layout inheritance, it appears that you have to design a UserControl to achieve this and then place it on the page and fill the page with the control.
I have a control which contains a 2 column grid. In the first column I have placed a StackPanel and at the moment the second column is empty.
<UserControl x:Name="userControl"
x:Class="App1.BaseLayoutControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="11*"/>
<ColumnDefinition Width="29*"/>
</Grid.ColumnDefinitions>
<StackPanel Margin="0" Background="#FF0B1E70"/>
</Grid>
</UserControl>
And the code:
using System.ComponentModel;
using System.Runtime.CompilerServices;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using App1.Annotations;
// The User Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234236
namespace App1
{
public sealed partial class BaseLayoutControl : INotifyPropertyChanged
{
public BaseLayoutControl()
{
InitializeComponent();
}
public StackPanel LeftStackPanel
{
get { return ( StackPanel ) GetValue( LeftStackPanelProperty ); }
set
{
SetValue( LeftStackPanelProperty, value );
OnPropertyChanged( nameof( LeftStackPanel ) );
}
}
// Using a DependencyProperty as the backing store for MyProperty. This enables animation, styling, binding, etc...
public static readonly DependencyProperty LeftStackPanelProperty =
DependencyProperty.Register( "LeftStackPanel", typeof( StackPanel ), typeof( BaseLayoutControl ), null );
public event PropertyChangedEventHandler PropertyChanged;
[ NotifyPropertyChangedInvocator ]
private void OnPropertyChanged( [ CallerMemberName ] string propertyName = null )
{
PropertyChanged?.Invoke( this, new PropertyChangedEventArgs( propertyName ) );
}
}
}
Now what I want to do is expose the StackPanel as a property "LeftStackPanel" and also at design time where I have placed the control on the page I would like to be able to drag and drop Buttons, CheckBoxes, Text etc into the StackPanel inside the control. Also I would like to expose the second unused grid column so that items can also be place in it.
All the examples I can find seem to only deal with simple object types like ints and strings.
Any help appreciated.
Terry

Answer 1

This is a longtime challenge when migrating from WinForms to XAML.
The short answer is that you should be looking at creating a CustomControl and not a UserControl.
A UserControl is a self-contained UI element that you provide data and it displays it.
When you need to customize not only the information displayed but also the way you display it, you need to use a CustomControl. That will enable the scenarios that you are trying to achieve in your case.
Here is a very good visual tutorial on how to author your first CustomControl. Also, for mode details on the differences between User and Custom control check this post. In fact there are many articles and tutorials out there on this topic. Most of them are from the WPF days, but everything still applies in UWP.