Xamarin forms 布局和尺寸未设置

Question

I am a beginner in Xamarin and I am trying to learn to make simple graphics elements such as buttons and images. My problem is that when I try to change the dimension or the position of an element (a button in my example) nothing really seems to change.

I already tried stuff like startButton.WidthRequest = 300; or using absolute layout AbsoluteLayout.SetLayoutBounds(startButton, new Rectangle(0.5, 0.2, 200, 100)); but nothing worked and in my application in the emulator everything seems to be set at the bottom of the screen with a default height and a width of the screen.

XAML (tried <AbsoluteLayout> too but got the same problem, everything is set on the top-left of the screen and setLayoutBounds or WidthRequest doesn't work)

<?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"
         mc:Ignorable="d"
         xmlns:local="clr-namespace:TestImages;assembly=TestImages"
         x:Class="TestImages.MainPage">
<StackLayout x:Name="container1">
    <!-- Place new controls here -->
    <Label Text="Welcome to MyApp" HorizontalOptions="Center" VerticalOptions="StartAndExpand" />

    <Image Source="{local:ImageResource TestImages.kids2.png}"/>

    <Button x:Name="startButton"
            Text="START"
            Clicked="goToList" />

</StackLayout>
</Contenpage>

C#

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Essentials;
using Xamarin.Forms;

namespace TestImages
{
    // Learn more about making custom code visible in the Xamarin.Forms previewer
    // by visiting https://aka.ms/xamarinforms-previewer
    [DesignTimeVisible(false)]
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;

        var screenWidth = mainDisplayInfo.Width;
        Console.WriteLine($"Width: {screenWidth}");

        startButton.BackgroundColor = Color.LightGreen;
        startButton.BorderColor = Color.White;
        startButton.CornerRadius = 8;
        startButton.BorderWidth = 1.5;
        startButton.WidthRequest = 300;
        AbsoluteLayout.SetLayoutBounds(startButton, new Rectangle(0.5, 0.2, 200, 100));

        var bottone2 = new Button { Text = "Start222" };
        container1.Children.Add(bottone2);
        AbsoluteLayout.SetLayoutBounds(bottone2, new Rectangle(0.5, 0.2, 200, 100));
        bottone2.BackgroundColor = Color.Beige;


        Console.WriteLine($"Button: {startButton.Width}");
    }

    async void goToList(object sender, EventArgs e)
    {
        System.Diagnostics.Debug.Write("Cliccato START");
        Console.Write("Cliccato START");
        await Navigation.PushAsync(new ListPage());

    }
  }
}

I made it print the button width for debug and it says it is = -1, don't know why and what does it mean.

Answer 1

Now I added AbsoluteLayout.SetLayoutFlags(startButton, AbsoluteLayoutFlags.All); and it seems to work, but I am not sure what exactly does that command do and why it works

Answer 2

The way i've putted an Image in a Stack Layout is:

<StackLayout Orientation="Vertical" 
             BackgroundColor="#444444" 
             Padding="30" 
             Spacing="40">

    <Image HorizontalOptions="Fill" 
           HeightRequest="150" 
           Source="YourImage.png"/>
</StackLayout>

Just make sure that the path to your image is correctly working and you should be good to go.

I also learned a lot from CodeWithMosh Xamarin's course (even tho it's a bit obsolete): https://codewithmosh.com/