如何在 C# WPF 中将属性从 CustomControl 传递到它的 UserControls？

Question

I currently have a problem with some DependencyProperties in my code. I made my own Control which is supposed to be used in many instances of my app. I was able to bind a boolean DependencyProperty and use it's value in the control itself. Now I need to bind a Style to it's children.

Here is how I want to bind the property:

<Window>
    <Window.Resources>
        <Style x:Key="style" TargetType="Button">
            <Setter Property="Background" Value="Red" />
        </Style>
    </Window.Resources>
    
    <Grid>
        <local:MyControl ButtonStyle="{StaticResource style}"/>
    </Grid>
</Window>

The value will be set in MyControl.cs this way:

public class MyControl : Control
{
    public static readonly DependencyProperty ButtonStyleProperty= DependencyProperty.Register(
        "ButtonStyle", typeof(Style), typeof(MyControl), new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.Inherits));

    static MyControl()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(MyControl), new FrameworkPropertyMetadata(typeof(MyControl)));
    }

    public Style ButtonStyle
    {
        get => (Style)GetValue(ButtonStyleProperty);
        set => SetValue(ButtonStyleProperty, value);
    }
}

The Generic.xaml of my custom control owns an UserControl which needs the ButtonStyle . I'm trying to pass it in the Generic.xaml like this:

<controller:ControllerView ButtonStyle="{Binding ButtonStyle}"/>

Here is the code-behind for the ControllerView . For some reason the setter is never accessed.

public partial class ControllerView : UserControl
{
    public static readonly DependencyProperty ButtonStyleProperty = DependencyProperty.Register(
        "ButtonStyle", typeof(Style), typeof(ControllerView), new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

    public ControllerView()
    {
        InitializeComponent();
    }

    public Style ButtonStyle
    {
        get => (Style)GetValue(ButtonStyleProperty);
        set => SetValue(ButtonStyleProperty, value);
    }
}

And it's supposed to be used in the ControllerView.xaml like this:

<Button Name="Button" Style="{Binding ButtonStyle}"
        Content="{Binding Text, Mode=OneTime}" Command="{Binding Command, Mode=OneTime}"
        Margin="1" FontSize="24">

If anyone could tell me why it doesn't work this way and maybe suggest a solution to my code or can tell me how one would normally do this, that'd be great.

Answer 1

A Binding will use the DataContext as source by default, from the documentation :

By default, bindings inherit the data context specified by the DataContext property, if one has been set.

Dependency properties are not part of the DataContext . They are defined on controls. You can use a RelativeSource binding or in some cases an ElementName to refer to another control for binding.

If I understood your decription correctly, MyControl contains a ControllerView and its ButtonStyle property should be bound to the ButtonStyle property of the parent MyControl .

<controller:ControllerView ButtonStyle="{Binding ButtonStyle, RelativeSource={RelativeSource AncestorType={x:Type local:MyControl}}}"/>

Answer 2

It's not working because your ControllerView is trying to reference its own data from the wrong DataContext.

I like the approach shown in this tutorial:

https://blog.scottlogic.com/2012/02/06/a-simple-pattern-for-creating-re-useable-usercontrols-in-wpf-silverlight.html

Doing external binds to a UserControl's properties doesn't really work by default since that requires the use of two different DataContexts; if you try to bind assuming your default DataContext for your view then it won't work because the DataContext doesn't have any understanding of what is contained within your UserControl, and conversely if you try to just set the DataContext of the UserControl to itself then it won't have any understanding of the external data you're trying to pass in.

The solution is to set the control's DataContext to itself, but not immediately on the whole thing; instead nest it one level deep to your control's main containing panel. So if you had

<UserControl>
    <Grid x:Name="LayoutRoot">
    //control contents go here
    </Grid>
<UserControl>

in that UserControl's code-behind you could enter

public UserControlName()
{
    InitializeComponent();
    LayoutRoot.DataContext = this;
}

and the end result is that you will be able to bind to this control using data from another DataContext, and then the control will use its own DataContext (now containing the bound data from the other DataContext) within itself.

If you cooked up some dependency properties for that UserControl, you can now easily reference them, as well; your <controller:ControllerView ButtonStyle="{Binding ButtonStyle}"/> line would work perfectly.