列表视图中包含 cards/frames 的页面(X.Forms 4.6+)
Page with cards/frames in a listview (X.Forms 4.6+)
我有一个关于 X.Forms 的问题。有谁知道我如何在 X.Forms 中构建这样的页面?
页面流程:
用户必须能够创建注释 and/or 进行更改。我想一个一个地显示这些笔记(最好在可滚动的列表视图中)。
这是我的代码实现,但效果不是很好。
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Xamarin.Forms.TestPage">
<ContentPage.Content>
<AbsoluteLayout BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Blue" AbsoluteLayout.LayoutBounds="1,0,1,0.1" AbsoluteLayout.LayoutFlags="All" />
<StackLayout AbsoluteLayout.LayoutBounds="1,1,1,0.9" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="LightGray"/>
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame>
<Editor></Editor>
<Button x:Name="CreateOrChangeButton" Text="Create/Change" Clicked=""></Button>
<Button x:Name="DeleteButton" Text="Delete" Clicked=""></Button>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
应该是这样的:
<ListView RowHeight="300" SeparatorVisibility="None" BackgroundColor="White">
<ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>mono</x:String>
<x:String>monodroid</x:String>
<x:String>monotouch</x:String>
</x:Array>
</ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Frame Margin="40" BackgroundColor="Yellow" HeightRequest="220">
<StackLayout>
<Editor Text="test" HeightRequest="150"></Editor>
<StackLayout Orientation="Horizontal">
<Button x:Name="CreateOrChangeButton" Text="Create/Change" TextColor="Black" HorizontalOptions="FillAndExpand"></Button>
<Button x:Name="DeleteButton" Text="Delete" TextColor="Black" BackgroundColor="Brown" HorizontalOptions="FillAndExpand"></Button>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
结果如下:
我有一个关于 X.Forms 的问题。有谁知道我如何在 X.Forms 中构建这样的页面?
页面流程: 用户必须能够创建注释 and/or 进行更改。我想一个一个地显示这些笔记(最好在可滚动的列表视图中)。
这是我的代码实现,但效果不是很好。
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Xamarin.Forms.TestPage">
<ContentPage.Content>
<AbsoluteLayout BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Blue" AbsoluteLayout.LayoutBounds="1,0,1,0.1" AbsoluteLayout.LayoutFlags="All" />
<StackLayout AbsoluteLayout.LayoutBounds="1,1,1,0.9" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="LightGray"/>
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame>
<Editor></Editor>
<Button x:Name="CreateOrChangeButton" Text="Create/Change" Clicked=""></Button>
<Button x:Name="DeleteButton" Text="Delete" Clicked=""></Button>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
应该是这样的:
<ListView RowHeight="300" SeparatorVisibility="None" BackgroundColor="White">
<ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>mono</x:String>
<x:String>monodroid</x:String>
<x:String>monotouch</x:String>
</x:Array>
</ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Frame Margin="40" BackgroundColor="Yellow" HeightRequest="220">
<StackLayout>
<Editor Text="test" HeightRequest="150"></Editor>
<StackLayout Orientation="Horizontal">
<Button x:Name="CreateOrChangeButton" Text="Create/Change" TextColor="Black" HorizontalOptions="FillAndExpand"></Button>
<Button x:Name="DeleteButton" Text="Delete" TextColor="Black" BackgroundColor="Brown" HorizontalOptions="FillAndExpand"></Button>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
结果如下: