Xamarin 形成自动图像幻灯片/轮播

本文关键字：幻灯片 轮播 图像 Xamarin | 更新日期: 2023-09-27 18:32:46

我是Xamarin Forms的新手，但我设法创建了一个具有多个页面的简单应用程序，并且能够在页面之间导航。

我已经成功添加了图像，按钮和其他基本控件，看起来相当不错。

我的问题是我无法弄清楚如何在页面上创建多个图像的自动轮播。任何谷歌搜索都会返回轮播页面，使用户能够滑动屏幕以更改页面。

我正在考虑使用带有 3 张图像的水平滚动器，但它并没有真正具有相同的效果 - 用户将不得不在图像中移动自己！

有没有人找到做到这一点的方法？任何提示或提示都会很棒！

Xamarin 形成自动图像幻灯片/轮播

您可以编写 c# 计时器、轮播页面和内容页面的组合，背景上有图像 我做了类似的事情，但使用按钮导航轮播页面：

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

我没有实现计时器，但这应该不难，也许你甚至可以使用循环。

相关文章：