2014-12-02 84 views
0

我對Xamarin Forms完全陌生,但我設法創建了一個具有多個頁面的簡單應用程序,並且我可以在頁面之間導航。Xamarin Forms自動圖像SlideShow /旋轉木馬

我已經成功添加了圖片,按鈕和其他基本控件,看起來不錯。

我的問題是,我不知道如何創建一個頁面上的多個圖像的自動輪播。任何谷歌搜索都會返回CarouselPage,使用戶可以輕掃屏幕來更改頁面。

我正在考慮一個水平卷軸與3個圖像,但它並沒有真正具有相同的效果 - 用戶將不得不通過圖像移動自己!

有沒有人找到一種方法來做到這一點?任何提示或提示都會很棒!

回答

2

可以交流#計時器,旋轉木馬頁面,contentPage的組合與圖片上我做了類似的事情,但使用按鈕導航轉盤頁面的後臺代碼:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using Xamarin.Forms; 

namespace SEEForgeX.Views 
{ 
class CarouselView : CarouselPage 
{ 
    ContentPage image1,image2,image3,image4; 
    public CarouselView() 
    { 
     NavigationPage.SetHasNavigationBar(this, false); 

     string btnPrevTitle = "< Prev"; 
     string btnNextTitle = "Next >"; 
     Color btnColor = Color.FromRgba(0, 0, 0, 0.5); 
     Color btnTextColor = Color.White; 
     LayoutOptions btnPosY = LayoutOptions.EndAndExpand; 
     LayoutOptions btnPrevPosX = LayoutOptions.StartAndExpand; 
     LayoutOptions btnNextPosX = LayoutOptions.EndAndExpand; 
     Font buttonFont = Font.SystemFontOfSize(16, FontAttributes.Bold); 
     int btnWidth = 100; 
     string exitBtnImg = "close.png"; 

     Button nextBtn1 = new Button 
     { 
      Text = btnNextTitle, 
      BackgroundColor = btnColor, 
      TextColor = btnTextColor, 
      VerticalOptions = btnPosY, 
      HorizontalOptions = btnNextPosX, 
      Font = buttonFont, 
      WidthRequest = btnWidth 
     }; 

     Button prevBtn2 = new Button 
      { 
       Text = btnPrevTitle, 
       BackgroundColor = btnColor, 
       TextColor = btnTextColor, 
       VerticalOptions = btnPosY, 
       HorizontalOptions = btnPrevPosX, 
       Font = buttonFont, 
       WidthRequest = btnWidth 
      }; 

     image1 = new ContentPage 
     { 
      BackgroundImage = "slide_01.jpg", 
      Content = new StackLayout 
      { 
       HorizontalOptions = LayoutOptions.FillAndExpand, 
       VerticalOptions = LayoutOptions.FillAndExpand, 
       Orientation = StackOrientation.Vertical, 
       Padding = 0, 

       Children = { 
        new StackLayout 
        { 
         Orientation = StackOrientation.Horizontal, 
         VerticalOptions = LayoutOptions.StartAndExpand, 
         Padding = new Thickness(0,10,10,0), 
         Children = { exitBtn1 } 
        }, 
        new StackLayout 
        { 
         Orientation = StackOrientation.Horizontal, 
         VerticalOptions = LayoutOptions.EndAndExpand, 
         Padding = 20, 
         Children = { nextBtn1 } 
        } 
       } 
      }, 
     }; 

     image2 = new ContentPage 
     { 
      BackgroundImage = "slide_02.jpg", 
      Content = new StackLayout 
      { 
       HorizontalOptions = LayoutOptions.FillAndExpand, 
       VerticalOptions = LayoutOptions.FillAndExpand, 
       Orientation = StackOrientation.Vertical, 
       Padding = 0, 
       Children = { 
        new StackLayout 
        { 
         Orientation = StackOrientation.Horizontal, 
         VerticalOptions = LayoutOptions.StartAndExpand, 
         Padding = new Thickness(0,10,10,0), 
         Children = { exitBtn2 } 
        }, 
        new StackLayout 
        { 
         Orientation = StackOrientation.Horizontal, 
         VerticalOptions = LayoutOptions.EndAndExpand, 
         Padding = 20, 
         Children = {prevBtn2, nextBtn2} 
        } 
       } 
      }, 

     }; 
//This is the children of the parent view is like adding stacklayout.children.add(foo) but since    my parent class is a CarouselPage I can access Children its children 
      Children.Add(image1); 
      Children.Add(image2); 

    void prevBtn2_Clicked(object sender, EventArgs e) 
    { 
     this.CurrentPage = image1; 
    } 

    void nextBtn1_Clicked(object sender, EventArgs e) 
    { 
     this.CurrentPage = image2; 
    } 

    private async void exitBtn_Clicked(object sender, EventArgs e) 
    { 
     //await Navigation.PopModalAsync(); 
     await Navigation.PopModalAsync(); 
    } 

我不執行計時器,但它應該不難,也許你甚至可以使用循環。

+0

嗨馬里奧,謝謝你的回覆。看起來這是我將採取的路線。我在想同樣的思路,但我希望能夠在旋轉木馬控制中建立某種內容......謝謝。 – Rick 2014-12-04 15:41:58

+0

@Rick:嗨Rick,您是否找到了自動幻燈片的解決方案?我想要一個在我的登錄頁面上運行的自動幻燈片。我無法在Xamarin.Form Portable中使用c#timer: – 2016-07-18 18:51:01

+0

@minamorsali也許你可以使用Device.StartTimer? https://developer.xamarin.com/api/member/Xamarin.Forms.Device.StartTimer/p/System .TimeSpan/System.Func%7BSystem.Boolean%7D/ – 2016-07-18 21:44:16