La liaison StackLayout à ViewModel se complique pas de travail

Question 1

Je voudrais avoir une propriété dans mon ViewModel qui est lié à mon StackLayout. J'ai essayé ce que par la Liaison de mon StackLyout pour le ViewModel.

Quand je clique sur un bouton, cette disposition devrait être rendu invisible.

Quand je le fais avec le code ci-dessous, mon programme se bloque avec un NulReferenceObject: Objet de Référence non définie à une instance d'un objet. Le StackLayout que je parle est le premier dans le code ci-dessous.

<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

Voici comment passer deux modèles à l'aide de IsVisible de liaison.

D'ABORD Ajouter Nuget Xamarin.CommunityToolkit pour votre Xamarin Forms projet. (Celui qui est "MyProjectName", sans ".iOS" ou ".Android" à la fin.)

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

Voici comment passer deux modèles à l'aide de IsVisible de liaison.

D'ABORD Ajouter Nuget Xamarin.CommunityToolkit pour votre Xamarin Forms projet. (Celui qui est "MyProjectName", sans ".iOS" ou ".Android" à la fin.)

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;
        }
    }
}

La liaison StackLayout à ViewModel se complique pas de travail

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie