XML DataTemplate Binding MultiLayer UserControl

Question

I'm building an app in which I have created a UserControlthat has a second UserControl inside of it.

Here is the first UserControl:

<UserControl x:Class="TasksMonitor.CustomControls.TaskCardBtn"
             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:TasksMonitor.CustomControls"
             mc:Ignorable="d" 
             Name="TaskCardBtnCustomControl"
             d:DesignHeight="300" d:DesignWidth="300">

    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="../CustomButtonsStyles.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <Style TargetType="ToolTip"></Style>
        </ResourceDictionary>
    </UserControl.Resources>

    <Button Click="OnButtonClick" Style="{DynamicResource FlatCntrlBtn}">
        <Grid Width="{Binding ActualWidth, ElementName=TaskCardBtnCustomControl}" VerticalAlignment="Center" HorizontalAlignment="Stretch">

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1"/>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="10"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="35"/>
            </Grid.RowDefinitions>

            <Canvas Margin="4,10,0,0" Grid.Column="1">
                <Ellipse Width="15" Height="15" Fill="{Binding Path=StatusColor, ElementName=TaskCardBtnCustomControl, FallbackValue=#FFFFFF}"/>
            </Canvas>
            <TextBlock  VerticalAlignment="Center" x:Name="BtnTitle" Grid.Column="3" Text="{Binding Path=BtnText, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"/>
        </Grid>
    </Button>
</UserControl>

That UserControl is inside of this UserControl:

<UserControl x:Class="TasksMonitor.CustomControls.TaskCardUserControl"
             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:TasksMonitor"
             xmlns:ut="clr-namespace:TasksMonitor.Utils"
             xmlns:cc="clr-namespace:TasksMonitor.CustomControls"
             Name="TaskCardUC"
             mc:Ignorable="d" 
             Margin="5"
             d:DesignHeight="35" d:DesignWidth="300">

    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary x:Name="Icons" Source="../Resources/Icons.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <ut:StatusToColorConverter x:Key="StatusToColor"/>
        </ResourceDictionary>
    </UserControl.Resources>

    <Grid Width="auto">
        <Grid Background="#2B2B2B">
            <Grid.RowDefinitions>
                <RowDefinition Height="35"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Grid Grid.Row="0">
                <cc:TaskCardBtn StatusColor="{Binding TskStatus, Converter={StaticResource StatusToColor}}" BtnText="{Binding Path=StuffYeah, ElementName=TaskCardUC}" x:Name="ExpandCollapseBtn" BtnClick="GridContentControl_Expand"/>
            </Grid>
            <Grid Grid.Row="1" Background="#2B2B2B" Name="GridContent" >
                <UserControl Margin="10" Loaded="GridContentControl_Loaded">

                </UserControl>
            </Grid>

        </Grid>

    </Grid>
</UserControl>

The second UserControl or Parent UserControl is being used in a DataTemplate:

<Grid.Resources>
    <DataTemplate x:Key="itemTemplate">
        <cc:TaskCardUserControl StuffYeah="{Binding BtnTxt}"/>
    </DataTemplate>
</Grid.Resources>

When I set the Bind to BtnTxt as illustrated in the DataTemplate above it does not work and says that it can't find 'BtnTxt' in object TaskCardUserControl. I feel that this is a binding issue as I have a property from the first UserControl bound to the parent property and then that parent property bound to the DataTemplate. I'm very new to DataTemplates and UserControl in general, would someone be able to point me in the correct direction?

Thanks in advance.

I know, but what is the source of it? What is the ItemsSource? — wingerse
The source is an observablecollection of a public class that I created with 2 string properties and one bool property. I tested it with a button instead of my custom control and it works fine I also tested it with a custom control that only had one layer to it and it work but the second I put a custom control inside of another it breaks. That's why I believe I'm binding something incorrectly — Matthew

Matthew Matthew · Accepted Answer · 2016-03-18T20:34:58

I figured this out...I was setting this.DataContext = this in the code which was actually old code. Once I commented this out everything works as it should. Thanks for the help.

XML DataTemplate Binding MultiLayer UserControl

1 Answers