如何在 Xamarin 中的 CarouselPage 上方添加浮動按鈕？

Question

我想向此頁面添加一個按鈕，以便它在屏幕上保持並浮動在同一頁面上方，並且在我按下幻燈片時不會隨 CarouselPage 一起滾動。

圖片

Answer 1

您可以使用CarouselView而不是CarouselPage 。 你可以試試下面的代碼。 它使用ContentPage和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;
    }
}    

截屏：

Answer 2

您可以使用網格放置浮動按鈕。

您需要將 CarouselView 和 Buttons 放在同一個 Grid Row 上。

這是一個示例：

        <Grid >
            <CarouselView Grid.Row="0">
                <CarouselView.ItemsSource>
                    <x:Array Type="{x:Type ContentView}">
                        <ContentView>
                            <StackLayout BackgroundColor="Blue" />
                        </ContentView>
                        <ContentView>
                            <StackLayout BackgroundColor="Red">
                                <Label Text="Label inside of a simple ContentView" HorizontalOptions="Center" VerticalOptions="Center"/>
                                <Button Text="dummy button" />
                            </StackLayout>
                        </ContentView>
                    </x:Array>
                </CarouselView.ItemsSource>
                <CarouselView.ItemTemplate>
                    <DataTemplate>
                        <ContentView Content="{Binding .}" />
                    </DataTemplate>
                </CarouselView.ItemTemplate>
            </CarouselView>
            <StackLayout Grid.Row="0" Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="FillAndExpand">
                <Button Text="tool1 button" HorizontalOptions="CenterAndExpand"/>
                <Button Text="tool2 button" HorizontalOptions="CenterAndExpand"/>
                <Button Text="tool3 button" HorizontalOptions="CenterAndExpand"/>
            </StackLayout>
        </Grid>

Answer 3

來自@deirahi

我嘗試按照您的建議使用代碼，但出現此錯誤，我將頁面類型用作 CarouselPage，如下圖所示，

圖片