结合StackLayout到模型好好尝试一下工作

Question 1

我想有一个属于我的视图模型，是联系到我的StackLayout. 我试图通过结合我StackLyout的模型.

当我按一个按钮，这种布局应当作看不见的。

当我这样做的代码下面，我的程序的崩溃，一个NulReferenceObject：对象参考，不设置为一个象的实例。该StackLayout，我谈论的是第一个在码如下。

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

视图模型

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

这里是如何开关两个布局使用 IsVisible 结合。

第一个加入 Nuget Xamarin.CommunityToolkit 你好形式的项目。 (一个是"MyProjectName"，不".iOS"或"。机器人"在结束。)

TwoLayoutPage.键

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

这里是如何开关两个布局使用 IsVisible 结合。

第一个加入 Nuget Xamarin.CommunityToolkit 你好形式的项目。 (一个是"MyProjectName"，不".iOS"或"。机器人"在结束。)

TwoLayoutPage.键

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

结合StackLayout到模型好好尝试一下工作

的问题

最好的答案

其他语言

此页面有其他语言版本

受欢迎的此类别

流行的问题，在这个类别