如何解决如何在Xamarin的CarouselPage上方添加浮点按钮?
我想在此页面上添加一个按钮,以使其在屏幕上停留并漂浮在屏幕上,并且在按下幻灯片时不随CarouselPage滚动。
解决方法
您可以使用网格放置浮动按钮。
您需要将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,如下图所示,
,您可以使用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;
}
}
截屏:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。