Xaml .Net Maui User Interface

Ronald Rex 1,666 Reputation points
2022-12-30T18:06:30.48+00:00

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. 275153-capture.png

<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>
`

Developer technologies .NET .NET MAUI
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.