xamarin.formscardviewabsolutelayoutcontent-pages

Page with cards/frames in a listview (X.Forms 4.6+)


I had a question about X.Forms. Does anyone know how I can build such a page in X.Forms?

Flow of the page: The user must be able to create a note and/or make changes. I want to display these notes one below the other (preferably in a scrollable list view).

enter image description here enter image description here

Here is my code implementation that isn't really working fine.

    <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>

Solution

  • It should be something like this:

    <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>
    

    Here is the result:

    enter image description here