wpf usercontrol 속성을 바인딩하는 방법

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가 실행되면 중단 점에 도달하지 않습니다. 즉, 애니메이션 속성은 바인딩에 의해 설정되지 않습니다.

누군가 내가 놓친 내용을 말해 줄 수 있습니까?

덕분에,

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