Первый пользователь подключается к Xamarin.Forms - PullRequest
Новая
       6

Первый пользователь подключается к Xamarin.Forms

0 голосов
/ 11 марта 2020

Я впервые внедряю пользователя в приложение Xamarin.Forms, как показано на рисунке ниже:

onboarding screenshot

Пожалуйста, как я могу быстро сделать это? Заранее спасибо.

Ответы [ 2 ]

3 голосов
/ 12 марта 2020

Хотите ли вы добиться результата, подобного следующему GIF? enter image description here

Вы можете использовать CarouselView и IndicatorView для достижения этого.

Вот код макета. Я не настраиваю макет как ваш, вы можете отрегулируйте его самостоятельно. Если вы хотите, чтобы кнопки «Далее» и «Пропустить» над плавающей точкой CarouselView, вы можете использовать AbsoluteLayout 

     <StackLayout Margin="10">
        <CarouselView x:Name="myCarouselView" ItemsSource="{Binding Monkeys}"
                      IndicatorView="indicatorView">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Frame HasShadow="True"
                               BorderColor="DarkGray"
                               CornerRadius="5"
                               Margin="50"
                               HeightRequest="300"
                               HorizontalOptions="Center"
                               VerticalOptions="CenterAndExpand">
                            <StackLayout>
                                <Label Text="{Binding Name}" 
                                       FontAttributes="Bold"
                                       FontSize="Large"
                                       HorizontalOptions="Center"
                                       VerticalOptions="Center" />
                                <Image Source="{Binding ImageUrl}" 
                                       Aspect="AspectFill"
                                       HeightRequest="150"
                                       WidthRequest="150"
                                       HorizontalOptions="Center" />
                                <Label Text="{Binding Location}"
                                       HorizontalOptions="Center" />
                                <Label Text="{Binding Details}"
                                       FontAttributes="Italic"
                                       HorizontalOptions="Center"
                                       MaxLines="5"
                                       LineBreakMode="TailTruncation" />
                            </StackLayout>
                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Button Text="Skip" Grid.Column="0" BackgroundColor="Transparent" Clicked="Button_Clicked"></Button>
            <Button Text="Next"  Grid.Column="1" BackgroundColor="Transparent" Clicked="Button_Clicked_1"></Button>
        </Grid>

        <IndicatorView x:Name="indicatorView"
                       MaximumVisible="6"
                       Margin="0,0,0,40"
                       IndicatorColor="LightGray"
                       SelectedIndicatorColor="DarkGray"
                       HorizontalOptions="Center" />
    </StackLayout>

Вот код макета. 

    public partial class BasicIndicatorViewPage : ContentPage
    {
        int monkeyCount;
        public BasicIndicatorViewPage()
        {
            InitializeComponent();
            MonkeysViewModel monkeysViewModel= new MonkeysViewModel();

            monkeyCount = monkeysViewModel.Monkeys.Count;
            BindingContext = monkeysViewModel;
        }

        private void Button_Clicked(object sender, System.EventArgs e)
        {
            Navigation.PushAsync(new Page1());
            Navigation.RemovePage(this);
        }

        private void Button_Clicked_1(object sender, System.EventArgs e)
        {
            if (myCarouselView.Position  < monkeyCount-1)
            {
                myCarouselView.Position += 1;
            }
            else
            {
                Navigation.PushAsync(new Page1());
                Navigation.RemovePage(this);
            }

        }
    }

Вот мое демо, вы можете скачать его. https://github.com/851265601/XFormsCarouselView-IndicatorViewLoginPage

Если вы хотите поместить indicatorView и Button в одну строку, как на этом скриншоте.

enter image description here

Вы можете использовать эту раскладку (indicatorView до Grid). 

   <StackLayout Margin="10">
        <CarouselView x:Name="myCarouselView" ItemsSource="{Binding Monkeys}"
                      IndicatorView="indicatorView">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Frame HasShadow="True"
                               BorderColor="DarkGray"
                               CornerRadius="5"
                               Margin="50"
                               HeightRequest="300"
                               HorizontalOptions="Center"
                               VerticalOptions="CenterAndExpand">
                            <StackLayout>
                                <Label Text="{Binding Name}" 
                                       FontAttributes="Bold"
                                       FontSize="Large"
                                       HorizontalOptions="Center"
                                       VerticalOptions="Center" />
                                <Image Source="{Binding ImageUrl}" 
                                       Aspect="AspectFill"
                                       HeightRequest="150"
                                       WidthRequest="150"
                                       HorizontalOptions="Center" />
                                <Label Text="{Binding Location}"
                                       HorizontalOptions="Center" />
                                <Label Text="{Binding Details}"
                                       FontAttributes="Italic"
                                       HorizontalOptions="Center"
                                       MaxLines="5"
                                       LineBreakMode="TailTruncation" />
                            </StackLayout>
                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="2*" />

                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Button Text="Skip" Grid.Column="0" BackgroundColor="Transparent" Clicked="Button_Clicked"></Button>
            <IndicatorView x:Name="indicatorView"
                       MaximumVisible="6"

                       IndicatorColor="LightGray"
                       SelectedIndicatorColor="DarkGray"
                       HorizontalOptions="Center" Grid.Column="1" />
            <Button Text="Next"  Grid.Column="2" BackgroundColor="Transparent" Clicked="Button_Clicked_1"></Button>
        </Grid>


    </StackLayout>
0 голосов
/ 12 марта 2020

Вы можете использовать официальные Xamarin.Forms CarouselView , но это все еще в предварительном просмотре. Вы также можете посмотреть на решение Sharpnado с HorizontalListView . Третий вариант - использовать CarouselView Алекса Рейнмана .

...