2015-08-28 80 views
6

有什麼辦法可以創建轉盤視圖而不是轉盤頁面,這樣只有部分頁面左右滑動。另外我想在Xamarin Forms中創建這個控件,而不是特定於平臺。如何在Xamarin中轉盤視圖.forms

如果我們需要在xamarin.android或xamarin.iOS中創建這個自定義控件,那麼使用Xamarin.forms這個簡單的需求沒有得到滿足的真正好處是什麼。

+0

你不知道你想知道什麼。你想要水平幻燈片嗎?你想要一個帶有3D動畫的旋轉木馬嗎?你只想知道Xamarin.Forms是否符合你的需求? http://stackoverflow.com/questions/32204807/when-to-use-xamarin-forms-vs-xamarin-native/32205163#32205163 – Wosi

回答

1

我剛剛實施了類似的事情。爲了創建一個輪播視圖,我只是創建了一個水平的Stacklayout,它包裝在一個水平滾動視圖中。

在我特別的例子中,我需要創建一個圖庫。我使用Xamarin.Labs項目中的Camera控件從相機膠捲或相機本身獲取圖像。然後我將它作爲一個孩子添加到Stacklayout。

希望這會有所幫助。

+0

你能發佈一些這樣的代碼? –

1

由於Xamarin.Forms V2.2.0-pre1CarouselView現已添加到Xamarin.Forms。

輪播畫面

輪播畫面旨在全面替代CarouselPage。 CarouselPage 將在未來版本中棄用。 CarouselView在很多方面都優於 ,包括其虛擬化和嵌套在 佈局中的能力。

https://forums.xamarin.com/discussion/63983/xamarin-forms-2-2-0-pre1-released#latest

遺憾的是沒有這方面的資料作爲尚未。

編輯:

CarouselView被去除Xamarin.Forms V2.2.0.31因爲它沒有準備好穩定版本。但從它的外觀來看,它很快就會合並回來。

現在你可以找到單獨CarouselView NuGet包在這裏:https://www.nuget.org/packages/Xamarin.Forms.CarouselView/2.3.0-pre1

,你可以使用它像這樣:

命名空間:

xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView" 

然後,我們可以簡單地將輪播畫面在我們頁面的頂部:

<Grid RowSpacing="0"> 
    <Grid.RowDefinitions> 
    <RowDefinition Height=".3*"/> 
    <RowDefinition Height=".7*"/> 
    </Grid.RowDefinitions> 
    <cv:CarouselView ItemsSource="{Binding Zoos}" x:Name="CarouselZoos"> 
    <cv:CarouselView.ItemTemplate> 
     <DataTemplate> 
     <Grid> 
      <Grid.RowDefinitions> 
      <RowDefinition Height="*"/> 
      <RowDefinition Height="Auto"/> 
      </Grid.RowDefinitions> 
      <Image Grid.RowSpan="2" Aspect="AspectFill" Source="{Binding ImageUrl}"/> 
      <StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12"> 
      <Label TextColor="White" Text="{Binding Name}" FontSize="16" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/> 
      </StackLayout> 
     </Grid> 
     </DataTemplate> 
    </cv:CarouselView.ItemTemplate> 
    </cv:CarouselView> 
    <!--List of Monkeys below--> 
</Grid> 

更多信息:https://blog.xamarin.com/flip-through-items-with-xamarin-forms-carouselview/

+0

貌似CarouselView不存在。發生了什麼? – Mark13426

+0

CarouselView因V2.2.0.31版本被刪除,因爲它尚未準備好發佈。但從它的外觀來看,它將被合併回到下一個穩定版本 – user1

+0

這是否意味着使用這個軟件包並不安全? – batmaci

1

如果使用Xamarin.Forms V2.2.0-PRE1,你需要顯示每個頁面不同的看法,你可以使用一個派生類這樣的:

public class CarouselViewMultiPage : CarouselView 
{ 
    List<View> _children = new List<View> { }; 
    public List<View> Children { 
     get { return _children; } 
     set { 
      _children = value; 
      OnPropertyChanged(); 
     } 
    } 
    public CarouselViewMultiPage() 
    { 
     this.ItemTemplate = new CarouselTemplateSelector(); 
     this.ItemsSource = Children; 
     this.SetBinding(CarouselView.ItemsSourceProperty, "Children"); 
     BindingContext = this; 
    } 
} 
public class CarouselTemplateSelector : DataTemplateSelector 
{ 
    protected override DataTemplate OnSelectTemplate(object item, BindableObject container) 
    { 
     DataTemplate dt = new DataTemplate(); 
     View civ = (View)item; 
     return new DataTemplate(() => 
     { 
      return civ; 
     }); 
    } 
} 

所以你可以稱它通過意見:

public App() 
{ 
    // The root page of your application 
    MainPage = new ContentPage { 
     Content = new CarouselViewMultiPage 
     { 
      HorizontalOptions = LayoutOptions.FillAndExpand, 
      VerticalOptions = LayoutOptions.FillAndExpand, 
      Children = 
         { 
          new Label() { Text="Page 1"}, 
          new Label() { Text="Page 2"}, 
          new Label() { Text="Page 3"}, 
         } 
     } 
    }; 
} 
+0

謝謝我終於做到了...... –