图片不适合 ImageButton答案

【问题标题】：Picture doesn´t fit ImageButton图片不适合 ImageButton
【发布时间】：2020-01-17 17:11:28
【问题描述】：

我想用 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"/>

【问题讨论】：

docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/…
aspect 属性没有帮助或无法正常工作。我已经尝试了所有三个选项
你能展示你完整的 xaml 吗？
我也试过用不同的图标 --> 同样的问题

标签： xamarin.forms android-imagebutton

【解决方案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

黑色或白色

【讨论】：

这有点帮助，图像变小了，但它不再是圆的，也不适合按钮的形状。我的填充就像“0,0,75,75”
您不必使用图像是圆形图像的技巧。使用圆角半径，您只需使用常规图像，即简单的“+”，您可以根据需要设置背景颜色。

【解决方案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"/>

【讨论】：

【解决方案3】：

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

【讨论】：