数据绑定到我的用户控件的依赖项属性不起作用

Question

I am making a user control to represent chosen numbers (like in a lottery). The problem is that when binding to it inside a data template binding does not work. It works correclty when hardcoding the values.

The errors are of this type and they appear for every dependency property I bind to

Error: BindingExpression path error: 'BackCheckedColor' property not found on 'NumberControlTest.Controls.NumberControl'. BindingExpression: Path='BackCheckedColor' DataItem='NumberControlTest.Controls.NumberControl'; target element is 'NumberControlTest.Controls.NumberControl' (Name='null'); target property is 'CheckedBackgroundColor' (type 'String')

What I find strange is that in this section of the error BindingExpression: Path='BackCheckedColor' DataItem='NumberControlTest.Controls.NumberControl' It suggests that it is trying to find the BackCheckedColor in the usercontrol itself. That does not make sense to me. Can somebody help??

User Control Xaml

<UserControl.Resources>        
    <local:CheckedToBrushConverter x:Key="CheckedToBrushConverter" 
                                   CheckedBackgroundColor="{Binding CheckedBackgroundColor}"
                                   CheckedForegroundColor="{Binding CheckedForegroundColor}"
                                   UncheckedBackgroundColor="{Binding UncheckedBackgroundColor}"
                                   UncheckedForegroundColor="{Binding UncheckedForegroundColor}"/>
</UserControl.Resources>
<Grid Tapped="Grid_Tapped">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="16*"/>
        <ColumnDefinition Width="130*"/>
        <ColumnDefinition Width="16*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="16*"/>
        <RowDefinition Height="130*"/>
        <RowDefinition Height="30*"/>
    </Grid.RowDefinitions>

    <Ellipse x:Name="Ellipse" Grid.RowSpan="3" Grid.ColumnSpan="3" Fill="{Binding IsChecked, Converter={StaticResource CheckedToBrushConverter}, ConverterParameter=background}"/>
    <Viewbox Grid.Row="1" Grid.Column="1">
        <TextBlock x:Name="NumberBlock" TextWrapping="Wrap" FontFamily="Segoe UI" Text="{Binding NumberValue}" Foreground="{Binding IsChecked, Converter={StaticResource CheckedToBrushConverter}, ConverterParameter=foreground}" />        
    </Viewbox>

</Grid>

User control code behind

 public sealed partial class NumberControl : UserControl
{
    public NumberControl()
    {
        this.InitializeComponent();
        this.DataContext = this;
    }

    public string UncheckedBackgroundColor
    {
        get { return (string)GetValue(UncheckedBackgroundColorProperty); }
        set { SetValue(UncheckedBackgroundColorProperty, value); }
    }

    // Using a DependencyProperty as the backing store for UncheckedBackgroundColor.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty UncheckedBackgroundColorProperty =
        DependencyProperty.Register("UncheckedBackgroundColor", typeof(string), typeof(NumberControl), new PropertyMetadata(string.Empty));


    public string CheckedBackgroundColor
    {
        get { return (string)GetValue(CheckedBackgroundColorProperty); }
        set { SetValue(CheckedBackgroundColorProperty, value); }
    }

    // Using a DependencyProperty as the backing store for CheckedBackgroundColor.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty CheckedBackgroundColorProperty =
        DependencyProperty.Register("CheckedBackgroundColor", typeof(string), typeof(NumberControl), new PropertyMetadata(string.Empty));

plus more dependency properties like those.

MainPage xaml

<Page.Resources>
    <DataTemplate x:Key="NumberTemplate">
        <Grid>
            <controls:NumberControl 
                UncheckedBackgroundColor="{Binding BackUncheckedColor}"
                UncheckedForegroundColor="{Binding ForeUncheckedColor}"
                CheckedBackgroundColor="{Binding BackCheckedColor}"
                CheckedForegroundColor="{Binding ForeCheckedColor}"
                NumberValue="{Binding Value}" 
                IsChecked="{Binding IsChecked}"
                HorizontalAlignment="Center" 
                VerticalAlignment="Center" Width="45" Height="45"/>
        </Grid>
    </DataTemplate>
</Page.Resources>

<Grid Background="#0f455f">
    <GridView x:Name="NumbersGridView" ItemTemplate="{StaticResource NumberTemplate}" ItemsSource="{Binding Numbers, Mode=TwoWay}"/>
    <Button x:Name="printButton" Content="Print" VerticalAlignment="Bottom" HorizontalAlignment="Center" Click="printButton_Click"/>
</Grid>

Model class which provides the data of the collection bound to the gridview

public class MockNumber
{
    public MockNumber(bool isChecked, int value, string backchcolor, string forchcolor, string backunchcolor, string forunchcolor)
    {
        IsChecked = isChecked;
        Value = value;
        BackCheckedColor = backchcolor;
        ForeCheckedColor = forchcolor;
        BackUncheckedColor = backunchcolor;
        ForeUncheckedColor = forunchcolor;
    }

    public bool IsChecked { get; set; }
    public int Value { get; set; }
    public string BackCheckedColor { get; set; }
    public string ForeCheckedColor { get; set; }
    public string BackUncheckedColor { get; set; }
    public string ForeUncheckedColor { get; set; }
}

EDIT: How the model is instantiated and bound in the MainPage codebehind.

public MainPage()
    {
        this.InitializeComponent();
        this.DataContext = this;
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        makelist();
    }

    void makelist()
    {
        for (int i = 1; i <= 20; i++)
        {
            Numbers.Add(new MockNumber(i % 4 == 0 ? true : false, i, "#dead2b", "#000000", "#dead2b", "#f0b60c"));
        }
    }

    private ObservableCollection<MockNumber> numbers = new ObservableCollection<MockNumber>();
    public ObservableCollection<MockNumber> Numbers
    {
        get
        {
            return numbers;
        }
        set
        {
            numbers = value;
        }
    }

Answer 1

The reason why it's trying to find the 'BackCheckedColor' property from the NumberControl is because you set the user control's datacontext to itself.

public NumberControl()
{
   this.InitializeComponent();
   this.DataContext = this;
}

You're telling the user control that your data context is itself. It means that when you do the "{Binding}" the path should be a property of the user control which I don't think is a good idea.

I understand that you want to bind some dependency properties to your Model class but I didn't see in your example where you instantiated the model class and use it as your data context.

Another thing to consider, you might want to use a custom control instead of a user control. I can see that you added some dependency properties to your user control but in practice, dependency properties added to custom controls and static classes that has attached properties.

EDIT: After reading your additional code, I can see that the user control's datacontext was being set to 'this' which is itself. You need to remove that.

public sealed partial class NumberControl : UserControl
{
    public NumberControl()
    {
        this.InitializeComponent();
        this.DataContext = this; //Remove this line 
    }
//...

Then after removing that, you usercontrol should inherit the GridViewItem's Binding or you can explicitly put the datacontext in your DataTemplate.

<DataTemplate x:Key="NumberTemplate">
    <Grid>
        <controls:NumberControl DataContext="{Binding}" <!--specify the data context-->
            UncheckedBackgroundColor="{Binding BackUncheckedColor}"
//..