[Skia][5.0] Button Width Version

[rafael-rosa-knowcode]

Current behavior

When we set the width of the button and run the project on a GTK platform, the button only start with 1 pixel.

The gray on the image is just to show the space of the Button

Works fine on wasm and Android, or the last previous version.

Expected behavior

That GTK display the Button like other platforms or the older versions.

How to reproduce it (as minimally and precisely as possible)

Remove the current Uno.Templates.

dotnet new uninstall Uno.Templates

Install the new Uno.Template

dotnet new install Uno.Templates

Create a new Blank project

dotnet new unoapp -preset blank -o MySampleButtonWidth

Set the GTK platform as the StartUp.

• Open the file Directory.Packages.props and replace all references to the "4.9.17" (or the "Uno.WinUI") version for 5.0.0-dev.1392 (or the last for now https://www.nuget.org/packages/Uno.WinUI/)

  <PackageVersion Include="Uno.WinUI" Version="4.9.17" />
  to
  <PackageVersion Include="Uno.WinUI" Version="5.0.0-dev.1392" />

• And update the Program.cs and remove the ", args" from the GktHost.

From

var host = new GtkHost(() => new AppHead(), args);

To

var host = new GtkHost(() => new AppHead());

• Change the MainPage.xaml

<Page x:Class="MySampleButtonWidth.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MySampleButtonWidth"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <StackPanel HorizontalAlignment="Center"
                VerticalAlignment="Center">

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ButtonStates">
                <VisualState x:Name="CustomPointerEntered">
                    <VisualState.Setters>
                        <Setter Target="btn.Width" Value="500" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="CustomPointerExited">
                    <VisualState.Setters>
                        <Setter Target="btn.Width" Value="300" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid Background="Gray">
            <Button  x:Name="btn" Content="VisualStateManager Width Test" Width="300"/>
        </Grid>
    </StackPanel>
</Page>

And the file MainPage.xaml.cs

namespace MySampleButtonWidth;

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        Loaded += MainPage_Loaded;
    }
    private void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        btn.PointerEntered += (sender, e) =>
        {
            VisualStateManager.GoToState(this, "CustomPointerEntered", true);
        };

        btn.PointerExited += (sender, e) =>
        {
            VisualStateManager.GoToState(this, "CustomPointerExited", true);
        };
    }
}

And rebuild the soluction and Run.

The VisualStateManager is just to show that the Button start with Width 1, but if we change for other value it works. So pass the mouse over the start of the Gray area.

Workaround

Use visua state for change the Width

Works on UWP/WinUI

Yes

Environment

Uno.WinUI / Uno.WinUI.WebAssembly / Uno.WinUI.Skia

NuGet package version(s)

Affected platforms

Skia (GTK on Linux/macOS/Windows)

IDE

Visual Studio 2022

IDE version

Version 17.6.4 or Version 17.7.0 Preview 2.0

Relevant plugins

No response

Anything else we need to know?

No response

[rafael-rosa-knowcode]

@MartinZikmund , @nickrandolph asked me to tag you. Can you check if I'm doing something wrong?

CC: @iurycarlos

[rafael-rosa-knowcode]

Created Project

MySampleButtonWidth.zip

[Youssef1313]

@rafael-rosa-knowcode I assume this is a regression?