コントロールテンプレートでのバインド

Question

ControlTemplatesを使用するのが比較的新しいので、これは超簡単な質問かもしれません。しかし、私はいくつかのページで使用するフッターを持っているので、私はControlTemplateが良い考えだと思う。 私が最初に遭遇している問題は、イメージパスをバインドする方法です。ここで

は私のApp.xamlファイル私はそれを使用しようとしていますか

<Application 
xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
xmlns:abstractions="clr-namespace:SVG.Forms.Plugin.Abstractions;assembly=SVG.Forms.Plugin.Abstractions" 
x:Class="MyApp.App"> 
<Application.Resources> 
    <ResourceDictionary> 
     <Style x:Key="HomeButtonStyle" TargetType="Button"> 
      <Setter Property="FontSize" Value="Medium" /> 
      <Setter Property="TextColor" Value="White" /> 
      <Setter Property="FontAttributes" Value="Bold"/> 
      <Setter Property="BorderWidth" Value="1"/> 
      <Setter Property="BorderColor" Value="White"/> 
      <Setter Property="BorderRadius" Value="5"/> 
      <Setter Property="Margin" Value="16,16,16,0"/> 
     </Style> 
     <ControlTemplate x:Key="Menu"> 
      <StackLayout 
       Orientation="Horizontal" 
       VerticalOptions="End" 
       BackgroundColor="Black" 
       HeightRequest="70" 
       HorizontalOptions="FillAndExpand" 
       Spacing="20"> 
       <abstractions:SvgImage 
        x:Name="Settings" 
        SvgAssembly="{Binding SvgAssembly}" 
        SvgPath="{Binding SettingsIcon}" 
        HeightRequest="50" 
        WidthRequest="50" 
        BackgroundColor="Transparent" 
        VerticalOptions="Center" 
        HorizontalOptions="CenterAndExpand"/> 
       <abstractions:SvgImage 
        x:Name="Notification" 
        SvgAssembly="{Binding SvgAssembly}" 
        SvgPath="{Binding Notification}" 
        HeightRequest="50" 
        WidthRequest="50" 
        BackgroundColor="Transparent" 
        VerticalOptions="Center" 
        HorizontalOptions="CenterAndExpand"/> 
       <abstractions:SvgImage 
        x:Name="Help" 
        SvgAssembly="{Binding SvgAssembly}" 
        SvgPath="{Binding HelpIcon}" 
        HeightRequest="50" 
        WidthRequest="50" 
        BackgroundColor="Transparent" 
        VerticalOptions="Center" 
        HorizontalOptions="CenterAndExpand"/> 
      </StackLayout> 
     </ControlTemplate> 
    </ResourceDictionary> 
</Application.Resources> 

そして（HomePage.xaml）...ここで

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      xmlns:abstractions="clr-namespace:SVG.Forms.Plugin.Abstractions;assembly=SVG.Forms.Plugin.Abstractions" 
      x:Class="Page.HomePage"> 
    <StackLayout> 
    ... 
<ContentView ControlTemplate="{StaticResource Menu}"></ContentView> 

</StackLayout> 


</ContentPage> 

は私HomePage.xaml.csファイルです...

public partial class HomePage : ContentPage 
{ 
    public HomePage() 
    { 
     InitializeComponent(); 
     BindingContext = new SvgImagesViewModels(); 

    } 
} 

とViewModelに

public class SvgImagesViewModels 
{ 

    private readonly string _os = DeviceInfo.Hardware.OS == OperatingSystemType.iOS ? "iOS.Images" : "Droid.Images"; 

/* The Assembly */ 
    public Assembly SvgAssembly => typeof(App).GetTypeInfo().Assembly; 

    /* The Image Paths */ 
    public string UserAvatar => $"{_os}.avatar.svg"; 
    public string Notification => $"{_os}.bell.svg"; 
    public string RedNotification => $"{_os}.red_bell.svg"; 
    public string Delete => $"{_os}.delete.svg"; 
    public string HelpIcon => $"{_os}.help.svg"; 
    public string Home => $"{_os}.home.svg"; 
    public string SettingsIcon => $"{_os}.settings.svg"; 
    public string NoImage => $"{_os}.no_image.svg"; 
    public string Star => $"{_os}.star.svg"; 
    public string DownCarrot => $"{_os}.down_carrot.svg"; 
    public string UpCattor => $"{_os}.up_carrot.svg"; 
    public string RightCarrot => $"{_os}.right_carrot.svg"; 
    public string LeftCarrot => $"{_os}.left_carrot.svg"; 
} 

そして、ここでは私が取得していますエラーです...

09-14 20:07:22.428 E/mono-rt (11715): [ERROR] FATAL UNHANDLED EXCEPTION: System.AggregateException: One or more errors occurred. ---> System.NullReferenceException: Object reference not set to an instance of an object. 
09-14 20:07:22.428 E/mono-rt (11715): at SVG.Forms.Plugin.Droid.SvgImageRenderer+<<OnElementChanged>b__3_0>d.MoveNext() [0x00020] in <filename unknown>:0 
09-14 20:07:22.428 E/mono-rt (11715): --- End of inner exception stack trace --- 
09-14 20:07:22.428 E/mono-rt (11715): at (wrapper dynamic-method) System.Object:b7e27031-315a-4ca4-9b10-5b1ac793598c (intptr,intptr) 
09-14 20:07:22.428 E/mono-rt (11715): at (wrapper native-to-managed) System.Object:b7e27031-315a-4ca4-9b10-5b1ac793598c (intptr,intptr) 
09-14 20:07:22.428 E/mono-rt (11715): ---> (Inner Exception #0) System.NullReferenceException: Object reference not set to an instance of an object. 
09-14 20:07:22.428 E/mono-rt (11715): at SVG.Forms.Plugin.Droid.SvgImageRenderer+<<OnElementChanged>b__3_0>d.MoveNext() [0x00020] in <filename unknown>:0 <--- 

だから、明らかに私は間違ってBindingContextをを適用しようとしています。その後、

<ResourceDictionary> 
    ... 
    <ControlTemplate x:Key="Menu"> 
    <StackLayout> 
     <abstractions:SvgImage 
      SvgAssembly="{TemplateBinding SvgAssembly}" 
      SvgPath="{TemplateBinding SettingsIcon}" /> 
      ... 
    </StackLayout> 
    </ControlTemplate> 
</ResourceDictionary> 

しかし、今あなたがTemplateBinding秒を持っていることを、あなたは

public class Menu : ContentView 
{ 
    public static BindableProperty SvgAssemblyProperty = 
     BindableProperty.Create("SvgAssembly", typeof(Assembly), typeof(Menu), null); 

    public static BindableProperty SettingsIconProperty = 
     BindableProperty.Create("SettingsIcon", typeof(string), typeof(Menu), null); 

    ... 
} 

独自のテンプレート化コントロールを定義する必要があり、次のことができます。あなたのControlTemplateで

Answer 1

、あなたはこのように、{TemplateBinding}を使用する必要がありますそれを使用してバインドする：

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      xmlns:abstractions="clr-namespace:SVG.Forms.Plugin.Abstractions;assembly=SVG.Forms.Plugin.Abstractions" 
      x:Class="Page.HomePage"> 
    <StackLayout> 
    ... 
    <Menu ControlTemplate="{StaticResource Menu} SvgAssembly="{Binding SvgAssmbly}" SettingsIcon="{Binding SettingsIcon}" .../> 
    </StackLayout> 
</ContentPage> 

これはあなたの質問に答えるべきです。さて、あなたがしようとしているのは、プラットフォームごとに異なるアイコンを使用することです。ControlTemplateを使用することは過度です。 OnPlatformを使用するか、 `{x：静的}、あるいはおそらく4-5の異なる方法を使用できます。楽しんで実験して...