如何在 Xamarin 表单中填写此 UI？
How to fullfill this UI in Xamarin forms?
我想在 Xamarin Forms 中实现此 UI。这是我的UI.
的截图
所以我不知道如何在 xamarin 表单 中执行此操作 UI。我很困惑是 cardview 还是 view 我必须在其中添加所有这些 images和 标签 。我需要一些实施此 UI.
的建议
我假设您将有几家餐馆作为某种搜索结果，如果有很多结果，大概视图必须是可滚动的？
我会用 ListView 实现它：
<ListView ItemsSource="{Binding Restaurants} HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Height="100">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*">
<RowDefinition Height="*">
<RowDefinition Height="*">
<RowDefinition Height="*">
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="{Binding PreviewImage}" .... />
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding Title}" ... />
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding Address}" ... />
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding FoodTypes}" ... />
<!-- Add implementations for Rating, Like-Button and other labels in according rows and columns -->
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
您的餐厅项目还需要一个模型 class，它将包含我在 {Binding XXX} 标签中勾勒出的所有数据。在您的代码隐藏中，您必须创建一个列表（或更好的 ObservableCollection ）并将其设置为 ListView 的 Itemssource。
此外，您可能需要为视觉修饰添加一些效果或自定义渲染器，例如投影等
您可以使用 Xamarin.Forms 中可用的“框架”布局创建 "CardView"。
代码如下：
CardViewTemplate.xml:
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App68.CardViewTemplate">
<ContentView.Content>
<Frame IsClippedToBounds="True"
HasShadow="True"
Margin="30"
BorderColor="White"
BackgroundColor="White" >
<Frame.OutlineColor>
<OnPlatform x:TypeArguments="Color"
Android="Gray"
iOS="Gray"/>
</Frame.OutlineColor>
<Frame.Margin>
<OnPlatform x:TypeArguments="Thickness"
Android="10"
iOS="10"/>
</Frame.Margin>
<StackLayout Orientation="Horizontal">
<Grid VerticalOptions="CenterAndExpand"
Padding="0"
HorizontalOptions="FillAndExpand"
BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="{Binding PreviewImage}" />
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding RestaurantName}" />
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding Address}" />
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding FoodTypes}" />
<Label Grid.Row="3" Grid.Column="1" Text="{Binding Rating}" />
<Label Grid.Row="3" Grid.Column="2" Text="{Binding Time}" />
<Label Grid.Row="3" Grid.Column="3" Text="{Binding Distance}" />
</Grid>
</StackLayout>
</Frame>
</ContentView.Content>
</ContentView>
MainPage.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"
xmlns:local="clr-namespace:App68"
x:Class="App68.MainPage">
<StackLayout Orientation="Vertical">
<Label Text="CardView Demo in Xamarin Forms"
FontAttributes="Bold"
FontSize="Medium"
VerticalOptions="Start"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
BackgroundColor="Transparent"
HorizontalOptions="CenterAndExpand" />
<ListView x:Name="listView"
SelectedItem="{Binding SelcetedItem,Mode=TwoWay}"
HasUnevenRows="True"
ItemsSource="{Binding lstRestaurants}" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<local:CardViewTemplate/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
Restaurant.cs
using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
namespace App68
{
class Restaurant
{
public String PreviewImage { get; set; }
public string RestaurantName { get; set; }
public bool IsFavorite { get; set; }
public string Address { get; set; }
public string FoodTypes { get; set; }
public Image RatingIcon { get; set; }
public double Rating { get; set; }
public Image TimeIcon { get; set; }
public double Time { get; set; }
public Image DistanceIcon { get; set; }
public double Distance { get; set; }
}
}
RestaurantViewModel.cs
using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
namespace App68
{
class RestaurantViewModel
{
public IList<Restaurant> lstRestaurants { get; set; }
public object SelectedItem { get; set; }
public RestaurantViewModel()
{
lstRestaurants = new List<Restaurant>();
GenerateCardModel();
}
private void GenerateCardModel()
{
var restaurant1 = new Restaurant()
{
PreviewImage = "Restaurant_1.jpg",
RestaurantName = "Premera restaurant",
IsFavorite = true,
Address = "Avenue Road 256",
FoodTypes = "India Italy Chinese kitchen",
Rating = 4.3,
Time = 150,
Distance = 3
};
lstRestaurants.Add(restaurant1);
var restaurant2 = new Restaurant()
{
PreviewImage = "Restaurant_2.jpg",
RestaurantName = "Premera restaurant",
IsFavorite = true,
Address = "Avenue Road 256",
FoodTypes = "India Italy Chinese kitchen",
Rating = 4.3,
Time = 150,
Distance = 3
};
lstRestaurants.Add(restaurant2);
}
}
}
效果如下：
我为此使用了 XFXCardview UI。它似乎工作得很好。 This is the GitHub link。所以这些是我在代码中所做的更改 -
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="20"
HeightRequest="150" IsClippedToBounds="True">
<Grid RowSpacing="0" >
<Grid ColumnSpacing="0">
<Grid.RowDefinitions >
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Frame Margin="10,10,10,-20" Padding="-30" CornerRadius="10" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,0,0,0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" BackgroundColor="AliceBlue" Source="restaurantimage1.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Margin="0,30,30,0" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>
<Image Grid.Row="0" Grid.Column="1" Margin="0,30,10,0" HorizontalOptions="End" Source="whitehearticon3.jpg"/>
<Label Grid.Row="1" Grid.Column="1" Margin="0,-20,40,0" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>
<Label Grid.Row="2" Grid.Column="1" Margin="0,-40,40,0" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese Kitchen" TextColor="LightGray"/>
<Image Grid.Row="3" Grid.Column="1" Margin="0,-20,30,0" Source="whitestaricon1.png" WidthRequest="10" HeightRequest="10" BackgroundColor="Blue"/>
<Label Grid.Row="3" Grid.Column="1" Margin="0,-20,40,0" HorizontalTextAlignment="Center" Text="4,3"/>
</Grid>
</Grid>
</xfx:XfxCardView>
我想在 Xamarin Forms 中实现此 UI。这是我的UI.
的截图所以我不知道如何在 xamarin 表单 中执行此操作 UI。我很困惑是 cardview 还是 view 我必须在其中添加所有这些 images和 标签 。我需要一些实施此 UI.
的建议我假设您将有几家餐馆作为某种搜索结果，如果有很多结果，大概视图必须是可滚动的？
我会用 ListView 实现它：
<ListView ItemsSource="{Binding Restaurants} HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Height="100">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*">
<RowDefinition Height="*">
<RowDefinition Height="*">
<RowDefinition Height="*">
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="{Binding PreviewImage}" .... />
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding Title}" ... />
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding Address}" ... />
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding FoodTypes}" ... />
<!-- Add implementations for Rating, Like-Button and other labels in according rows and columns -->
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
您的餐厅项目还需要一个模型 class，它将包含我在 {Binding XXX} 标签中勾勒出的所有数据。在您的代码隐藏中，您必须创建一个列表（或更好的 ObservableCollection ）并将其设置为 ListView 的 Itemssource。
此外，您可能需要为视觉修饰添加一些效果或自定义渲染器，例如投影等
您可以使用 Xamarin.Forms 中可用的“框架”布局创建 "CardView"。
代码如下：
CardViewTemplate.xml:
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App68.CardViewTemplate">
<ContentView.Content>
<Frame IsClippedToBounds="True"
HasShadow="True"
Margin="30"
BorderColor="White"
BackgroundColor="White" >
<Frame.OutlineColor>
<OnPlatform x:TypeArguments="Color"
Android="Gray"
iOS="Gray"/>
</Frame.OutlineColor>
<Frame.Margin>
<OnPlatform x:TypeArguments="Thickness"
Android="10"
iOS="10"/>
</Frame.Margin>
<StackLayout Orientation="Horizontal">
<Grid VerticalOptions="CenterAndExpand"
Padding="0"
HorizontalOptions="FillAndExpand"
BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="{Binding PreviewImage}" />
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding RestaurantName}" />
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding Address}" />
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding FoodTypes}" />
<Label Grid.Row="3" Grid.Column="1" Text="{Binding Rating}" />
<Label Grid.Row="3" Grid.Column="2" Text="{Binding Time}" />
<Label Grid.Row="3" Grid.Column="3" Text="{Binding Distance}" />
</Grid>
</StackLayout>
</Frame>
</ContentView.Content>
</ContentView>
MainPage.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"
xmlns:local="clr-namespace:App68"
x:Class="App68.MainPage">
<StackLayout Orientation="Vertical">
<Label Text="CardView Demo in Xamarin Forms"
FontAttributes="Bold"
FontSize="Medium"
VerticalOptions="Start"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
BackgroundColor="Transparent"
HorizontalOptions="CenterAndExpand" />
<ListView x:Name="listView"
SelectedItem="{Binding SelcetedItem,Mode=TwoWay}"
HasUnevenRows="True"
ItemsSource="{Binding lstRestaurants}" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<local:CardViewTemplate/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
Restaurant.cs
using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
namespace App68
{
class Restaurant
{
public String PreviewImage { get; set; }
public string RestaurantName { get; set; }
public bool IsFavorite { get; set; }
public string Address { get; set; }
public string FoodTypes { get; set; }
public Image RatingIcon { get; set; }
public double Rating { get; set; }
public Image TimeIcon { get; set; }
public double Time { get; set; }
public Image DistanceIcon { get; set; }
public double Distance { get; set; }
}
}
RestaurantViewModel.cs
using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
namespace App68
{
class RestaurantViewModel
{
public IList<Restaurant> lstRestaurants { get; set; }
public object SelectedItem { get; set; }
public RestaurantViewModel()
{
lstRestaurants = new List<Restaurant>();
GenerateCardModel();
}
private void GenerateCardModel()
{
var restaurant1 = new Restaurant()
{
PreviewImage = "Restaurant_1.jpg",
RestaurantName = "Premera restaurant",
IsFavorite = true,
Address = "Avenue Road 256",
FoodTypes = "India Italy Chinese kitchen",
Rating = 4.3,
Time = 150,
Distance = 3
};
lstRestaurants.Add(restaurant1);
var restaurant2 = new Restaurant()
{
PreviewImage = "Restaurant_2.jpg",
RestaurantName = "Premera restaurant",
IsFavorite = true,
Address = "Avenue Road 256",
FoodTypes = "India Italy Chinese kitchen",
Rating = 4.3,
Time = 150,
Distance = 3
};
lstRestaurants.Add(restaurant2);
}
}
}
效果如下：
我为此使用了 XFXCardview UI。它似乎工作得很好。 This is the GitHub link。所以这些是我在代码中所做的更改 -
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="20"
HeightRequest="150" IsClippedToBounds="True">
<Grid RowSpacing="0" >
<Grid ColumnSpacing="0">
<Grid.RowDefinitions >
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Frame Margin="10,10,10,-20" Padding="-30" CornerRadius="10" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,0,0,0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" BackgroundColor="AliceBlue" Source="restaurantimage1.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Margin="0,30,30,0" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>
<Image Grid.Row="0" Grid.Column="1" Margin="0,30,10,0" HorizontalOptions="End" Source="whitehearticon3.jpg"/>
<Label Grid.Row="1" Grid.Column="1" Margin="0,-20,40,0" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>
<Label Grid.Row="2" Grid.Column="1" Margin="0,-40,40,0" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese Kitchen" TextColor="LightGray"/>
<Image Grid.Row="3" Grid.Column="1" Margin="0,-20,30,0" Source="whitestaricon1.png" WidthRequest="10" HeightRequest="10" BackgroundColor="Blue"/>
<Label Grid.Row="3" Grid.Column="1" Margin="0,-20,40,0" HorizontalTextAlignment="Center" Text="4,3"/>
</Grid>
</Grid>
</xfx:XfxCardView>