ImageButton 的源图像奇怪地缩放并在 xamarin 表单预览器 (Xamarin.Forms) 中处于错误位置

Question

I have an ImageButton which will work fine with some properties, but as soon as i add these properties to it CornerRadius , BorderColor and BorderWidth it acts weird and it scales and also goes in a weird spot of the page.

here is the full xaml code:

    <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"
         mc:Ignorable="d"
         x:Class="Accounting.MainPage">

<StackLayout Margin="3">

    <Entry
        x:Name="NameEntry"
        Placeholder="Enter the Fullname"
        />
    <Grid Margin="3,-6,3,0">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Button
            Margin="0,0,2,0"
            VerticalOptions="Center"
            x:Name="AddButton"
            Text="Add"
            HeightRequest="50"
            BackgroundColor="#03A9F4"
            TextColor="White"
            CornerRadius="10"
            Grid.Column="0"
            Clicked="AddButton_Clicked"
            />
        <ImageButton
            Source="add.png"
            Grid.Column="1"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            WidthRequest="50"
            HeightRequest="50"
            CornerRadius="50"
            />
        <Button
            Margin="2,0,0,0"
            VerticalOptions="Center"
            x:Name="DeleteButton"
            Text="Delete"
            HeightRequest="50"
            BackgroundColor="#f44336"
            TextColor="White"
            CornerRadius="10"
            Grid.Column="2"
            Clicked="DeleteButton_Clicked"
            />

    </Grid>

    <ListView x:Name="WorkersListView" BackgroundColor="#ECEFF1" Margin="2" ItemSelected="WorkersListView_ItemSelected">
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell TextColor="Black" Text="{Binding WorkerName}"/>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

</StackLayout>

NOTE :

The behaviors i said is for the Image that i used in the ImageButton source not the button itself , see the Picture below, and I SHOULD ALSO SAY THAT THIS PROBLEM ONLY SHOWS ON XAMARIN FORMS PREVIEWER :

Can anyone tell me the problem with it and how to fix it?

Thanks for your help in advance.

Answer 1

Try changing the Width for the second column to Auto and changing the Vertical and Horizontal Options for CenterAndExpand . Hope it helps.

Answer 2

Yes, it is just the case for Xamarin Previewer, it often has problems. And we apologize for the inconvenience. The xamarin development team is doing their best to address this issue and we are urging them to release the latest version as soon as possible.

Of course, you can also try other alternate tools ,eg LiveXAML and Xamarin live reload .

For more details, you can check:

https://www.livexaml.com/

https://marketplace.visualstudio.com/items?itemName=Xamarin.XamarinLiveReload