WPF如何綁定用戶控件屬性

Question

嗨，我正在嘗試綁定用戶控件屬性，但到目前為止還沒有成功。 下面是我的代碼。

<UserControl x:Class="MyControl"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
       mc:Ignorable="d" 
       d:DesignHeight="120" d:DesignWidth="120"
       x:Name="uc"
       Background="Transparent">
    <Grid>
        <Viewbox> 
           ......
           <CheckBox Name="Start" Visibility="Hidden" IsChecked="{Binding Path=Animation, ElementName=uc, Mode=TwoWay}"/>
           .......
        </Viewbox>
    </Grid>
</UserControl>

用戶控制代碼在后面。

  public partial class MyControl: UserControl
  {
    public static readonly DependencyProperty AnimationProperty = DependencyProperty.Register("Animation", typeof(bool), typeof(CircularProgressBar));
    public bool Animation
    {
      get { return (bool)GetValue(AnimationProperty); }
      set 
      {
        SetValue(AnimationProperty, value); 
      }
    }


    public MyControl()
    {
      InitializeComponent();
      //(this.Content as FrameworkElement).DataContext = this;
    }

  }

查看代碼

<local:MyControl x:Name="cpb" Animation="{Binding CpbIsEnabled, Mode=TwoWay}"  />

查看型號代碼

private bool cpbEnabled;
public bool CpbIsEnabled
{
  get { return cpbEnabled; }
  set { cpbEnabled = value; OnPropertyChanged("CpbIsEnabled");  }
}

public ICommand ShowSelFlagCommand
{
  get
  {
    return showSelFlagCommand ?? (showSelFlagCommand = new DelegateCommand(() =>
    {
      if (CpbIsEnabled) { CpbIsEnabled = false; }
      else { CpbIsEnabled = true; }
    }
    ));
  }
}

我在用戶控制代碼中的動畫屬性設置方法中放置了一個斷點。 但是，當執行ICOmmand in view模型時，它永遠不會達到斷點。 換句話說，Animation屬性不是由綁定設置的。

有人可以告訴我我錯過了什么嗎？

謝謝，

Answer 1

您需要在控件的代碼隱藏中實現DependencyProperty 。

為控件實現依賴項屬性后，該屬性將在XAML中公開。

Answer 2

終於我明白了。 非常感謝所有幫助的人。

用戶控制碼

  <UserControl.Resources>
    <BooleanToVisibilityConverter x:Key="bool2visibility" />
  </UserControl.Resources>
  <Grid>
    <Viewbox>
      <Grid x:Name="LayoutRoot" Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=IsLoading, Mode=OneWay, Converter={StaticResource bool2visibility}}">
        <Grid.RenderTransform>
          <ScaleTransform x:Name="SpinnerScale" ScaleX="1.0" ScaleY="1.0" />
        </Grid.RenderTransform>
        <Canvas RenderTransformOrigin="0.5,0.5" 
                    HorizontalAlignment="Center" 
                    VerticalAlignment="Center"   
                    Width="120" Height="120" >
          <Ellipse Width="21.835" Height="21.862" 
                  Canvas.Left="20.1696" 
                  Canvas.Top="9.76358" 
                  Stretch="Fill" Fill="Orange" 
                  Opacity="1.0"/>
          <Ellipse Width="21.835" Height="21.862" 
                  Canvas.Left="2.86816" 
                  Canvas.Top="29.9581" Stretch="Fill" 
                  Fill="Black" Opacity="0.9"/>
          <Ellipse Width="21.835" Height="21.862" 
                  Canvas.Left="5.03758e-006" 
                  Canvas.Top="57.9341" Stretch="Fill" 
                  Fill="Black" Opacity="0.8"/>
          <Ellipse Width="21.835" Height="21.862" 
                  Canvas.Left="12.1203" 
                  Canvas.Top="83.3163" Stretch="Fill" 
                  Fill="Black" Opacity="0.7"/>
          <Ellipse Width="21.835" Height="21.862" 
                  Canvas.Left="36.5459" 
                  Canvas.Top="98.138" Stretch="Fill" 
                  Fill="Black" Opacity="0.6"/>
          <Ellipse Width="21.835" Height="21.862" 
                  Canvas.Left="64.6723" 
                  Canvas.Top="96.8411" Stretch="Fill" 
                  Fill="Black" Opacity="0.5"/>
          <Ellipse Width="21.835" Height="21.862" 
                  Canvas.Left="87.6176" 
                  Canvas.Top="81.2783" Stretch="Fill" 
                  Fill="Black" Opacity="0.4"/>
          <Ellipse Width="21.835" Height="21.862" 
                  Canvas.Left="98.165" 
                  Canvas.Top="54.414" Stretch="Fill" 
                  Fill="Black" Opacity="0.3"/>
          <Ellipse Width="21.835" Height="21.862" 
                  Canvas.Left="92.9838" 
                  Canvas.Top="26.9938" Stretch="Fill" 
                  Fill="Black" Opacity="0.2"/>
          <Ellipse Width="21.835" Height="21.862" 
                  Canvas.Left="47.2783" 
                  Canvas.Top="0.5" Stretch="Fill" 
                  Fill="Black" Opacity="0.1"/>
          <Canvas.RenderTransform>
            <RotateTransform x:Name ="SpinnerRotate" Angle = "0" />
          </Canvas.RenderTransform>
          <Canvas.Triggers>
            <EventTrigger RoutedEvent ="ContentControl.Loaded" >
              <BeginStoryboard>
                <Storyboard x:Name="CirccularProgressBarStoryBoard">
                  <DoubleAnimation 
                    Storyboard.TargetName ="SpinnerRotate" 
                    Storyboard.TargetProperty ="(RotateTransform.Angle)" 
                    From="0" To="360" 
                    Duration="0:0:01" 
                    RepeatBehavior="Forever"/>
                </Storyboard>
              </BeginStoryboard>
            </EventTrigger>
          </Canvas.Triggers>
        </Canvas>
      </Grid>
    </Viewbox>
  </Grid>

用戶控制代碼落后。

  public partial class CircularProgressBar : UserControl 
  {
    public static readonly DependencyProperty IsLoadingProperty = DependencyProperty.Register("IsLoading", typeof(bool), typeof(CircularProgressBar), new UIPropertyMetadata(false));
    public bool IsLoading
    {
      get { return (bool)GetValue(IsLoadingProperty); }
      set { SetValue(IsLoadingProperty, value); }
    }

    public CircularProgressBar()
    {
      InitializeComponent();
      (this.Content as FrameworkElement).DataContext = this;
    }
  }

查看axml

<local:CircularProgressBar  x:Name="cpb" IsLoading="{Binding CPBLoading}" >