初次使用Xamarin.Forms的用户

Question

我正在Xamarin.Forms应用程序中实现首次用户入门，如下图所示：

请，我如何快速做到这一点？预先谢谢你。

Answer 1

您可以使用官方的Xamarin.Forms CarouselView，但仍在预览中。您也可能会用Sharpnado's查看HorizontalListView解决方案。您的第三个选择是使用Alex Rainman's CarouselView。

Answer 2

您是否想获得像跟随GIF一样的结果？

您可以使用CarouselView和IndicatorView实现它。

这里是布局代码。我没有像您一样调整布局，您可以自己调整它，如果您想使Next和Skip Button悬停在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放在此屏幕快照的同一行中。

您可以使用此布局（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>