Data binding data template with a user control

30 Aug 2022, 21:05

I have a data binding question. I have an ItemsControl that is bound to an observable collection of items. My data template has been working fine, but it started to get really big.. So I decided to try to move the contents of the data template into a user control.

Unfortunately, this seems like it breaks all the data bindings. For some reason, the data bindings only work if they are directly inside the data template.

	<UserControl.Resources>
		<ResourceDictionary>
			<DataTemplate DataType="{x:Type local:TeamInventoryItem}">
				<StackPanel>
					<!-- this doesn't work - the view shows up but all the data bindings are broken -->
					<local:TeamInventoryItemView DataContext="{Binding}" /> 
					<!-- this works -->
					<TextBlock x:Name="KeyBinding" Text="{Binding Name}" FontFamily="{StaticResource Font.Family.LeMondeSans}" FontWeight="Bold" FontSize="12" Foreground="#FF00FF" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Bottom" Padding="4,1"/>
				</StackPanel>
			</DataTemplate>
		</ResourceDictionary>
	</UserControl.Resources>

Is there a way to fix this?

thanks,
sam

31 Aug 2022, 21:11

Hi Sam,

It should not be necessary to do DataContext="{Binding}" because the current context is already inherited down the tree.
If you connect the Inspector tool you can see the type of the ViewModel attached as DataContext inside the user control elements for any bound property. Could you check if the datacontext type is correct?

This scenario is very common and should work fine.

01 Sep 2022, 00:51

Ah, that's great to hear that this should be supported! It felt like I was doing something stupid!

I attempted to remove the "DataContext="{Binding}"" syntax, but it still isn't working. I see the TeamInventoryItemView being displayed, but none of the bindings appear to be working. This also isn't working in the Blend designer, so I assume I'm doing something stupid with my XAML.

I'm not sure if my gui inspector is old, but it doesn't show me any value for "DataContext". It just says "Local" and the box next to that is empty. Next to that there is an option to "clear local value". I attempted to change it to inherited but it didn't do anything. (I have a screen shot of this, but I'm not sure how to attach an image to this post haha).

Just for completeness, this is what my ItemsControl looks like.. Maybe I'm doing something wrong here?

<ItemsControl
            x:Name="Items_Control" 
            ItemsSource="{Binding InventoryItems}" 
            HorizontalAlignment="Center" 
            VerticalAlignment="Center">
			<ItemsControl.ItemsPanel>
				<ItemsPanelTemplate>
					<StackPanel Orientation="Horizontal"/>
				</ItemsPanelTemplate>
			</ItemsControl.ItemsPanel>
</ItemsControl>

thanks,
sam

01 Sep 2022, 11:40

Hi Sam, I just did a small test to verify this scenario is working, you can find it in the next link to compare it with your xaml: UCB.unitypackage

You said that the bindings in the DataTemplate itself are working, so if you inspect a bound property there (for example the "KeyBinding" Text) in the Inspector (I'll email you a link of the latest version just in case), it should show you a "TeamInventoryItem" as "DataContext". If you select the UserControl in the DataTemplate, it should also show you a "TeamInventoryItem" in the "DataContext" property. If that is correct you can go down the tree of elements of the UserControl to see where the DataContext is lost. There must be somewhere in your UserControl where you are changing the DataContext and is affecting the bindings below.

Please keep me posted.

02 Sep 2022, 20:44

I found out what was causing this! I had some code in my user control constructor that was initializing the data context:

    public partial class TeamInventoryItemView : UserControl
    {
        public TeamInventoryItemView()
        {
            InitializeComponent();
            // The line below was causing this bug:
            DataContext = new TeamInventoryItem();
        }

When I removed the line initializing the DataContext, it works in noesis!

Unfortunately, it still wasn't showing up in the blend designer.. so I attempted to add back the DataContext="{Binding}" line to this:

<local:TeamInventoryItemView DataContext="{Binding}" />

and now it shows up in both blend and noesis appropriately!

Hopefully this helps some poor soul in the future (100% chance it will be me looking at this thread again).

thanks,
sam

05 Sep 2022, 12:08

Glad to hear you found it!
And thanks for the explanation, for sure it will help others in the future.

Data binding data template with a user control Topic is solved

Data binding data template with a user control

Re: Data binding data template with a user control

Re: Data binding data template with a user control

Re: Data binding data template with a user control

Re: Data binding data template with a user control

Re: Data binding data template with a user control

Who is online