數據綁定到我的用戶控件的依賴項屬性不起作用

Question

我正在製作一個用戶控件來表示選定的數字（如在抽獎中）。問題是，在數據模板綁定中綁定它時不起作用。 硬編碼值時它工作正常。

的錯誤是這種類型的，他們似乎對我綁定到

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') 

每一個依賴屬性是什麼，我覺得奇怪的是，在錯誤的這部分 BindingExpression: Path='BackCheckedColor' DataItem='NumberControlTest.Controls.NumberControl' 這表明，它正試圖找到用戶控件本身中的BackCheckedColor。這對我來說沒有意義。有人可以幫忙嗎？

用戶控制的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> 

後面像那些

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)); 

加上更多依賴屬性用戶控制代碼。

XAML的MainPage

<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> 

模型類，它提供的集合綁定到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; } 
} 

編輯數據：如何將模型實例化，並在代碼隱藏的MainPage約束。

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

它試圖從NumberControl中查找'BackCheckedColor'屬性的原因是因爲您將用戶控件的datacontext設置爲自身。

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

您正在告訴用戶控件您的數據上下文本身。這意味着當你做「{綁定}」時，路徑應該是用戶控件的屬性，我認爲這不是一個好主意。

我知道你想綁定一些依賴屬性到你的Model類，但是我沒有在你的例子中看到你實例化模型類並將它用作你的數據上下文。

要考慮的另一件事，你可能想使用自定義控件而不是用戶控件。我可以看到你向用戶控件添加了一些依賴項屬性，但實際上，依賴項屬性被添加到自定義控件和具有附加屬性的靜態類中。

編輯： 在閱讀您的附加代碼後，我可以看到用戶控件的datacontext被設置爲「this」本身。你需要刪除它。

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

然後移除後，您應用戶控件繼承GridViewItem的綁定，也可以明確地把在DataContext你的DataTemplate。

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