CustomControl中的TabControl加载时未选中任何选项卡

Question

I wrote a CustomControl that supports direct content. When I nest a TabControl in it, there's no tab item selected on launch. It happens only when using ItemsSource. Anyone know what's wrong?

Sample implementation

In MainWindow.xaml:

<Window.DataContext>
    <local:VM/>
</Window.DataContext>
<Grid Margin="20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <TabControl ItemsSource="{Binding Data}"/>
    <local:CustomControl1 Grid.Column="1">
        <TabControl ItemsSource="{Binding Data}" />
    </local:CustomControl1>
</Grid>

VM.cs

class VM
{
    public List<int> Data { get; set; } = new List<int>{ 1, 2, 3, 4 };
}

CustomControl1:

[ContentProperty("Content")]
public class CustomControl1 : Control
{
    static CustomControl1()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomControl1), new FrameworkPropertyMetadata(typeof(CustomControl1)));
    }

    public FrameworkElement Content
    {
        get { return (FrameworkElement)GetValue(ContentProperty); }
        set { SetValue(ContentProperty, value); }
    }
    public static readonly DependencyProperty ContentProperty =
        DependencyProperty.Register("Content", typeof(FrameworkElement), typeof(CustomControl1), new PropertyMetadata(null));
}

In Generic.xaml:

<Style TargetType="{x:Type local:CustomControl1}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CustomControl1}">
                <ContentPresenter/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

After some time of poking around I've found a solution, but I am not sure of the exact reasons behind this behavior.

I've modified your example and compared the behavior when the TabControl was put inside a ContentControl and a CustomControl1 . Predictably, the first tab in case of ContentControl was selected, but in case of CustomControl1 it was not. After inspecting the ContentControl source code (in particular the ContentControl.OnContentChanged method) we can see that what it does is it sets its content as its logical child.

I then confirmed that setting the TabControl as the CustomControl1 's logical child does the trick (but I'm not sure why, as I mentioned). So the minimal solution to your problem is to handle the logical relation between your control and its content in the property changed callback, eg:

public static readonly DependencyProperty ContentProperty =
    DependencyProperty.Register(
        "Content",
        typeof(FrameworkElement),
        typeof(CustomControl1),
        new PropertyMetadata(null)
        {
            PropertyChangedCallback = OnContentChanged
        });

private static void OnContentChanged(DependencyObject d,
    DependencyPropertyChangedEventArgs e)
{
    var control = (CustomControl1)d;
    if (e.OldValue != null)
        control.RemoveLogicalChild(e.OldValue);
    if (e.NewValue != null)
        control.AddLogicalChild(e.NewValue);
}

Note though that this lacks some checks (eg if new value already does have a logical parent or the control is a part of a template), so you might want to simply copy the code from the referenced source, or fallback to deriving your control from ContentControl altogether.