제어 템플릿에서 바인딩

Question

ControlTemplates를 사용하는 데 비교적 새로운 것이므로 매우 쉽게 질문 할 수 있습니다. 하지만 여러 페이지에서 사용하는 꼬리말이 있으므로 ControlTemplate이 좋은 아이디어라고 생각합니다. 이미지 경로를 바인드하는 방법은 내가 먼저 실행하고있는 첫 번째 문제입니다.

여기

<?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 파일입니다 ...

<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)를 사용하려고 내 App.xaml 파일

입니다 ...

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

    } 
} 

여기

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

그리고 6,

그리고 뷰 모델 그래서 분명히 ...

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를 적용하려합니다. 자신의 templatable 제어를

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); 

    ... 
} 

을 정의 할 수

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

하지만 지금 당신이 TemplateBinding의가 있는지, 당신이 필요하고 당신은 할 수 있습니다 당신의 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 가지 방법을 사용할 수 있습니다. 즐겁게 실험 해보세요 ...