Set Picker value in Edit Page in Dotnet MAUI

Question

I am working on a MAUI Application, How can I set the saved value in picker field for Edit page? Is there any way to do that in MAUI? As an example in dropdown for webpages, if we try to change the value of any dropdown field in edit window , first it will show the value of previously selected value, then we can select the value from dropdown. I want the similar functionality in Dotnet MAUI.

Similar code item in JS :- document.getElementById("mySelect").value = "banana";

@Jason and how to do that? PickerName.SelectedItem = value; Please give me some reference, I am new to MAUI... — martian481, Nov 17 '22 at 13:13
Yes, that's how you do it. If you're having some specific problem please [edit] your question to include the relevant details. — Jason, Nov 17 '22 at 13:16
The first step to getting help, is to *add to question the code that you have so far*. Show your picker declaration. Have you read "Picker - .NET MAUI | Microsoft Learn" doc? If not, google `.net maui picker`. In it, see "Note: A Picker can be initialized to display a specific item by setting the SelectedIndex or SelectedItem properties. However, these properties must be set after initializing the ItemsSource collection.". Try to do what that says. If you get stuck, add your not working code to question, and describe what you can't figure out. https://stackoverflow.com/help/how-to-ask — ToolmakerSteve, Nov 17 '22 at 20:42

score 1 · Answer 1 · answered Nov 18 '22 at 08:26

I make a demo and it works well.

First, you should create a model class. Here is the code in Photo.cs.

  public class Photo
        {
            public string Name { get; set; }
        }

Second, you can create a ViewModel to handle the data. Here is the code in MyViewModel.cs

 public class MyViewModel
    {
        public  ObservableCollection<Photo> Photos { get; set; }

      
        public MyViewModel()
        {
            Photos = new ObservableCollection<Photo>();
            Photos.Add(new Photo() { Name = "Name1", });
            Photos.Add(new Photo() { Name = "Name2", });
            Photos.Add(new Photo() { Name = "Name3", });
        }

    }

Last, you should bind the ViewModel to the mainpage. Here is the code in MainPage.xaml.cs

public partial class MainPage : ContentPage
{
    public MainPage()
    {
     
        BindingContext = new MyViewModel();
        InitializeComponent();
    }

    void OnPickerSelectedIndexChanged(object sender, EventArgs e)
    {
        var picker = (Picker)sender;
        int selectedIndex = picker.SelectedIndex;

        if (selectedIndex != -1)
        {
            labelname.Text = picker.Items[selectedIndex];
        }
    }


}

and here is the code in MainPage.xaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiApp7"
             x:Class="MauiApp7.MainPage">

    <StackLayout>
        
        <Picker Title="Select a photo"
        ItemsSource="{Binding Photos}"
        ItemDisplayBinding="{Binding Name}"
        SelectedIndexChanged="OnPickerSelectedIndexChanged"/>

        <Label x:Name="labelname" />
    </StackLayout>
   

    
</ContentPage>

You can refer to this link Picker for more information.

Why not use SelectedItem/Index instead? You already have MVVM architecture set up. — H.A.H., Nov 18 '22 at 10:32

Set Picker value in Edit Page in Dotnet MAUI

1 Answers1