c# - 如何在 Xamarin 的 CarouselPage 上方添加按钮浮动？

Question

我想在此页面上添加一个按钮，以便它在屏幕上停留并浮动在相同的上方，并且当我按下幻灯片时不会与 CarouselPage 一起滚动。

图片

标签： c#visual-studioxamlxamarinxamarin.forms

Answer 1

您可以使用CarouselView而不是CarouselPage. 你可以试试下面的代码。它使用ContentPagewith CarouselView。

xml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="CarouselPageNavigation.Page2"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <CarouselView Grid.Row="0" ItemsSource="{Binding colorsDataModels}">
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <Label
                        FontSize="Medium"
                        HorizontalOptions="Center"
                        Text="{Binding Name}" />
                    <BoxView
                        HeightRequest="200"
                        HorizontalOptions="Center"
                        VerticalOptions="CenterAndExpand"
                        WidthRequest="200"
                        Color="{Binding Color}" />
                </StackLayout>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>
    <Button
        Grid.Row="0"
        Margin="0,0,20,22"
        BackgroundColor="#4ba862"
        BorderColor="#2b3c3c"
        BorderRadius="35"
        BorderWidth="1"
        FontAttributes="Bold"
        HeightRequest="70"
        HorizontalOptions="End"
        Text="Hello"
        TextColor="White"
        VerticalOptions="End"
        WidthRequest="160" />
</Grid>
</ContentPage>

后面的代码：

public partial class Page2 : ContentPage
{
    public ObservableCollection<ColorsDataModel> colorsDataModels { get; set; }
    public Page2()
    {
        InitializeComponent();
        colorsDataModels = new ObservableCollection<ColorsDataModel> {
            new ColorsDataModel {
                Name = "Red",
                Color = Color.Red
            },
            new ColorsDataModel {
                Name = "Green",
                Color = Color.Green
            },
            new ColorsDataModel {
                Name = "Blue",
                Color = Color.Blue
            }
        };
        this.BindingContext = this;
    }
}    

截屏：