如何在Xamarin的CarouselPage上方添加浮点按钮？

问题描述

我想在此页面上添加一个按钮，以使其在屏幕上停留并漂浮在屏幕上，并且在按下幻​​灯片时不随CarouselPage滚动。​​

image

解决方法

您可以使用网格放置浮动按钮。

您需要将CarouselView和Button放在同一网格行上。

这是一个示例：

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

,

通过@deirahi

按照您的建议，我尝试使用代码，但是出现此错误，并且我将页面类型用作CarouselPage，如下图所示，

image

,

您可以使用CarouselView代替CarouselPage。您可以尝试下面的代码。它将ContentPage与CarouselView一起使用。

Xaml：

<?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,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;
    }
}    

截屏：