Question

我想使用Xamarin.Forms为Android编写一个应用，并且我想要一个ImageButton像这样的问题：How to make a Floating Action Button in Xamarin Forms

问题是，一旦我设置了按钮的背景，图像就无法正确显示。按钮位于图像的左上角，图像很大。按钮正确显示。

这是我的带有按钮的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"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:android="http://schemas.android.com/apk/res/android"
             mc:Ignorable="d"
             x:Class="ASUE.Views.ItemsPage"
             Title="AllItems"
             x:Name="BrowseItemsPage">

    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Archive" Clicked="Archive_Clicked"/>
    </ContentPage.ToolbarItems>
    <AbsoluteLayout>
        <ScrollView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
            <StackLayout>
                <ListView x:Name="ItemsListView"
                            ItemsSource="{Binding Items}"
                            VerticalOptions="FillAndExpand"
                            HasUnevenRows="true"
                            RefreshCommand="{Binding LoadItemsCommand}"
                            IsPullToRefreshEnabled="true"
                            IsRefreshing="{Binding IsBusy, Mode=OneWay}"
                            CachingStrategy="RecycleElement"
                            ItemSelected="OnItemSelected">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout Padding="10" BackgroundColor="{Binding BColor, FallbackValue='White'}">
                                    <Label Text="{Binding Title}"
                                            LineBreakMode="NoWrap" 
                                            Style="{DynamicResource ListItemTextStyle}" 
                                            FontSize="16" />
                                    <Label Text="{Binding ActionTime}" 
                                            LineBreakMode="NoWrap"
                                            Style="{DynamicResource ListItemDetailTextStyle}"
                                            FontSize="13" />
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>
        </ScrollView>
        <ImageButton Source="add.png" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds=".95,.95,80,80" BackgroundColor="Transparent"/>
    </AbsoluteLayout>

</ContentPage>

我希望图片的大小与按钮的大小相同

更新

我尝试了This

<ImageButton Source="add.png"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".1,.1,80,80"
BackgroundColor="Accent"
CornerRadius="80"/>

This

<ImageButton Source="add.png"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".1,.1,80,80"
BackgroundColor="Accent"
CornerRadius="80"
Padding="0,0,75,75"/>

This

<ImageButton Source="add.png"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".1,.1,80,80"/>

and This

<ImageButton Source="add.png"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".1,.1,80,80"
CornerRadius="80"/>

Answer 1

您需要将CornerRadius设置为具有圆圈按钮。您还需要设置Padding属性以缩小图像：

<ImageButton Source="add.png" 
             AbsoluteLayout.LayoutFlags="PositionProportional" 
             AbsoluteLayout.LayoutBounds=".95,.95,80,80" 
             CornerRadius="80"
             Padding="15"
             BackgroundColor="Accent"/>

其中add.png是：

您可以在这里获取它：https://material.io/resources/icons/?search=add&icon=add&style=baseline

黑色或白色

Answer 2

我只是这样限制其宽度和高度，是您想要的效果吗？：

<ImageButton Source="add.png" 
             HorizontalOptions="Center"  
             VerticalOptions="Center"  
             CornerRadius="25" 
             WidthRequest="50" 
             HeightRequest="50"  
             AbsoluteLayout.LayoutFlags="PositionProportional"  
             AbsoluteLayout.LayoutBounds=".95,.95,80,80" 
             BackgroundColor="Accent"/>

Answer 3

感谢您的所有帮助，但遗憾的是，这一切都没有。所以我只是用图片作为ImageSource制作了一个普通按钮，并正确调整了图片的大小以适合按钮。

图片不适合ImageButton

3 个答案: