XamarinフォームはContentPageとCarouselPageのためのControlTemplateを共有

Question

私は...独立したContentPageなどCarouselPageでContentPageのためにコントロールテンプレートを再利用しようとしてこだわっている

主な問題は、CarouselPageにはないということですControlTemplateプロパティをサポートします。したがって、CarouselPageのDataTemplateにContentPageを挿入する必要があります。このContentPageはControlTemplateが割り当てられますが、BindingContextがViewModelのルートではないという問題が発生します。

私はまた、コードの問題を説明してみましょう：

以下に示すように、私はテンプレートを作成しました。

<!-- Loader view template --> 
<ControlTemplate x:Key="LoaderViewTemplate"> 
    <AbsoluteLayout Padding="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"> 

     <!-- Content --> 
     <ContentPresenter AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All" /> 

     <!-- Loader --> 
     <BoxView IsVisible="{TemplateBinding BindingContext.IsBusy}" BackgroundColor="Green" Opacity="0.5" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All" /> 
     <StackLayout IsVisible="{TemplateBinding BindingContext.IsBusy}" Padding="6" BackgroundColor="Gray" Orientation="Horizontal" AbsoluteLayout.LayoutBounds="0.5, 0.5, -1, -1" AbsoluteLayout.LayoutFlags="PositionProportional"> 
      <ActivityIndicator Color="White" IsRunning="{TemplateBinding BindingContext.IsBusy}" VerticalOptions="Center" WidthRequest="20" HeightRequest="20" /> 
      <Label TextColor="White" Text="Loading..." VerticalOptions="Center" /> 
     </StackLayout> 

    </AbsoluteLayout> 
</ControlTemplate> 

テンプレートは、以下に示すContentPageに対して正しく働いです。

<ContentPage ... 
      ControlTemplate="{StaticResource LoaderViewTemplate}"> 

    <StackLayout HorizontalOptions="Center" VerticalOptions="Center"> 
     ... 
    </StackLayout> 

</ContentPage> 

しかし、以下に示すように、それはCarouselPageでを動作しません。

<CarouselPage ... 
       ItemsSource="{Binding Tournament.Rounds}"> 

    <CarouselPage.ItemTemplate> 
     <DataTemplate> 
      <ContentPage ControlTemplate="{StaticResource LoaderViewTemplate}"> 
       ... 
      </ContentPage> 
     </DataTemplate> 
    </CarouselPage.ItemTemplate> 

</CarouselPage> 

CarouselPageでBindingContextはTournament.RoundsコレクションからTournamentRoundModelになります。

は、いずれかが、私は独立したContentPageとCarouselPageネストされたContentPage内ViewModelのルートに達することができる方法についてのアイデアを持っていますか？

敬具、 ヨップMiddelkamp

Answer 1

ContentPageをCarousalPageにする必要がある場合は、ControlTemplateのバインディングに同じ情報を提供しながら、ルートビューモデルを参照できるようにする必要があります。

これを行う最も簡単な方法は、ContentPageを拡張してこの参照を保持するバインド可能なプロパティ（ルートビューモデル）をサポートすることです。

public class ExContentPage : ContentPage 
{ 
    public static readonly BindableProperty RootViewModelProperty = 
     BindableProperty.Create(
      "RootViewModel", typeof(object), typeof(ExContentPage), 
      defaultValue: default(object)); 

    public object RootViewModel 
    { 
     get { return (object)GetValue(RootViewModelProperty); } 
     set { SetValue(RootViewModelProperty, value); } 
    } 
} 

として次にあなたが共有コントロールテンプレートを更新することができます。

<local:ExContentPage ... 
     xmlns:local="clr-namespace:CustomNamespace"  
     RootViewModel="{Binding}" 
     ControlTemplate="{StaticResource LoaderViewTemplate}"> 

    <StackLayout HorizontalOptions = "Center" VerticalOptions="Center"> 
     ... 
    </StackLayout> 
</local:ExContentPage> 

と、さらに

<CarouselPage... 
      x:Name="Parent" 
      ItemsSource="{Binding Tournament.Rounds}"> 
    <CarouselPage.ItemTemplate> 
     <DataTemplate> 
      <local:ExContentPage 
       ControlTemplate = "{StaticResource LoaderViewTemplate}" 
       RootViewModel="{Binding BindingContext, Source={x:Reference Parent}}"> 
       ... 
      </ContentPage> 
     </DataTemplate> 
    </CarouselPage.ItemTemplate> 
</CarouselPage> 

、場合：使用例は次のようになり

<!-- Loader view template --> 
<ControlTemplate x:Key="LoaderViewTemplate"> 
    <AbsoluteLayout Padding = "0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"> 

     <!-- Content --> 
     <ContentPresenter .. /> 

     < !--Loader-- > 
     <BoxView IsVisible= "{TemplateBinding RootViewModel.IsBusy}" BackgroundColor= "Green" .. /> 

     <StackLayout IsVisible= "{TemplateBinding RootViewModel.IsBusy}" .. > 
      <ActivityIndicator Color= "White" IsRunning= "{TemplateBinding RootViewModel.IsBusy}" /> 
      <Label TextColor= "White" Text= "Loading..." VerticalOptions= "Center" /> 
     </StackLayout> 
    </AbsoluteLayout> 
</ControlTemplate> 

IsBusyは、参照する必要があるnlyプロパティControlTemplate - 拡張コンテンツページでIsBusyバインド可能なプロパティを作成できます。 RootViewModelの代わりに

Answer 2

あなたは、関連するカルーセル何をやっている場合、私はあなたの代わりに、デフォルトのカルーセルページのこのnugetパッケージhttps://github.com/alexrainman/CarouselViewを使用することをお勧め。