Изображение не подходит для ImageButton

Я хочу написать приложение для Android с Xamarin.Forms, и мне нужен ImageButton, как в этом вопросе: Как создать плавающую кнопку действия в формах Xamarin

Проблема в том, что как только я устанавливаю фон кнопки, изображение отображается неправильно. Кнопка находится в верхнем левом углу изображения, а изображение очень большое. Кнопка отображается правильно.

Это мой 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>

Я ожидаю, что изображение будет того же размера, что и кнопка

Обновить

Я попробовал Это

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

Это

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

Это

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

и это

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

person Emil G    schedule 16.09.2019    source источник
comment
comment
Свойство аспекта не помогает или не работает должным образом. Я пробовал все три варианта   -  person Emil G    schedule 16.09.2019
comment
не могли бы вы показать свой полный xaml?   -  person Leo Zhu - MSFT    schedule 17.09.2019
comment
Я также пробовал использовать разные значки - ›та же проблема   -  person Emil G    schedule 17.09.2019


Ответы (3)


Вам нужно установить 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

в черном или белом

person Roubachof    schedule 17.09.2019
comment
Это немного помогает, изображение становится меньше, но оно больше не круглое и не вписывается в форму кнопки. Моя набивка похожа на 0,0,75,75 - person Emil G; 17.09.2019
comment
Необязательно использовать уловку, когда ваше изображение представляет собой круглое изображение. С радиусом угла вам просто нужно использовать обычное изображение, которое представляет собой простой знак «+», и вы можете установить цвет фона так, как хотите. - person Roubachof; 17.09.2019

Я просто ограничиваю его ширину и высоту вот так, это тот эффект, который вам нужен ?:

<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"/>

введите описание изображения здесь

person Leo Zhu - MSFT    schedule 18.09.2019

Спасибо за вашу помощь, но, к сожалению, ничего из этого не работает. Итак, я просто сделал обычную кнопку с изображением как ImageSource и правильно изменил размер изображения, чтобы он соответствовал кнопке.

person Emil G    schedule 18.09.2019