如何使用Xamarin在单元格视图中显示数据

时间:2019-01-31 12:21:47

标签: api xaml user-interface xamarin.forms cross-platform

我正在Xamarin中构建CrossPlatform应用程序!

我正在从Web Api获取数据,并且工作正常,问题是数据以ListView的形式显示,例如coloumns,但是我想以Cells View的形式显示该数据,所以我可以添加功能像left and right swipe一样,我不知道该怎么做。

我当前的XAML UI

    <?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="LastTry.Attendance">


    <ListView x:Name="selectOrd" RowHeight="50" SeparatorColor="White" 
                  HasUnevenRows="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell >
                    <StackLayout   Orientation="Horizontal"  >
                        <StackLayout Orientation="Horizontal" VerticalOptions="Center">
                            <Label  Text="{Binding id}" Font="9" TextColor="Black" />
                        </StackLayout>
                        <StackLayout HorizontalOptions="FillAndExpand"  x:Name="employee_name" VerticalOptions="Center"  >
                            <Label  Text="{Binding employee_name}" Font="9" TextColor="Black"   FontAttributes="Bold" HorizontalTextAlignment="Center"/>
                        </StackLayout>
                        <StackLayout HorizontalOptions="FillAndExpand"  x:Name="employee_salary" VerticalOptions="Center"  >
                            <Label  Text="{Binding employee_salary}" Font="9" TextColor="Black"   FontAttributes="Bold" HorizontalTextAlignment="Center"/>
                        </StackLayout>
                        <StackLayout HorizontalOptions="FillAndExpand"  x:Name="employee_age" VerticalOptions="Center"  >
                            <Label  Text="{Binding employee_age}" Font="9" TextColor="Black"   FontAttributes="Bold" HorizontalTextAlignment="Center"/>
                        </StackLayout>
                        <StackLayout HorizontalOptions="FillAndExpand"  x:Name="profile_image" VerticalOptions="Center"  >
                            <Label  Text="{Binding profile_image}" Font="9" TextColor="Black"   FontAttributes="Bold" HorizontalTextAlignment="Center"/>
                        </StackLayout>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

</ContentPage>

以下是我想要的示例:

enter image description here

1 个答案:

答案 0 :(得分:2)

以下是列表视图的代码:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="MSPL.Views.HomePage">

<AbsoluteLayout>

    <ListView x:Name="Demolist" BackgroundColor="White" ItemSelected="Demolist_ItemSelected">

        <ListView.ItemTemplate>
            <DataTemplate>

                <ImageCell Height="30"
                            Text="{Binding employee_name }"
                       Detail="{Binding employee_age}"
                        ImageSource="falto.png">

                    <ImageCell.ContextActions>
                        <MenuItem x:Name="OnMore" Clicked="OnMore_Clicked" CommandParameter="{Binding .}"  Text="More" />
                        <MenuItem x:Name="OnDelete" Clicked="OnDelete_Clicked" CommandParameter="{Binding .}" Text="Delete" IsDestructive="True" />
                    </ImageCell.ContextActions>
                </ImageCell>

            </DataTemplate>
        </ListView.ItemTemplate>

    </ListView>

    <ImageButton Source="images.png" 
        BackgroundColor="Transparent"
        AbsoluteLayout.LayoutFlags="PositionProportional"  
        AbsoluteLayout.LayoutBounds=".95,.95,55,55"   
        Clicked="ImageButton_Clicked"
    />
</AbsoluteLayout>