xaml - 实现 ListView 的 float 操作按钮bottom_right - Xamarin.forms

Question

我有一个绑定(bind)图像和文本的 ListView 。我一直试图在该页面的右下角添加一个 float 按钮，但没有成功。做了一些研究，但似乎仍然没有明确的解决方案。谁知道我如何实现这个？在我的 xaml 代码中，我已经展示了我所尝试的内容。

我的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"
                 x:Class="LoyaltyWorx.Page1"
                 Title="Stores">
        <ContentPage.ToolbarItems>

            <ToolbarItem Text="About" 
                         Icon="ic_action_more_vert.png"
                         Priority="0"
                         Order="Secondary"
                         Clicked="ToolbarItem_Clicked"/>

            <ToolbarItem Text="Settings"
                         Icon="ic_action_more_vert.png"
                         Priority="0"
                         Order="Secondary"/>

        </ContentPage.ToolbarItems>


        <ListView x:Name="MainListView" HasUnevenRows="True" ItemTapped="MainListView_ItemTapped" SeparatorColor="DarkGray">
            <ListView.ItemTemplate>
                <DataTemplate>

                    <ImageCell ImageSource="{Binding Image}" Text="{Binding Name}" TextColor="Black" />


                </DataTemplate>

            </ListView.ItemTemplate>
        </ListView>

***//here is what I attempted but the image just covers the whole page***
        <Image Source="add.png"
                  VerticalOptions="FillAndExpand"
                  HorizontalOptions="FillAndExpand"
               HeightRequest="0"
               WidthRequest="0"
                  AbsoluteLayout.LayoutBounds="1,.99, 65, 65"
                  AbsoluteLayout.LayoutFlags="PositionProportional" >
            <Image.GestureRecognizers>
                <TapGestureRecognizer
                  Command="{Binding clickNewCard}"
                  CommandParameter="3" />
            </Image.GestureRecognizers>
        </Image>

    </ContentPage>

Answer 1

这里有很多问题:

1. 如果您要设置 ContentPage 的内容，则必须声明 只有一个元素(因此您应该使用像 StackLayout 这样的布局容器 - 可以处理多个子元素 - 来组成您的页面)。请参阅this topic关于它；
2. 您正在设置 AbsoluteLayout 的附加属性，但您的图像不在 AbsoluteLayout 内。 This topic引导使用 AbsoluteLayout (我猜这不是你需要的)。
3. 您正在将 VerticalOptions="FillAndExpand" 和 Horizo​​ntalOptions="FillAndExpand" 设置为 ImageView ，而实际上此属性应该位于 ListView. This topic关于LayoutOptions。

尝试这种方式并告诉我它是否适合您:

<?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="LoyaltyWorx.Page1"
             Title="Stores">
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="About" 
                     Icon="ic_action_more_vert.png"
                     Priority="0"
                     Order="Secondary"
                     Clicked="ToolbarItem_Clicked"/>
        <ToolbarItem Text="Settings"
                     Icon="ic_action_more_vert.png"
                     Priority="0"
                     Order="Secondary"/>
    </ContentPage.ToolbarItems>
    <Grid>
        <ListView Grid.Column="0" Grid.Row="0"
                  x:Name="MainListView" 
                  HasUnevenRows="True" 
                  VerticalOptions="FillAndExpand"
                  HorizontalOptions="FillAndExpand"
                  ItemTapped="MainListView_ItemTapped" 
                  SeparatorColor="DarkGray">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ImageCell ImageSource="{Binding Image}" 
                               Text="{Binding Name}" 
                               TextColor="Black" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Image Grid.Column="0" Grid.Row="0"
               Source="add.png"
               HorizontalOptions="EndAndExpand"
               VerticalOptions="EndAndExpand"
               Margin="0,0,30,30"
               HeightRequest="0"
               WidthRequest="0" >
            <Image.GestureRecognizers>
                <TapGestureRecognizer
                  Command="{Binding clickNewCard}"
                  CommandParameter="3" />
            </Image.GestureRecognizers>
        </Image>
    </Grid>
</ContentPage>