自定義控件綁定到背後的代碼

Question

綁定到我的自定義控件背後的代碼中的數據有困難。很明顯，我必須使用Generic.xaml來設置我的控件的樣式，並且我想綁定到我的控件UserProfile.cs中的數據。

這是後面的代碼：

using System; 
using System.Windows; 
using System.Windows.Controls; 

namespace Controls 
{ 
    public class UserProfile : Control 
    { 
     static UserProfile() 
     { 
      DefaultStyleKeyProperty.OverrideMetadata(typeof(UserProfile), 
       new FrameworkPropertyMetadata(typeof(UserProfile))); 
     } 

     private Double _ProfilePhotoSize = 50; 
     private Double ProfilePhotoSize 
     { 
      get { return _ProfilePhotoSize; } 
      set 
      { 
       if (_ProfilePhotoSize != value) 
        _ProfilePhotoSize = value; 
      } 
     } 
    } 
} 

這裏是用綁定的XAML，除去最後一部分是不需要的：

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:Controls"> 

    <Style TargetType="{x:Type local:NumericUpDown}"> 
     <Style.Resources> 
      <SolidColorBrush x:Key="colour1" Color="#434953" /> 
      <SolidColorBrush x:Key="colour2" Color="#22252b" /> 
      <SolidColorBrush x:Key="colour3" Color="#606876" /> 
     </Style.Resources> 

     <Setter Property="Width" Value="85" /> 
     <Setter Property="Margin" Value="5" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type local:NumericUpDown}"> 
        <Border Focusable="{TemplateBinding Focusable}" 
          Width="{TemplateBinding Width}" 
          x:Name="Border"> 
         <Grid Focusable="False"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="auto"/> 
           <ColumnDefinition Width="1*"/> 
           <ColumnDefinition Width="auto"/> 
          </Grid.ColumnDefinitions> 

          <Button x:Name="PART_DecreaseButton" 
            Grid.Column="0"> 
           <Button.Content> 
            <Path Data="M0,0 L1,0 0.5,1Z" 
              Fill="White" 
              Width="8" 
              Height="6" 
              Stretch="Fill"/> 
           </Button.Content> 
           <Button.Template> 
            <ControlTemplate TargetType="Button"> 
             <Border Name="Border" 
               Background="{DynamicResource colour1}" 
               Width="25" 
               Height="25" 
               CornerRadius="5 0 0 5"> 
              <ContentPresenter /> 
             </Border> 
             <ControlTemplate.Triggers> 
              <Trigger Property="IsMouseOver" Value="True"> 
               <Setter TargetName="Border" Property="Background" Value="{DynamicResource colour3}" /> 
              </Trigger> 
             </ControlTemplate.Triggers> 
            </ControlTemplate> 
           </Button.Template> 
          </Button> 

          <TextBox x:Name="PART_TextBox" 
            Grid.Column="1" 
            Foreground="White" 
            Background="{DynamicResource colour2}" 
            VerticalContentAlignment="Center" 
            HorizontalContentAlignment="Center" 
            HorizontalAlignment="Stretch" 
            BorderThickness="0" 
            Focusable="False" Text="0" /> 

          <Button x:Name="PART_IncreaseButton" 
            Grid.Column="2"> 
           <Button.Content> 
            <Path Data="M0,1 L1,1 0.5,0Z" 
              Width="8" 
              Height="6" 
              Fill="White" 
              Stretch="Fill" /> 
           </Button.Content> 
           <Button.Template> 
            <ControlTemplate TargetType="Button"> 
             <Border Name="Border" 
               Background="{DynamicResource colour1}" 
               Width="25" 
               Height="25" 
               CornerRadius="0 5 5 0"> 
              <ContentPresenter /> 
             </Border> 
             <ControlTemplate.Triggers> 
              <Trigger Property="IsMouseOver" Value="True"> 
               <Setter TargetName="Border" Property="Background" Value="{DynamicResource colour3}" /> 
              </Trigger> 
             </ControlTemplate.Triggers> 
            </ControlTemplate> 
           </Button.Template> 
          </Button> 
         </Grid> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

    <Style TargetType="{x:Type local:UserProfile}"> 
     <Setter Property="DataContext" Value="{x:Type local:UserProfile}" /> 
     <Setter Property="Foreground" Value="White" /> 
     <Setter Property="FontSize" Value="16" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type local:UserProfile}"> 
        <Grid x:Name="circleGrid" Width="{Binding Path=ProfilePhotoSize, RelativeSource={RelativeSource AncestorType={x:Type local:UserProfile}}}"> 
... 

這是綁定錯誤我「M獲得：

BindingExpression path error: 'ProfilePhotoSize' property not found on 'object' ''UserProfile' (Name='')'. BindingExpression:Path=ProfilePhotoSize; DataItem='UserProfile' (Name=''); target element is 'Grid' (Name='circleGrid'); target property is 'Width' (type 'Double')

編輯： 只是移動了一些代碼，並獲得代碼現在的問題，我想根據用戶使控件的大小來調整邊框大小，所以我做了一個新的類和屬性獲取ProfilePhotoSize，然後將它分開由一個數字。

代碼隱藏

using System; 
using System.ComponentModel; 
using System.Windows; 
using System.Windows.Controls; 

namespace Controls 
{ 
    public class UserProfile : Control 
    { 
     static UserProfile() 
     { 
      DefaultStyleKeyProperty.OverrideMetadata(typeof(UserProfile), 
       new FrameworkPropertyMetadata(typeof(UserProfile))); 
     } 
    } 
    public class UserProfileData : INotifyPropertyChanged 
    { 
     public event PropertyChangedEventHandler PropertyChanged; 
     protected virtual void OnPropertyChanged(string propertyName) 
     { 
      PropertyChangedEventHandler handler = PropertyChanged; 
      if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName)); 
     } 

     private Double _ProfilePhotoSize = 50; 
     public Double ProfilePhotoSize 
     { 
      get { return _ProfilePhotoSize; } 
      set 
      { 
       if (_ProfilePhotoSize != value) 
        _ProfilePhotoSize = value; 
       OnPropertyChanged("ProfilePhotoSize"); 
      } 
     } 
     private Double _ProfileBorderThickness = 3; 
     public Double ProfileBorderThickness 
     { 
      get { return _ProfileBorderThickness; } 
      set 
      { 
       double x = ProfilePhotoSize/3; 
       if (_ProfileBorderThickness != x) 
        _ProfileBorderThickness = x; 
       OnPropertyChanged("ProfileBorderThickness"); 
      } 
     } 
    } 
} 

這是XAML，結合不再起作用：S

XAML

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:Controls"> 

    <Style TargetType="{x:Type local:UserProfile}"> 
     <Setter Property="DataContext" Value="{x:Type local:UserProfile}" /> 
     <Setter Property="Foreground" Value="White" /> 
     <Setter Property="FontSize" Value="16" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type local:UserProfile}"> 
        <Grid x:Name="circleGrid" Width="{Binding ProfilePhotoSize, RelativeSource={RelativeSource AncestorType={x:Type local:UserProfileData}}}"> 
         <Grid.RowDefinitions> 

Answer 1

將其更改爲公共財產。

private Double _ProfilePhotoSize = 50; 
    public Double ProfilePhotoSize 
    { 
     get { return _ProfilePhotoSize; } 
     set 
     { 
      if (_ProfilePhotoSize != value) 
       _ProfilePhotoSize = value; 
     } 
    }