Question

我有一个列表视图绑定图像＆amp;文本。我一直试图在这个页面的右下方添加一个浮动按钮，但无济于事。做了一些研究，但似乎仍然没有明确的解决方案。谁知道我怎么能实现这个？在我的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

（抱歉英语不好）

这里存在很多问题：

如果要设置ContentPage的内容，则必须声明只有一个元素（所以你应该使用像StackLayout这样的布局容器 - 可以处理多个孩子 - 来组成你的页面）。请参阅this topic关于它;
您正在设置AbsoluteLayout附加属性，但您的图像不在AbsoluteLayout中。 This topic引领使用AbsoluteLayout（我想这不是你需要的）。
您将VerticalOptions="FillAndExpand"和HorizontalOptions="FillAndExpand"设置为图片视图，而实际上此属性应位于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>

实现listview的浮动操作按钮bottom_right - Xamarin.forms

1 个答案: