Xaml .Net Maui User Interface
I'm a beginner in creating XAML user interface. I am including the Xaml in this post and an image of the Interface as it is. But I would like to have the radiobutton group formatted more professionally with the buttons underneath each group of radio buttons and a web view to the right of the radio button groups. Any help or advice would be greatly appreciated.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:viewmodel="clr-namespace:PizzaAppUsingMVVM.ViewModel"
x:Class="PizzaAppUsingMVVM.MainPage"
x:DataType="viewmodel:MainViewModel">
<ScrollView>
<StackLayout>
<HorizontalStackLayout RadioButtonGroup.GroupName ="PizzaTypeGroup"
RadioButtonGroup.SelectedValue="{Binding PizzaType}">
<Label Text="What type of Pizza would you like to order?" />
<RadioButton Content="Pepperoni Pizza"
Value="Pepperoni Pizza" />
<RadioButton Content="Cheese Pizza"
Value="Cheese Pizza" />
<RadioButton Content="Four Meat Pizza"
Value="Four Meat Pizza" />
<RadioButton Content="Veggie Lovers Pizza"
Value="Veggie Lovers Pizza"/>
<RadioButton Content="Supreme Pizza"
Value="Supreme Pizza"/>
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="You have chosen: "/>
<Span Text="{Binding PizzaType}" />
</FormattedString>
</Label.FormattedText>
</Label>
</HorizontalStackLayout>
<HorizontalStackLayout RadioButtonGroup.GroupName ="PizzaSizeGroup"
RadioButtonGroup.SelectedValue="{Binding PizzaSize}">
<Label Text="What size pizza would you like to order?" />
<RadioButton Content="Small"
Value="Small" />
<RadioButton Content="Medium"
Value="Medium" />
<RadioButton Content="Large"
Value="Large" />
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="You have chosen: "/>
<Span Text="{Binding PizzaSize}" />
</FormattedString>
</Label.FormattedText>
</Label>
</HorizontalStackLayout>
<HorizontalStackLayout RadioButtonGroup.GroupName ="PizzaCrustGroup"
RadioButtonGroup.SelectedValue="{Binding CrustType}">
<Label Text="What type of crust would you like with your Pizza?" />
<RadioButton Content="Thin"
Value="Thin" />
<RadioButton Content="Hand Tossed"
Value="Hand Tossed" />
<RadioButton Content="Pan Pizza"
Value="Pan Pizza" />
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="You have chosen: "/>
<Span Text="{Binding CrustType}" />
</FormattedString>
</Label.FormattedText>
</Label>
</HorizontalStackLayout>
<HorizontalStackLayout RadioButtonGroup.GroupName ="PizzaSauceGroup"
RadioButtonGroup.SelectedValue="{Binding SauceType}">
<Label Text="What type of sauce would you like on your crust?" />
<RadioButton Content="Marinara"
Value="Marinara" />
<RadioButton Content="Traditional"
Value="Traditional" />
<RadioButton Content="Specialty"
Value="Specialty" />
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="You have chosen: "/>
<Span Text="{Binding SauceType}" />
</FormattedString>
</Label.FormattedText>
</Label>
<Button
Command="{Binding PerformPizzaCalculateOrderCommand}"
CommandParameter="{Binding Source={x:Reference webView}}"
x:Name="OrderPizzaBtn"
Text = "Add"/>
</HorizontalStackLayout>
<HorizontalStackLayout RadioButtonGroup.GroupName ="SaladTypeGroup"
RadioButtonGroup.SelectedValue="{Binding SaladType}">
<Label Text="What type of Salad would you like to order?" />
<RadioButton Content="Toss Salad"
Value="Toss Salad" />
<RadioButton Content="Caesar Salad"
Value="Caesar Salad" />
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="You have chosen: "/>
<Span Text="{Binding SaladType}" />
</FormattedString>
</Label.FormattedText>
</Label>
</HorizontalStackLayout>
<HorizontalStackLayout RadioButtonGroup.GroupName ="SaladSizeGroup"
RadioButtonGroup.SelectedValue="{Binding SaladSize}">
<Label Text="What size salad would you like to order?" />
<RadioButton Content="Small"
Value="Small" />
<RadioButton Content="Medium"
Value="Medium" />
<RadioButton Content="Large"
Value="Large" />
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="You have chosen: "/>
<Span Text="{Binding SaladSize}" />
</FormattedString>
</Label.FormattedText>
</Label>
<Button
Command="{Binding PerformSaladCalculateOrderCommand}"
CommandParameter="{Binding Source={x:Reference webView}}"
x:Name="OrderSaladBtn"
Text = "Add"/>
</HorizontalStackLayout>
<HorizontalStackLayout RadioButtonGroup.GroupName ="DessertTypeGroup"
RadioButtonGroup.SelectedValue="{Binding DessertType}">
<Label Text="What type of dessert would you like?" />
<RadioButton Content="Cobbler Pie"
Value="Cobbler Pie" />
<RadioButton Content="Cinnamon Sticks"
Value="Cinnamon Sticks" />
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="You have chosen: "/>
<Span Text="{Binding DessertType}" />
</FormattedString>
</Label.FormattedText>
</Label>
</HorizontalStackLayout>
<HorizontalStackLayout RadioButtonGroup.GroupName ="DessertSizeGroup"
RadioButtonGroup.SelectedValue="{Binding DessertSize}">
<Label Text="What size of dessert would you like?" />
<RadioButton Content="Small"
Value="Small" />
<RadioButton Content="Medium"
Value="Medium" />
<RadioButton Content="Large"
Value="Large" />
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="You have chosen: "/>
<Span Text="{Binding DessertSize}" />
</FormattedString>
</Label.FormattedText>
</Label>
<Button
Command="{Binding PerformDessertCalculateOrderCommand}"
CommandParameter="{Binding Source={x:Reference webView}}"
x:Name="OrderDessertBtn"
Text = "Add"/>
</HorizontalStackLayout>
<HorizontalStackLayout RadioButtonGroup.GroupName ="DrinkSizeGroup"
RadioButtonGroup.SelectedValue="{Binding DrinkSize}">
<Label Text="What size drink would you like to order?" />
<RadioButton Content="Small"
Value="Small" />
<RadioButton Content="Medium"
Value="Medium" />
<RadioButton Content="Large"
Value="Large" />
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="You have chosen: "/>
<Span Text="{Binding DrinkSize}" />
</FormattedString>
</Label.FormattedText>
</Label>
<Button
Command="{Binding PerformDrinkCalculateOrderCommand}"
CommandParameter="{Binding Source={x:Reference webView}}"
x:Name="OrderDrinkBtn"
Text = "Add"/>
<WebView x:Name="webView" HeightRequest="100" WidthRequest="700">
<WebView.Source>
<HtmlWebViewSource Html="{Binding MyHTML}">
</HtmlWebViewSource>
</WebView.Source>
</WebView>
</HorizontalStackLayout>
</StackLayout>
</ScrollView>
</ContentPage>
`