Search code examples
c#.netmauimaui-windows.net-maui.shell

My app in .net maui isnt openning after write a pair of binding lines


(first of all, sorry for my english). Im making a view to make a new element. the element have some common attributes and some that depends on the child we choose in the radiobutton. i want to se only the stack 1(from series) if the radio button with Value="Serie" is checked, the stack 2(from movies) if the radio button with Value="Pelicula" is checked and so on. here is the last working code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:GameVidNet"
             x:Class="GameVidNet.Paginas.NewMediaPage"
             Title="NewMediaPage">

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

        <StackLayout Padding="20" VerticalOptions="Center" HorizontalOptions="Center" Grid.Column="0" >
            
            <Label Text="Tipo de Media" FontSize="16" />
            <HorizontalStackLayout>
                <RadioButton Value="Serie" Margin="20" >
                    <RadioButton.Content>
                        <Image Source="series.png" HeightRequest="30" WidthRequest="30"/>
                    </RadioButton.Content>
                </RadioButton>
                <RadioButton Value="Pelicula" Margin="20" >
                    <RadioButton.Content>
                        <Image Source="movie.png" HeightRequest="30" WidthRequest="30"/>
                    </RadioButton.Content>
                </RadioButton>
                <RadioButton Value="Videojuego" Margin="20" >
                    <RadioButton.Content>
                        <Image Source="videogame.png" HeightRequest="30" WidthRequest="30"/>
                    </RadioButton.Content>
                </RadioButton>
            </HorizontalStackLayout>

            <Label Text="ID" FontSize="16" />
            <Entry x:Name="IdEntry" Placeholder="Ingrese el ID" />

            <Label Text="Título" FontSize="16" />
            <Entry x:Name="TitleEntry" Placeholder="Ingrese el título" />

            <Label Text="Género" FontSize="16" />
            <Entry x:Name="GenreEntry" Placeholder="Ingrese el género" />

            <Label Text="Año de Lanzamiento" FontSize="16" />
            <Entry x:Name="ReleaseYearEntry" Placeholder="Ingrese el año de lanzamiento" />

            <Button Text="Guardar" Clicked="SaveButton_Clicked" Margin="0,20,0,0" />
            
        </StackLayout>

        
        <StackLayout Grid.Column="1" Padding="20" VerticalOptions="Center" HorizontalOptions="Center">

            <StackLayout >
                <Label Text="Temporadas" FontSize="16" />
                <Entry x:Name="SeasonsEntry" Placeholder="Ingrese el número de temporadas" />

                <Label Text="Duración promedio del episodio" FontSize="16" />
                <Entry x:Name="AverageEpisodeDurationEntry" Placeholder="Ingrese la duración promedio del episodio" />

                <Label Text="Es Anime" FontSize="16" />
                <Switch x:Name="IsAnimeSwitch" />

                <Label Text="Está completado" FontSize="16" />
                <Switch x:Name="IsCompletedSwitch" />
            </StackLayout>

            <StackLayout >
                <Label Text="Duración" FontSize="16" />
                <Entry x:Name="DurationEntry" Placeholder="Ingrese la duración" />

                <Label Text="Edad recomendada" FontSize="16" />
                <Entry x:Name="RecommendedAgeEntry" Placeholder="Ingrese la edad recomendada" />

                <Label Text="Ganador de premios" FontSize="16" />
                <Switch x:Name="AwardWinnerSwitch" />
            </StackLayout>

            <StackLayout >
                <Label Text="Plataformas" FontSize="16" />
                <Entry x:Name="PlatformsEntry" Placeholder="Ingrese las plataformas" />

                <Label Text="Modos de juego" FontSize="16" />
                <Entry x:Name="GameModesEntry" Placeholder="Ingrese los modos de juego" />

                <Label Text="Es original" FontSize="16" />
                <Switch x:Name="IsOriginalSwitch" />

                <Label Text="Está inspirado" FontSize="16" />
                <Switch x:Name="IsInspiredSwitch" />
            </StackLayout>

        </StackLayout>
        
        
    </Grid>

    
</ContentPage>

i put some bindings in the stackslayout inside the stacklayout grid.column=1, and it stops working. it doesnt give me any errors but the window app is not even opening.

<StackLayout Grid.Column="1" Padding="20" VerticalOptions="Center" HorizontalOptions="Center">

            <StackLayout IsVisible="{Binding Source={x:Reference SerieRadioButton}, Path=IsChecked}">
                <Label Text="Temporadas" FontSize="16" />
                <Entry x:Name="SeasonsEntry" Placeholder="Ingrese el número de temporadas" />

                <Label Text="Duración promedio del episodio" FontSize="16" />
                <Entry x:Name="AverageEpisodeDurationEntry" Placeholder="Ingrese la duración promedio del episodio" />

                <Label Text="Es Anime" FontSize="16" />
                <Switch x:Name="IsAnimeSwitch" />

                <Label Text="Está completado" FontSize="16" />
                <Switch x:Name="IsCompletedSwitch" />
            </StackLayout>

            <StackLayout IsVisible="{Binding Source={x:Reference PeliculaRadioButton}, Path=IsChecked}">
                <Label Text="Duración" FontSize="16" />
                <Entry x:Name="DurationEntry" Placeholder="Ingrese la duración" />

                <Label Text="Edad recomendada" FontSize="16" />
                <Entry x:Name="RecommendedAgeEntry" Placeholder="Ingrese la edad recomendada" />

                <Label Text="Ganador de premios" FontSize="16" />
                <Switch x:Name="AwardWinnerSwitch" />
            </StackLayout>

            <StackLayout IsVisible="{Binding Source={x:Reference VideojuegoRadioButton}, Path=IsChecked}">
                <Label Text="Plataformas" FontSize="16" />
                <Entry x:Name="PlatformsEntry" Placeholder="Ingrese las plataformas" />

                <Label Text="Modos de juego" FontSize="16" />
                <Entry x:Name="GameModesEntry" Placeholder="Ingrese los modos de juego" />

                <Label Text="Es original" FontSize="16" />
                <Switch x:Name="IsOriginalSwitch" />

                <Label Text="Está inspirado" FontSize="16" />
                <Switch x:Name="IsInspiredSwitch" />
            </StackLayout>

Solution

  • I do not know if you understand it, but you are actually writing a TAB control. (RadioButtons controlling the visibility of layouts)

    This is how naming a control is done:

     x:Name="controlName"
    

    The Value you set here:

    <RadioButton Value="Serie" Margin="20" >
    

    does not mean a thing in your case. If you are going to use references, you might as well do all this work instead in the code.

    What you should actually do is, make a radio button group:

    https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/radiobutton

    And then use the selected value.

    ...RadioButtonGroup.SelectedValue="{Binding Selection}">
    

    After you have the selected value, you can approach the "visibility" by different ways:

    You can bind it to the selection itself, with using https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/data-binding/converters

    Or you can switch between the layouts: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/layouts/bindablelayout

    You might as well search for ready-to-use TabControls.