[Bug] ImageButton FontImageSource Size not work

acaliaro commented 3 years ago

Description

I want to have an ImageButton with a fonticon. I would like to change the icon size but if I change "size" property, it fills the button

Steps to Reproduce

1. <ImageButton BackgroundColor="Yellow" BorderColor="White" BorderWidth="2" CornerRadius="20" HeightRequest="40" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="40">

If I change 30 to 10, I have always the icon fills the button ### Expected Behavior Icons size change ### Actual Behavior Icons size does not change ### Basic Information - Version with issue: - Last known good version: unknowd - Platform Target Frameworks: - iOS: - Android: 10 - UWP: - Android Support Library / AndroidX Version: - NuGet Packages: Xamarin Forms 5.0.0.1931 - Affected Devices: Zebra WT6300 ### Environment

Show/Hide Visual Studio info

``` Microsoft Visual Studio Community 2019 Versione 16.8.4 VisualStudio.16.Release/16.8.4+30907.101 Microsoft .NET Framework Versione 4.8.04084 Edizione installata: Community Visual C++ 2019 00435-60000-00000-AA409 Microsoft Visual C++ 2019 ADL Tools Service Provider 1.0 This package contains services used by Data Lake tools ASA Service Provider 1.0 ASP.NET and Web Tools 2019 16.8.557.25636 ASP.NET and Web Tools 2019 ASP.NET Core Razor Language Services 16.1.0.2052803+84e121f1403378489b842e1797df2f3f5a49ac3c Provides languages services for ASP.NET Core Razor. ASP.NET Web Frameworks and Tools 2019 16.8.557.25636 Per altre informazioni, vedere https://www.asp.net/ Azure Data Lake Node 1.0 This package contains the Data Lake integration nodes for Server Explorer. Azure Data Lake Tools for Visual Studio 2.6.2000.0 Microsoft Azure Data Lake Tools for Visual Studio Azure Functions and Web Jobs Tools 16.8.557.25636 Azure Functions and Web Jobs Tools Azure Stream Analytics Tools for Visual Studio 2.6.2000.0 Microsoft Azure Stream Analytics Tools for Visual Studio Estensione IntelliCode 1.0 Informazioni dettagliate sull'estensione IntelliCode di Visual Studio Extensibility Message Bus 1.2.6 (master@34d6af2) Provides common messaging-based MEF services for loosely coupled Visual Studio extension components communication and integration. Fabric.DiagnosticEvents 1.0 Eventi di diagnostica di Fabric Gestione pacchetti NuGet 5.8.1 Gestione pacchetti NuGet in Visual Studio. Per altre informazioni su NuGet, visitare il sito Web https://docs.nuget.org/ Microsoft Azure HDInsight Azure Node 2.6.2000.0 HDInsight Node under Azure Node Microsoft Azure Hive Query Language Service 2.6.2000.0 Language service for Hive query Microsoft Azure Stream Analytics Language Service 2.6.2000.0 Language service for Azure Stream Analytics Microsoft Azure Stream Analytics Node 1.0 Azure Stream Analytics Node under Azure Node Microsoft JVM Debugger 1.0 Provides support for connecting the Visual Studio debugger to JDWP compatible Java Virtual Machines Microsoft MI-Based Debugger 1.0 Provides support for connecting Visual Studio to MI compatible debuggers Microsoft Visual Studio Tools per contenitori 1.1 Consente di sviluppare, eseguire e convalidare applicazioni ASP.NET Core nell'ambiente di destinazione. Premere F5 per modificare l'applicazione direttamente in un contenitore senza debug oppure CTRL+F5 per modificare e aggiornare l'app senza ricompilare il contenitore. Mono Debugging for Visual Studio 16.8.43 (00471f8) Support for debugging Mono processes with Visual Studio. Pacchetto di Microsoft Visual Studio VC 1.0 Pacchetto di Microsoft Visual Studio VC Pacchetto host dell'adattatore di debug di Visual Studio Code 1.0 Livello di interoperabilità per l'hosting degli adattatori di debug di Visual Studio Code in Visual Studio Procedure guidate di Microsoft Visual C++ 1.0 Procedure guidate di Microsoft Visual C++ ProjectServicesPackage Extension 1.0 ProjectServicesPackage Visual Studio Extension Detailed Info SQL Server Data Tools 16.0.62012.31170 Microsoft SQL Server Data Tools Strumenti C# 3.8.0-5.20604.10+9ed4b774d20940880de8df1ca8b07508aa01c8cd Componenti di C# usati nell'IDE. A seconda del tipo e delle impostazioni del processo, è possibile che venga usata una versione diversa del compilatore. Strumenti comuni di Azure 1.10 Fornisce servizi comuni da usare con Servizi mobili di Azure e gli strumenti di Microsoft Azure. Strumenti del Servizio app di Azure versione 3.0.0 16.8.557.25636 Strumenti del Servizio app di Azure versione 3.0.0 Strumenti di Microsoft Azure 2.9 Strumenti di Microsoft Azure per Microsoft Visual Studio 2019 - versione 2.9.30924.1 Strumenti di Microsoft Azure Service Fabric per Visual Studio 16.0 Strumenti di Microsoft Azure Service Fabric per Visual Studio Strumenti di recapito continuo Microsoft per Visual Studio 0.4 Consente di semplificare la configurazione delle pipeline Azure DevOps direttamente dall'IDE di Visual Studio. Strumenti di Visual Basic 3.8.0-5.20604.10+9ed4b774d20940880de8df1ca8b07508aa01c8cd Componenti di Visual Basic usati nell'IDE. A seconda del tipo e delle impostazioni del processo, è possibile che venga usata una versione diversa del compilatore. Strumenti TypeScript 16.0.21016.2001 Strumenti TypeScript per Microsoft Visual Studio StylerPackage Extension 1.0 StylerPackage Visual Stuido Extension Detailed Info ToolWindowHostedEditor 1.0 Hosting json editor into a tool window Visual F# Tools 16.8.0-beta.20507.4+da6be68280c89131cdba2045525b80890401defd Microsoft Visual F# Tools Visual Studio Container Tools Extensions 1.0 Consente di visualizzare, gestire ed eseguire la diagnosi dei contenitori all'interno di Visual Studio. Visual Studio Tools per contenitori 1.0 Visual Studio Tools per contenitori Visual Studio Tools per Kubernetes 1.0 Visual Studio Tools per Kubernetes VisualStudio.DeviceLog 1.0 Informazioni sul pacchetto VisualStudio.Foo 1.0 Information about my package VisualStudio.Mac 1.0 Mac Extension for Visual Studio Xamarin 16.8.000.261 (d16-8@bb99248) Estensione di Visual Studio per consentire lo sviluppo per Xamarin.iOS e Xamarin.Android. Xamarin Designer 16.8.0.507 (remotes/origin/d16-8@e87b24884) Estensione di Visual Studio per abilitare gli strumenti di Xamarin Designer in Visual Studio. Xamarin Templates 16.8.112 (86385a3) Templates for building iOS, Android, and Windows apps with Xamarin and Xamarin.Forms. Xamarin.Android SDK 11.1.0.26 (d16-8/a36ce73) Xamarin.Android Reference Assemblies and MSBuild support. Mono: 5e9cb6d Java.Interop: xamarin/java.interop/d16-8@79d9533 ProGuard: Guardsquare/proguard/proguard6.2.2@ebe9000 SQLite: xamarin/sqlite/3.32.1@1a3276b Xamarin.Android Tools: xamarin/xamarin-android-tools/d16-8@2fb1cbc Xamarin.iOS and Xamarin.Mac SDK 14.8.0.3 (c51fabee8) Xamarin.iOS and Xamarin.Mac Reference Assemblies and MSBuild support. ```

### Build Logs ### Screenshots SIZE 30 ![image](https://user-images.githubusercontent.com/5759350/106011604-e9f0fb80-60ba-11eb-8b70-5c02ed234817.png) SIZE 10 ![image](https://user-images.githubusercontent.com/5759350/106011709-04c37000-60bb-11eb-992f-cc261fb0b76c.png) ### Reproduction Link ### Workaround Use "Padding" to reduce the size

davidortinau commented 3 years ago

@acaliaro in this case the Button and setting Button.Source will size as you desire. I think an enhancement here to have an Aspect value that means "actual size" would be an improvement. Or at least as the default when dealing with FontImageSource.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:app="clr-namespace:Xappy"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             BackgroundColor="#333333"
             x:Class="ImageButtonIconSizing.MainPage">

    <ContentPage.Resources>
        <FontImageSource x:Key="AnchorIcon"
                         FontFamily="FontAwesome"
                         Glyph="{x:Static app:IconFont.Anchor}"
                         Color="#d1d1d1"
                         Size="50" />

        <Style TargetType="ImageButton">
            <Setter Property="HorizontalOptions" Value="Start"/>
            <Setter Property="WidthRequest" Value="100"/>
            <Setter Property="HeightRequest" Value="100"/>
            <Setter Property="BackgroundColor" Value="#1d1d1d"/>
            <Setter Property="Source" Value="{StaticResource AnchorIcon}"/>
            <Setter Property="Margin" Value="4"/>
        </Style>

        <Style TargetType="Label">
            <Setter Property="HorizontalOptions" Value="Start"/>
            <Setter Property="WidthRequest" Value="100"/>
            <Setter Property="HeightRequest" Value="100"/>
            <Setter Property="BackgroundColor" Value="#1d1d1d"/>
            <Setter Property="Margin" Value="4"/>
        </Style>

        <Style TargetType="Button">
            <Setter Property="HorizontalOptions" Value="Start"/>
            <Setter Property="WidthRequest" Value="100"/>
            <Setter Property="HeightRequest" Value="100"/>
            <Setter Property="BackgroundColor" Value="#1d1d1d"/>
            <Setter Property="Margin" Value="4"/>
        </Style>
    </ContentPage.Resources>

    <FlexLayout Direction="Row" Wrap="Wrap" 
                JustifyContent="SpaceAround"
                AlignContent="Start"
                AlignItems="Start"
                Margin="10">
        <ImageButton />
        <ImageButton Aspect="AspectFill"/>
        <ImageButton Aspect="AspectFit"/>
        <ImageButton Aspect="Fill"/>
        <Label Text="{x:Static app:IconFont.Anchor}"
               FontFamily="FontAwesome"
               TextColor="#d1d1d1"
               FontSize="50"
               WidthRequest="100"
               HeightRequest="100"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center"
               />
        <Button ImageSource="{StaticResource AnchorIcon}"
                BackgroundColor="#1d1d1d" 
                HeightRequest="100"
                WidthRequest="100"/>
    </FlexLayout>

</ContentPage>

Sample:

ImageButtonIconSizing.zip

Image:

Screenshot_1612561656