How do I widen these Picker controls and align them on the right?

Question

I have lots of questions in my head and I realise there are better ways that much of what you will see can be done. All with time as I learn.

In this particular instance I have created a Frame element with some controls:

    <Frame Grid.Column="2" Grid.Row="0" HasShadow="False" BorderColor="Black" Margin="10">
        <StackLayout Spacing="10" >
            <StackLayout Padding="10" BackgroundColor="DarkSalmon" HorizontalOptions="FillAndExpand">
                <Label Text="Report Settings"/>
            </StackLayout>

            <Label Text="Starting month:"/>
            <Picker Title="Select month">
                <Picker.ItemsSource>
                    <x:Array Type="{x:Type x:String}">
                        <x:String>January</x:String>
                        <x:String>February</x:String>
                        <x:String>March</x:String>
                        <x:String>April</x:String>
                        <x:String>May</x:String>
                        <x:String>June</x:String>
                        <x:String>July</x:String>
                        <x:String>August</x:String>
                        <x:String>September</x:String>
                        <x:String>October</x:String>
                        <x:String>November</x:String>
                        <x:String>December</x:String>
                    </x:Array>
                </Picker.ItemsSource>
            </Picker>
            <StackLayout Orientation="Horizontal">
                <Label Text="Number of months:"/>
                <Picker Title="Number of months" HorizontalOptions="End" HorizontalTextAlignment="Start">
                    <Picker.ItemsSource>
                        <x:Array Type="{x:Type x:String}">
                            <x:String>1</x:String>
                            <x:String>2</x:String>
                            <x:String>3</x:String>
                            <x:String>4</x:String>
                            <x:String>5</x:String>
                            <x:String>6</x:String>
                            <x:String>7</x:String>
                            <x:String>8</x:String>
                            <x:String>9</x:String>
                            <x:String>10</x:String>
                            <x:String>11</x:String>
                            <x:String>12</x:String>
                        </x:Array>
                    </Picker.ItemsSource>
                </Picker>
            </StackLayout>
            <StackLayout Orientation="Horizontal">
                <Label Text="Number of publishers to visit each month:"/>
                <Picker Title="Number of publishers" HorizontalOptions="End">
                    <Picker.ItemsSource>
                        <x:Array Type="{x:Type x:String}">
                            <x:String>1</x:String>
                            <x:String>2</x:String>
                            <x:String>3</x:String>
                            <x:String>4</x:String>
                            <x:String>5</x:String>
                        </x:Array>
                    </Picker.ItemsSource>
                </Picker>
            </StackLayout>
            <Label Text="Starting publisher:"/>
            <Picker Title="Number of publishers">
                <Picker.ItemsSource>
                    <x:Array Type="{x:Type x:String}">
                        <x:String>Name 1</x:String>
                        <x:String>Name 2</x:String>
                        <x:String>Name 3</x:String>
                        <x:String>Name 4</x:String>
                        <x:String>Name 5</x:String>
                    </x:Array>
                </Picker.ItemsSource>
            </Picker>
        </StackLayout>
    </Frame>

I am using Visual Studio for Mac with Xamarin 4.8. Want to use 5.x but I get exception running the software. The project output is MacOS. This is what I see at the moment:

I want to have the two inser (Number ...) Picker objects slightly wider and aligned to the right side. And then the label can take up the slack. At the moment it is staggered and the picker narrow.

I tried to use HorizontalOptions but failed.

Thanks for guidance.

Answer 1

Based on the advice in the comments I was able to adjust my XAML code like this:

<Picker Title="Number of publishers" HorizontalOptions="EndAndExpand" WidthRequest="75">
    <Picker.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>1</x:String>
            <x:String>2</x:String>
            <x:String>3</x:String>
            <x:String>4</x:String>
            <x:String>5</x:String>
        </x:Array>
    </Picker.ItemsSource>
</Picker>

I needed to use:

• HorizontalOptions
• WidthRequest