Unión StackLayout a ViewModel doens no funciona

Question 1

Me gustaría tener una propiedad en mi ViewModel que está vinculada a mi StackLayout. He intentado esto por la Unión de mi StackLyout para el ViewModel.

Cuando hago clic en un botón, este diseño debe ser invisible.

Cuando hago esto con el código de abajo, mi programa se bloquea con un NulReferenceObject: Referencia a Objeto no establecida como instancia de un objeto. El StackLayout que estoy hablando es el primero en el código de abajo.

<FlexLayout>
    <StackLayout BindableLayout.ItemTemplate="{Binding CreateQuizPageQuizNameSL}"> // This StackLayout should be bind to the ViewModel
        <Label Text="Create New Quiz" />
        <StackLayout >
            <Entry Text="{Binding QuizNameInput}" Placeholder="Enter quiz name"/>
        </StackLayout>
    </StackLayout>
    <Button Command="{Binding SubmitCreateQuizCommand}" Text="Create my quiz now!"></Button>
</FlexLayout>

ViewModel

internal class CreateQuizPageViewModel
{
    // Quiz Name Input
    public String QuizNameInput { get; set; }

    // Command submit creating a quiz
    public Command SubmitCreateQuizCommand { get; set; }

    public StackLayout CreateQuizPageQuizNameSL { get; set; } = new StackLayout();

    public CreateQuizPageViewModel()
    {
        // Declaring a new command, giving the OnSubmitCreateNewQuizClick to the delegate
        SubmitCreateQuizCommand = new Command(OnSubmitCreateNewQuizClick);
    }

    // When a user submit the creation of new quiz
    public void OnSubmitCreateNewQuizClick()
    {
        CreateQuizPageQuizNameSL.IsVisible = false;
    }
}

Question 2

Aquí es cómo cambiar dos diseños utilizando IsVisible de unión.

En PRIMER lugar Añadir Nuget Xamarin.CommunityToolkit a su Xamarin Forms proyecto. (El que es "MyProjectName", sin ".iOS" o ".Android" en el final.)

TwoLayoutPage.xaml:

<?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:xct="http://xamarin.com/schemas/2020/toolkit"
                 xmlns:local="clr-namespace:TestBugs"
                 x:Class="TestBugs.TwoLayoutPage">
    <ContentPage.BindingContext>
        <local:TwoLayoutViewModel/>
    </ContentPage.BindingContext>
    <ContentPage.Resources>
        <ResourceDictionary>
            <xct:InvertedBoolConverter x:Key="InvertedBoolConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout>
            <StackLayout 
                    IsVisible="{Binding UseSecondLayout, Converter={StaticResource InvertedBoolConverter}}"
                    VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
                <Label Text="First Layout" FontSize="20" />
                <Button Text="To Second" Command="{Binding SwitchToSecondLayoutCommand}" />
            </StackLayout>
            <StackLayout IsVisible="{Binding UseSecondLayout}"
                    VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
                <Label Text="Second Layout!" FontSize="32" />
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

TwoLayoutViewModel.cs:

using Xamarin.Forms;

namespace TestBugs
{
    public class TwoLayoutViewModel : BindableObject
    {
        private bool _usesecondLayout = false;
        public bool UseSecondLayout {
            get => _usesecondLayout;
            set {
                _usesecondLayout = value;
                OnPropertyChanged();
            }
        }


        public TwoLayoutViewModel()
        {
            SwitchToSecondLayoutCommand = new Command(SwitchToSecondLayout);
        }


        public Command SwitchToSecondLayoutCommand { get; set; }


        private void SwitchToSecondLayout()
        {
            UseSecondLayout = true;
        }
    }
}

ToolmakerSteve · Answer 1 · 2021-11-22T20:26:37

Aquí es cómo cambiar dos diseños utilizando IsVisible de unión.

En PRIMER lugar Añadir Nuget Xamarin.CommunityToolkit a su Xamarin Forms proyecto. (El que es "MyProjectName", sin ".iOS" o ".Android" en el final.)

TwoLayoutPage.xaml:

<?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:xct="http://xamarin.com/schemas/2020/toolkit"
                 xmlns:local="clr-namespace:TestBugs"
                 x:Class="TestBugs.TwoLayoutPage">
    <ContentPage.BindingContext>
        <local:TwoLayoutViewModel/>
    </ContentPage.BindingContext>
    <ContentPage.Resources>
        <ResourceDictionary>
            <xct:InvertedBoolConverter x:Key="InvertedBoolConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout>
            <StackLayout 
                    IsVisible="{Binding UseSecondLayout, Converter={StaticResource InvertedBoolConverter}}"
                    VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
                <Label Text="First Layout" FontSize="20" />
                <Button Text="To Second" Command="{Binding SwitchToSecondLayoutCommand}" />
            </StackLayout>
            <StackLayout IsVisible="{Binding UseSecondLayout}"
                    VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
                <Label Text="Second Layout!" FontSize="32" />
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

TwoLayoutViewModel.cs:

using Xamarin.Forms;

namespace TestBugs
{
    public class TwoLayoutViewModel : BindableObject
    {
        private bool _usesecondLayout = false;
        public bool UseSecondLayout {
            get => _usesecondLayout;
            set {
                _usesecondLayout = value;
                OnPropertyChanged();
            }
        }


        public TwoLayoutViewModel()
        {
            SwitchToSecondLayoutCommand = new Command(SwitchToSecondLayout);
        }


        public Command SwitchToSecondLayoutCommand { get; set; }


        private void SwitchToSecondLayout()
        {
            UseSecondLayout = true;
        }
    }
}

Unión StackLayout a ViewModel doens no funciona

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría