Exposing inner Control properties for binding in WPF

I ended up figuring how how to do this on my own. I'm posting the answer here so that others can see a solution that works, and maybe a WPF guru will come by and show me a better/more elegant way to do this.

So, the answer ended up being #2. Exposing the inner properties turns out to be the right answer. Setting it up is actually pretty easy.. once you know how to do it. There aren't many complete examples of this (that I could find), so hopefully this one will help someone else that runs into this problem.

ComboBoxWithLabel.xaml.cs

The important thing in this file is the use of DependencyProperties. Note that all we're doing right now is just exposing the properties (LabelContent and ItemsSource). The XAML will take care of wiring the internal control's properties to these external properties.

namespace BoundComboBoxExample{    /// <summary>    /// Interaction logic for ComboBoxWithLabel.xaml    /// </summary>    public partial class ComboBoxWithLabel : UserControl    {        // Declare ItemsSource and Register as an Owner of ComboBox.ItemsSource        // the ComboBoxWithLabel.xaml will bind the ComboBox.ItemsSource to this        // property        public IEnumerable ItemsSource        {            get { return (IEnumerable)GetValue(ItemsSourceProperty); }            set { SetValue(ItemsSourceProperty, value); }        }        public static readonly DependencyProperty ItemsSourceProperty =          ComboBox.ItemsSourceProperty.AddOwner(typeof(ComboBoxWithLabel));        // Declare a new LabelContent property that can be bound as well        // The ComboBoxWithLable.xaml will bind the Label's content to this        public string LabelContent        {            get { return (string)GetValue(LabelContentProperty); }            set { SetValue(LabelContentProperty, value); }        }        public static readonly DependencyProperty LabelContentProperty =          DependencyProperty.Register("LabelContent", typeof(string), typeof(ComboBoxWithLabel));              public ComboBoxWithLabel()        {            InitializeComponent();        }    }}

ComboBoxWithLabel.xaml

The XAML is pretty straightforward, with the exception of the bindings on the Label and the ComboBox ItemsSource. I found that the easiest way to get these bindings right is to declare the properties in the .cs file (as above) and then use the VS2010 designer to setup the binding source from the properties pane. Essentially, this is the only way I know of to bind an inner control's properties to the base control. If there's a better way to do it, please let me know.

<UserControl x:Class="BoundComboBoxExample.ComboBoxWithLabel"             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"              mc:Ignorable="d"              d:DesignHeight="28" d:DesignWidth="453" xmlns:my="clr-namespace:BoundComboBoxExample">    <Grid>        <DockPanel LastChildFill="True">            <!-- This will bind the Content property on the label to the 'LabelContent'                  property on this control-->            <Label Content="{Binding Path=LabelContent,                              RelativeSource={RelativeSource FindAncestor,                                              AncestorType=my:ComboBoxWithLabel,                                              AncestorLevel=1}}"                    Width="100"                    HorizontalAlignment="Left"/>            <!-- This will bind the ItemsSource of the ComboBox to this                  control's ItemsSource property -->            <ComboBox ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor,                                     AncestorType=my:ComboBoxWithLabel,                                     AncestorLevel=1},                                     Path=ItemsSource}"></ComboBox>            <!-- you can do the same thing with SelectedValuePath,                  DisplayMemberPath, etc, but this illustrates the technique -->        </DockPanel>                </Grid></UserControl>

MainWindow.xaml

The XAML to use this is not interesting at all.. which is exactly what I wanted. You can set the ItemsSource and the LabelContent via all the standard WPF techniques.

<Window x:Class="BoundComboBoxExample.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="MainWindow" Height="86" Width="464" xmlns:my="clr-namespace:BoundComboBoxExample"        Loaded="Window_Loaded">    <Window.Resources>        <ObjectDataProvider x:Key="LookupValues" />    </Window.Resources>    <Grid>        <my:ComboBoxWithLabel LabelContent="Foo"                              ItemsSource="{Binding Source={StaticResource LookupValues}}"                              HorizontalAlignment="Left"                               Margin="12,12,0,0"                               x:Name="comboBoxWithLabel1"                               VerticalAlignment="Top"                               Height="23"                               Width="418" />    </Grid></Window>

For Completeness Sake, here is the MainWindow.xaml.cs

/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainWindow : Window{    public MainWindow()    {        InitializeComponent();    }    private void Window_Loaded(object sender, RoutedEventArgs e)    {        ((ObjectDataProvider)FindResource("LookupValues")).ObjectInstance =            (from i in Enumerable.Range(0, 5)             select string.Format("Bar {0}", i)).ToArray();    }}

I tried your solution but it fails for me. It does not pass the value over to inner control at all. What I did is declaration of same dependency properties in outer control and bound inner to outer like that:

    // Declare IsReadOnly property and Register as an Owner of TimePicker (base InputBase).IsReadOnly the TimePickerEx.xaml will bind the TimePicker.IsReadOnly to this property    // does not work: public static readonly DependencyProperty IsReadOnlyProperty = InputBase.IsReadOnlyProperty.AddOwner(typeof(TimePickerEx));    public static readonly DependencyProperty IsReadOnlyProperty = DependencyProperty.Register("IsReadOnly", typeof (bool), typeof (TimePickerEx), new PropertyMetadata(default(bool)));    public bool IsReadOnly    {        get { return (bool) GetValue(IsReadOnlyProperty); }        set { SetValue(IsReadOnlyProperty, value); }    }

Than in xaml:

  <UserControl x:Class="CBRControls.TimePickerEx" x:Name="TimePickerExControl"        ...        >      <xctk:TimePicker x:Name="Picker"               IsReadOnly="{Binding ElementName=TimePickerExControl, Path=IsReadOnly}"              ...       />  </UserControl>