MAUI add control element to GUI using MVVM-CodePudding

I use the community tool MVVM for my current MAUI project. I would like to dynamically add controls like an entry to the GUI during runtime. I would like to do that from the ViewModel. Using the toolkit, it is of course very easy to provide and interact with functions and properties. Unfortunately I haven't found a way to directly access a StackLayout or something similar.

I tried giving the VerticalStackLayout property x:name (in my xaml document) a name and then accessing it. This works from the code-behind, but not from the ViewModel itself.

I expected that with in the viewModel for example my StackLayout is displayed and then I can execute the following.

stackLayout.Add(new Label { Text = "Primary colors" }));

Furthermore I tried to provide a binding to the property x:name. x:Name="{Binding StackLayout}

In the ViewModel I then tried to provide the property.

[ObservableProperty]
VerticalStackLayout stackLayout;

CodePudding user response：

To clarify: the ViewModel doesn't know about the View, but the View DOES know about the ViewModel.

Thus, the view's code behind can do what is needed.

If the View doesn't already have a property holding the viewmodel, then add to code behind:

private MyVM VM => (MyVM)BindingContext;

That defines a VM property, so you can do VM.MyDictionary[someKey] or similar.

If you need to access VM in constructor BEFORE setting BindingContext, then edit question, to show how BindingContext is set currently.

CodePudding user response：

Yes, you can use MVVM to achieve this.

A simple method is to use Bindable Layouts to achieve this.

Please refer to the following code:

1.create a viewmodel for current page

MyViewModel.cs

public class MyViewModel 
{
    public int index = 0;
    public ObservableCollection<Data> Items { get; set; }

    public ICommand AddItemCommand => new Command(addItemMethod);

    private void addItemMethod(object obj)
    {
        index  ;
        Items.Add(new Data { FileName ="File "   index});
    }


    public MyViewModel()
    {
        Items = new ObservableCollection<Data>();
    }

}

Data.cs

public class Data 
{
    public string FileName { get; set; }
}

2.MainPage.xaml

<?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:mauiapp="clr-namespace:MauiAddViewApp116"
             x:Class="MauiAddViewApp116.MainPage"
              x:Name="mainpage"
             >

    <ContentPage.BindingContext>
        <mauiapp:MyViewModel></mauiapp:MyViewModel>
    </ContentPage.BindingContext>

    <ScrollView>
        <VerticalStackLayout 
            Margin="10"
            VerticalOptions="StartAndExpand">

            <Button Text="Add item" Command="{Binding AddItemCommand}"></Button>

            <StackLayout BindableLayout.ItemsSource="{Binding Items}" Orientation="Vertical">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <Label   HorizontalOptions="Fill" Text="{Binding FileName}" FontSize="Large" HeightRequest="38" />
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </StackLayout>
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>