イメージはXAML（Xamarin User Control）でバインドされていません

Question

イメージと2行のテキストを持つ 'CardView'コントロールを作成しています。私のページで 、私は値を割り当てた場合、画像は私がデータバインディング式を使用している場合しかし、それは動作しません、レンダリング...

ここでは、コントロールである：ここでは

public partial class CardView : Frame 
{ 
    public CardView() 
    { 
     BindingContext = this; 
     InitializeComponent(); 

    } 

    public static readonly BindableProperty TitleProperty = BindableProperty.Create(nameof(Title), typeof(string), typeof(CardView), null, BindingMode.OneWay); 

    public string Title 
    { 
     get { return (string)GetValue(TitleProperty); } 
     set { SetValue(TitleProperty, value); } 
    } 

    public static readonly BindableProperty SubtitleProperty = BindableProperty.Create(nameof(Subtitle), typeof(string), typeof(CardView), null, BindingMode.OneWay); 

    public string Subtitle 
    { 
     get { return (string)GetValue(SubtitleProperty); } 
     set { SetValue(SubtitleProperty, value); } 
    } 

    public static readonly BindableProperty ImageSourceProperty = BindableProperty.Create(nameof(ImageSource), typeof(ImageSource), typeof(CardView), null, BindingMode.OneWay); 

    public ImageSource ImageSource 
    { 
     get { return (ImageSource)GetValue(ImageSourceProperty); } 
     set { SetValue(ImageSourceProperty, value); } 
    } 

} 

はのためのXAMLですコントロール：私のviewmodelクラスで

<StackLayout HorizontalOptions="FillAndExpand" > 
    <Image HorizontalOptions="FillAndExpand" 
      Source="{Binding ImageSource}" /> 

    <Label Text="{Binding Title}" 
        HorizontalOptions="FillAndExpand" /> 

    <Label Text="{Binding Subtitle}" 
        HorizontalOptions="FillAndExpand" /> 
</StackLayout> 

：ここ

public class SettingsPageViewModel : ViewModelBase 
{ 
    public SettingsPageViewModel(INavigationService navigationService) : base(navigationService) 
    { 
     Title = "Title"; 
    } 

    public string Subtitle => "Subtitle"; 
    public string Image => "icon.png"; 

} 

は私ですバインディングが失敗するページのXAML：

<controls:CardView Title="No Bound Title" Subtitle="No Bound SubTitle" ImageSource="icon.png"> 
    </controls:CardView> 

    <controls:CardView BindingContext="{Binding .}" Title="{Binding Title}" Subtitle="{Binding Subtitle}" ImageSource="{Binding Image}"> 
    </controls:CardView> 

コントロールの最初のインスタンスが正しくレンダリングされます。 2番目のインスタンスに画像が表示されません。

Answer 1

あなたは、このようなアプローチを使用して悪い理由ですあなたのコントロールのコンストラクタでBindingContext = this命令の効果を閉じるXAML、（であなたのコントロールにBindingContext="{Binding .}"を設定するので、あなたのバインディングが2つ目のシナリオでは動作しない理由がありますテンプレート内で定義されたバインディングを無効にします。具体的には、バインディングのソースはもはやコントロール自体ではなく、ビューモデルです。 SettingsPageViewModelにはTitleとSubtitleのプロパティが存在するため、これらのバインディングは引き続き機能するが、ImageSourceプロパティは含まれていないため、このバインディングは失敗します。出力ウィンドウで適切なメッセージを観察できるはずです。

私はあなたがあなたのコントロールのテンプレートでtemplate bindingsをコンストラクタから上記の行を削除し、使用することをお勧め：

<StackLayout HorizontalOptions="FillAndExpand" > 
    <Image HorizontalOptions="FillAndExpand" 
      Source="{TemplateBinding ImageSource}" /> 
    <Label Text="{TemplateBinding Title}" 
      HorizontalOptions="FillAndExpand" /> 
    <Label Text="{TemplateBinding Subtitle}" 
      HorizontalOptions="FillAndExpand" /> 
</StackLayout> 

あなたがそのテンプレートで使用されるバインディングの有効性に影響を与えることなく、あなたのコントロールにBindingContextを自由に使用される方法。