xamarin.forms - Xamarin formsCarousel View with Text, Image in the center of the screen with Dots indicator in below

Question

如何在 Xamarin Forms 中进行轮播视图。我在启动页面之后有一个启动页面，我需要在页面底部显示带有点指示符的四个指令页面。每个页面都有不同的图像，文字。我试过但无法得到它。这是我的代码：

   public Carousel(ObservableCollection<CarouselContent> pages)
    {
        HorizontalOptions = LayoutOptions.FillAndExpand;
        HorizontalOptions = LayoutOptions.FillAndExpand;
        carousel = new CarouselView();
        carousel.HorizontalOptions = LayoutOptions.FillAndExpand;
        carousel.VerticalOptions = LayoutOptions.FillAndExpand;

        var template = new DataTemplate(() => {
            var page1 = new AbsoluteLayout();
            page1.BackgroundColor = Color.FromHex("050C29");
            page1.HorizontalOptions = LayoutOptions.FillAndExpand;
            page1.VerticalOptions = LayoutOptions.FillAndExpand;
            page1.SetBinding(AbsoluteLayout.BackgroundColorProperty, "BackgroundColor");
            var image = new Image();
            image.SetBinding(Image.SourceProperty, "Image");
            image.HorizontalOptions = LayoutOptions.FillAndExpand;
            image.VerticalOptions = LayoutOptions.Center;
            var lab = new Label()
            {
                FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)) + 10,
                FontAttributes = FontAttributes.Bold
            };
            lab.TextColor = Color.White;
            lab.HorizontalOptions = LayoutOptions.Center;
            lab.VerticalOptions = LayoutOptions.Center;
            lab.FontFamily = "BrandonGrotesque-Bold.otf";
            lab.FontSize = 30;
            lab.SetBinding(Label.TextProperty, "Header");
            var lab2 = new Label()
            {
                FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
            };
            lab2.TextColor = Color.White;
            lab2.HorizontalOptions = LayoutOptions.Center;
            lab2.VerticalOptions = LayoutOptions.Center;
            lab.FontFamily = "BrandonGrotesque-Bold.otf";
            lab.FontSize = 24;
            lab2.SetBinding(Label.TextProperty, "Content1");
            page1.Children.Add(image);
            page1.Children.Add(lab);
            page1.Children.Add(lab2);
            StackLayout stackLayout = new StackLayout();
            stackLayout.Children.Add(page1);

            AbsoluteLayout.SetLayoutBounds(image, new Rectangle(2, 0, 1, 0));
            AbsoluteLayout.SetLayoutFlags(image, AbsoluteLayoutFlags.All);
            AbsoluteLayout.SetLayoutBounds(lab, new Rectangle(0, 0.3, 1, 0.2));
            AbsoluteLayout.SetLayoutFlags(lab, AbsoluteLayoutFlags.All);
            AbsoluteLayout.SetLayoutBounds(lab2, new Rectangle(0, 0.4, 1, 0.2));
            AbsoluteLayout.SetLayoutFlags(lab2, AbsoluteLayoutFlags.All);

            return page1;
        });

        carousel.ItemsSource = pages;
        carousel.ItemTemplate = template;
        carousel.PositionSelected += pageChanged;
        Children.Add(carousel);

    }

标签： xamarin.formscarousel

Answer 1

嗨，我是通过在 CarouselPage 中添加三个静态图像来完成的。每个图像在静态图像底部都有自己突出显示的点和按钮。从 Nouget 添加 CarouselPage 插件并执行以下代码；

<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="MyProject.Views.Login" 
           xmlns:pages="clr-namespace:MyProject.Views"
         Title="CarouselPage">

<ContentPage>
    <StackLayout>
        <Image HorizontalOptions="Center" VerticalOptions="Center" Source="bg_splash.png" Aspect="AspectFill"></Image>
    </StackLayout>
</ContentPage>
<ContentPage>
    <StackLayout>
        <Image HorizontalOptions="Center" VerticalOptions="Center" Source="img_about_1.png" Aspect="AspectFill"></Image>
    </StackLayout>
</ContentPage>
<ContentPage>
    <StackLayout>
        <Image HorizontalOptions="Center" VerticalOptions="Center" Source="img_about_2.png" Aspect="AspectFill"></Image>
    </StackLayout>
</ContentPage>
<ContentPage>
    <StackLayout>
        <Image HorizontalOptions="Center" VerticalOptions="Center" Source="img_about_3.png" Aspect="AspectFill"></Image>
    </StackLayout>
</ContentPage>
<pages:LoginPage/>

在轮播页面中哪个图像可见