Xamarin形式共享的ControlTemplate爲ContentPage和CarouselPage

我卡試圖重用控件模板的獨立ContentPage以及在CarouselPage一個ContentPage ...Xamarin形式共享的ControlTemplate爲ContentPage和CarouselPage

的主要問題是，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>

的BindingContext在CarouselPage成爲從Tournament.Rounds集合TournamentRoundModel。

沒有任何一個對我怎麼能獨立ContentPage和CarouselPage嵌套ContentPage內到達ViewModel根的想法？

親切的問候， Jop的Middelkamp

來源

2017-10-13 Jop Middelkamp

首先，如果您需要CarousalPage中的每個ContentPage能夠引用根視圖模型，同時將其提供給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); } 
    } 
}

然後你就可以更新您的共享控制模板：

<!-- 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>

使用範例會是什麼樣子：

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

此外，如果IsBusy是o您需要在ControlTemplate中參考的屬性 - 您可以在擴展內容頁面中創建一個IsBusy可綁定屬性;而不是RootViewModel。

來源

2017-10-16 17:55:22 Ada

這解決了我的問題！謝謝G. Sharada！ –

如果你正在做相關的，我建議你使用這個NuGet包https://github.com/alexrainman/CarouselView而不是默認的旋轉木馬頁面什麼傳送帶。

來源

2017-10-16 14:08:33

我剛剛從CarouselView切換到CarouselPage，因爲CarouselView是越野車。當在第一頁上按任何一個條目時，CarouselView控件正在遠離活動視圖...不可行，並確認預發佈的NuGet狀態。 –

Xamarin形式共享的ControlTemplate爲ContentPage和CarouselPage

回答

相關問題