Xamarin formsCarousel View with Text, Image in the center of the screen with Dots indicator in below答案

【问题标题】：Xamarin formsCarousel View with Text, Image in center of the Screen With Dots indicator in BelowXamarin formsCarousel View with Text, Image in the center of the screen with Dots indicator in below
【发布时间】：2018-12-28 07:42:19
【问题描述】：

如何在 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);

    }

【问题讨论】：

你能贴出你试过的代码吗？
@DineshPhalwadiya 我已经发布了我尝试过的代码。

标签： xamarin.forms carousel

【解决方案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/>

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

【讨论】：