仅在 xamarin 形式的标题中滑动手势
Swipegesture only in title in xamarin forms
我需要一个包含 header 和内容的视图。
假设应用程序显示水果名称及其详细信息。
说第一个视图将有 header -“草莓”,内容是草莓的图片和细节。我只需要在 header“草莓”上进行滑动操作,以便在滑动它时,下一个项目“芒果”出现在 header 中,下面是芒果的详细信息。
所以现在 header“Mango”必须可以左右滑动。向右滑动查看上一个水果草莓的详情或向左滑动查看下一个fruit-Orange的详情。
如果橙子是最后一个水果,它应该在 header 中有滑动操作,只是为了查看上一张图片,因为它没有任何东西可以显示为下一个项目。
我在一个列表中有所有的水果名称和其他详细信息。请提醒我如何实现这一点
Xamarin.Forms提供滑动手势,可以对页眉应用滑动手势。
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/swipe
最简单的方法是使用 CarouselView 作为标题。
如下所示的简单示例:
页面 xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="NewForms.CollectionViewPage">
<ContentPage.Content>
<StackLayout>
<CarouselView x:Name="collection" ItemSource={Binding Fruits} HeightRequest="50" Loop="False">
<CarouselView.ItemTemplate>
<DataTemplate>
<Label Text="{Binding Name}"></Label> //this for the header content
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<StackLayout Orientation="Vertical" BindingContext="{Binding Path=CurrentItem,Source={x:Reference collection}}">
<Label Text="{Binding Details}"></Label> //binding the details content
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
page.xaml.cs:
public CarouselViewPage()
{
InitializeComponent();
FruitModel fruitModel = new FruitModel();
BindingContext = fruitModel;
}
视图模型:
class FruitModel
{
public ObservableCollection<Fruit> Fruits { get; set; }
public FruitModel()
{
Fruits = new ObservableCollection<Fruit>();
Fruits.Add(new Fruit() { Name = "Apple", Details = "Thi is an apple" });
Fruits.Add(new Fruit() { Name = "Pear", Details = "Thi is a Pear" });
Fruits.Add(new Fruit() { Name = "Banana", Details = "Thi is a Banana" });
Fruits.Add(new Fruit() { Name = "Strawberry", Details = "Thi is a Strawberry" });
}
}
型号:
class Fruit
{
public string Name { get; set; }
public string Details { get; set; }
}
您可以根据需要更改模板和数据库。
我需要一个包含 header 和内容的视图。 假设应用程序显示水果名称及其详细信息。
说第一个视图将有 header -“草莓”,内容是草莓的图片和细节。我只需要在 header“草莓”上进行滑动操作,以便在滑动它时,下一个项目“芒果”出现在 header 中,下面是芒果的详细信息。
所以现在 header“Mango”必须可以左右滑动。向右滑动查看上一个水果草莓的详情或向左滑动查看下一个fruit-Orange的详情。
如果橙子是最后一个水果,它应该在 header 中有滑动操作,只是为了查看上一张图片,因为它没有任何东西可以显示为下一个项目。
我在一个列表中有所有的水果名称和其他详细信息。请提醒我如何实现这一点
Xamarin.Forms提供滑动手势,可以对页眉应用滑动手势。
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/swipe
最简单的方法是使用 CarouselView 作为标题。
如下所示的简单示例:
页面 xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="NewForms.CollectionViewPage">
<ContentPage.Content>
<StackLayout>
<CarouselView x:Name="collection" ItemSource={Binding Fruits} HeightRequest="50" Loop="False">
<CarouselView.ItemTemplate>
<DataTemplate>
<Label Text="{Binding Name}"></Label> //this for the header content
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<StackLayout Orientation="Vertical" BindingContext="{Binding Path=CurrentItem,Source={x:Reference collection}}">
<Label Text="{Binding Details}"></Label> //binding the details content
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
page.xaml.cs:
public CarouselViewPage()
{
InitializeComponent();
FruitModel fruitModel = new FruitModel();
BindingContext = fruitModel;
}
视图模型:
class FruitModel
{
public ObservableCollection<Fruit> Fruits { get; set; }
public FruitModel()
{
Fruits = new ObservableCollection<Fruit>();
Fruits.Add(new Fruit() { Name = "Apple", Details = "Thi is an apple" });
Fruits.Add(new Fruit() { Name = "Pear", Details = "Thi is a Pear" });
Fruits.Add(new Fruit() { Name = "Banana", Details = "Thi is a Banana" });
Fruits.Add(new Fruit() { Name = "Strawberry", Details = "Thi is a Strawberry" });
}
}
型号:
class Fruit
{
public string Name { get; set; }
public string Details { get; set; }
}
您可以根据需要更改模板和数据库。