依照MAUI官方实验简述,该实验所实现的最终成果应用,名为MonkeyFinder。
在Model文件夹下创建一个Model,如
public class Monkey
{
public string Name { get; set; }
public string Location { get; set; }
public string Details { get; set; }
public string Image { get; set; }
public int Population { get; set; }
public double Latitude { get; set; }
public double Longitude { get; set; }
}
Monkey类具备属性,也可以具备方法。
在视图,即布局文件中加入xmlns:model="clr-namespace:MonkeyFinder.Model"
命名空间,这将允许我们引用上面的 Monkey 类来进行数据绑定。
以硬编码方式创建视图以展示数据,如在 MainPage.xaml 的 ContentPage
中添加:
<CollectionView>
<CollectionView.ItemsSource>
<x:Array Type="{x:Type model:Monkey}">
<model:Monkey
Name="Baboon"
Image="https://raw.githubusercontent.com/jamesmontemagno/app-monkeys/master/baboon.jpg"
Location="Africa and Asia" />
<model:Monkey
Name="Capuchin Monkey"
Image="https://raw.githubusercontent.com/jamesmontemagno/app-monkeys/master/capuchin.jpg"
Location="Central and South America" />
<model:Monkey
Name="Red-shanked douc"
Image="https://raw.githubusercontent.com/jamesmontemagno/app-monkeys/master/douc.jpg"
Location="Vietnam" />
</x:Array>
</CollectionView.ItemsSource>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="model:Monkey">
<HorizontalStackLayout Padding="10">
<Image
Aspect="AspectFill"
HeightRequest="100"
Source="{Binding Image}"
WidthRequest="100" />
<Label VerticalOptions="Center" TextColor="Gray">
<Label.Text>
<MultiBinding StringFormat="{}{0} | {1}">
<Binding Path="Name" />
<Binding Path="Location" />
</MultiBinding>
</Label.Text>
</Label>
</HorizontalStackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
ItemsSource定义了数据源,ItemTemplate定义了数据绑定。
当前运行的效果为