UWP 종속성 속성에 바인딩

Question

템플릿 스튜디오를 사용하여 UWP 프로젝트를 만들었으므로 사용자 지정 컨트롤을 구현하려고합니다. 그것은 내가 좋아하는 것 그리드, 내부에 2 개 개의 이미지를 가지고

public sealed partial class MyButton : UserControl 
    { 
     public MyButton() 
     { 
      InitializeComponent(); 
     } 

     public ImageSource Icon 
     { 
      get => (ImageSource)GetValue(s_iconProperty); 
      set => SetValue(s_iconProperty, value); 
     } 

     public ImageSource Pointer 
     { 
      get => (ImageSource)GetValue(s_pointerProperty); 
      set => SetValue(s_pointerProperty, value); 
     } 

     public static readonly DependencyProperty s_iconProperty = 
      DependencyProperty.Register("Icon", typeof(ImageSource), typeof(MyButton), null); 

     public static readonly DependencyProperty s_pointerProperty = 
     DependencyProperty.Register("Pointer", typeof(ImageSource), typeof(MyButton), null); 
    } 

.xaml

<UserControl 
    x:Class="...Main.Components.MyButton" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:...Main.Components" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    d:DesignHeight="300" Width="755.357"> 
    <Button Margin="0,1,1,-1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"> 
     <Grid HorizontalAlignment="Stretch" Margin="-375,-152,-375,-148" Width="750" Height="300" VerticalAlignment="Stretch"> 
      <Image HorizontalAlignment="Left" Height="100" Margin="39,105,0,0" VerticalAlignment="Top" Width="100" Source="{?!?!?!}"/> 
      <TextBlock HorizontalAlignment="Left" Margin="160,126,0,0" Text="TextBlock" TextWrapping="Wrap" VerticalAlignment="Top" Height="70" Width="403"/> 
      <Image HorizontalAlignment="Left" Height="100" Margin="602,121,0,0" VerticalAlignment="Top" Width="100"/> 
     </Grid> 
    </Button> 
</UserControl> 

기본적으로

.xaml.cs :

이

는 모습입니다 내 종속 속성 인 Icon 및 Pointer에 바인딩합니다.

내 컨트롤의 디자이너에서 종속성 속성을 볼 수 없지만 사용자 지정 단추가있는 페이지의 디자이너에서 볼 수 있습니다.

나는이 튜토리얼을 따라 갔고 동일한 작업을 시도했다 : https://social.technet.microsoft.com/wiki/contents/articles/32795.uwp-creating-user-control.aspx,하지만 사용자 정의 컨트롤의 첫 이미지 -> 소스를 클릭하면 "데이터 바인딩 만들기"옵션도 사용할 수 없다. 사용할 수 없습니다.

나는이 같은 데이터 바인딩을 설정하는 것을 시도했다 :

<Image HorizontalAlignment="Left" Height="100" Margin="39,105,0,0" VerticalAlignment="Top" Width="100" Source="{Binding Icon}"/> 

그러나 나는 이것이 아마 올바른 구문 아니라는 것을 알고 있습니다.

어떻게 이러한 종속성 속성에 바인딩합니까? 간단한 방법이 있습니까?

새 항목 추가 ... 사용자 정의 컨트롤을 사용하여 컨트롤을 만들었습니다.

Answer 1

나는이 같은 데이터 바인딩을 설정하는 것을 시도했다 : <Image HorizontalAlignment="Left" Height="100" Margin="39,105,0,0" VerticalAlignment="Top" Width="100" Source="{Binding Icon}"/>

하면 데이터가 사용자 컨트롤의 XAML에서 바인딩 설정이 방법은 올바른 것입니다. 그러나 바인딩에 대해 DataContext을 설정하지 않았습니다. 데이터 소스가 없으면 바인딩이 작동하지 않습니다. 그냥 작동시킬 사용자 정의 컨트롤 안에 Datacontext을 설정하면됩니다. 코드는 다음과 같이

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

public ImageSource Icon 
{ 
    get => (ImageSource)GetValue(s_iconProperty); 
    set => SetValue(s_iconProperty, value); 
} 

은 그럼 당신은 예를 들어, 이미지 소스를 설정하는 사용자 컨트롤을 사용할 수 있습니다 :

<local:MyButton 
    Width="600" 
    Height="800" 
    Icon="Assets/A.jpg" /> 

자세한 내용을 당신이 this article를 참조 할 수있는 사용자 컨트롤 내부 바인딩에 대해.