Xamarin formsCarousel Вид с текстом, изображение в центре экрана с индикатором точек внизу - PullRequest
Новая
       37

Xamarin formsCarousel Вид с текстом, изображение в центре экрана с индикатором точек внизу

0 голосов
/ 28 декабря 2018

Как сделать просмотр карусели в формах Xamarin.У меня есть страница-заставка после страницы-заставки, мне нужно показать страницу с четырьмя инструкциями с точечным индикатором внизу страницы.У каждой страницы свое изображение, текст.Я пытался, но не смог получить это.Вот мой код: 

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

    }

1 Ответ

0 голосов
/ 28 декабря 2018

Привет, я добавил три статических изображения в CarouselPage.Каждое изображение имеет свою выделенную точку и кнопку внизу статического изображения.Добавьте плагин CarouselPage из Nouget и сделайте следующий код: 

<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/>

На странице карусели, изображение которой видно, сделайте выделенную точку для этого изображения, как это .. * ..

...