kandi background
kandi background
Explore Kits
kandi background
Explore Kits
kandi background
Explore Kits
kandi background
Explore Kits
Explore all Notification open source software, libraries, packages, source code, cloud functions and APIs.

Popular New Releases in Notification

Version 2.1.3

Revert Add AddRaw to not follow symlinks

Apprise Release v0.9.8.1

3.5.0

server

Version 2.1.3

fsnotify

Revert Add AddRaw to not follow symlinks

gorush

apprise

Apprise Release v0.9.8.1

noti

3.5.0

Popular Libraries in Notification

Trending New libraries in Notification

Top Authors in Notification

1

25 Libraries

1942

2

24 Libraries

232

3

13 Libraries

2626

4

12 Libraries

1570

5

10 Libraries

116

6

9 Libraries

203

7

9 Libraries

170

8

6 Libraries

121

9

6 Libraries

141

10

6 Libraries

17

1

25 Libraries

1942

2

24 Libraries

232

3

13 Libraries

2626

4

12 Libraries

1570

5

10 Libraries

116

6

9 Libraries

203

7

9 Libraries

170

8

6 Libraries

121

9

6 Libraries

141

10

6 Libraries

17

Trending Kits in Notification

No Trending Kits are available at this moment for Notification

Trending Discussions on Notification

    Why do Switch and ListView controls in MAUI not update with 2-way binding?
    The unauthenticated git protocol on port 9418 is no longer supported
    Attempting to register a user on my devise app causes undefined method `user_url' for #<Devise::RegistrationsController:0x0000000000d9d0>
    How to install the Bumblebee 2021.1.1 Android Studio Patch?
    What is the correct way to install Android Studio Bumblebee 2021.1.1 Patch 1
    Error: Requiring module "node_modules\react-native-reanimated\src\Animated.js",
    flutter permission Handler grant not showing on iOS
    Vue 3: Module '"../../node_modules/vue/dist/vue"' has no exported member
    clarity.js by Microsoft slowing overall page loads
    expo-barcode-scanner only works once with react-native version 0.64.2 and expo 43.0.0

QUESTION

Why do Switch and ListView controls in MAUI not update with 2-way binding?

Asked 2022-Apr-11 at 09:33

This question is about two MAUI controls (Switch and ListView) - I'm asking about them both in the same question as I'm expecting the root cause of the problem to be the same for both controls. It's entirely possible that they're different problems that just share some common symptoms though. (CollectionView has similar issues, but other confounding factors that make it trickier to demonstrate.)

I'm using 2-way data binding in my MAUI app: changes to the data can either come directly from the user, or from a background polling task that checks whether the canonical data has been changed elsewhere. The problem I'm facing is that changes to the view model are not visually propagated to the Switch.IsToggled and ListView.SelectedItem properties, even though the controls do raise events showing that they've "noticed" the property changes. Other controls (e.g. Label and Checkbox) are visually updated, indicating that the view model notification is working fine and the UI itself is generally healthy.

Build environment: Visual Studio 2022 17.2.0 preview 2.1
App environment: Android, either emulator "Pixel 5 - API 30" or a real Pixel 6

The sample code is all below, but the fundamental question is whether this a bug somewhere in my code (do I need to "tell" the controls to update themselves for some reason?) or possibly a bug in MAUI (in which case I should presumably report it)?

Sample code

The sample code below can be added directly a "File new project" MAUI app (with a name of "MauiPlayground" to use the same namespaces), or it's all available from my demo code repo. Each example is independent of the other - you can try just one. (Then update App.cs to set MainPage to the right example.)

Both examples have a very simple situation: a control with two-way binding to a view-model, and a button that updates the view-model property (to simulate "the data has been modified elsewhere" in the real app). In both cases, the control remains unchanged visually.

Note that I've specified {Binding ..., Mode=TwoWay} in both cases, even though that's the default for those properties, just to be super-clear that that isn't the problem.

The ViewModelBase code is shared by both examples, and is simply a convenient way of raising INotifyPropertyChanged.PropertyChanged without any extra dependencies:

ViewModelBase.cs:

1using System.ComponentModel;
2using System.Runtime.CompilerServices;
3
4namespace MauiPlayground;
5
6public class ViewModelBase : INotifyPropertyChanged
7{
8    public event PropertyChangedEventHandler PropertyChanged;
9
10    public bool SetProperty<T>(ref T field, T value, [CallerMemberName] string name = null)
11    {
12        if (EqualityComparer<T>.Default.Equals(field, value))
13        {
14            return false;
15        }
16        field = value;
17        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
18        return true;
19    }
20}
21

Switch sample code

SwitchDemo.xaml

1using System.ComponentModel;
2using System.Runtime.CompilerServices;
3
4namespace MauiPlayground;
5
6public class ViewModelBase : INotifyPropertyChanged
7{
8    public event PropertyChangedEventHandler PropertyChanged;
9
10    public bool SetProperty<T>(ref T field, T value, [CallerMemberName] string name = null)
11    {
12        if (EqualityComparer<T>.Default.Equals(field, value))
13        {
14            return false;
15        }
16        field = value;
17        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
18        return true;
19    }
20}
21<?xml version="1.0" encoding="utf-8" ?>
22<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
23             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
24             x:Class="MauiPlayground.SwitchDemo">
25    <StackLayout>
26        <Label Text="Switch binding demo" />
27        <HorizontalStackLayout>
28            <Switch x:Name="switchControl"
29                    IsToggled="{Binding Toggled, Mode=TwoWay}"
30                    Toggled="Toggled" />
31            <CheckBox IsChecked="{Binding Toggled, Mode=TwoWay}" />
32            <Label Text="{Binding Toggled}" />
33        </HorizontalStackLayout>
34
35        <Button Text="Toggle" Clicked="Toggle" />
36        <Label x:Name="manualLabel1" Text="Value set in button click handler" />
37        <Label x:Name="manualLabel2" Text="Value set in toggled handler" />
38    </StackLayout>
39</ContentPage>
40

SwitchDemo.cs

1using System.ComponentModel;
2using System.Runtime.CompilerServices;
3
4namespace MauiPlayground;
5
6public class ViewModelBase : INotifyPropertyChanged
7{
8    public event PropertyChangedEventHandler PropertyChanged;
9
10    public bool SetProperty<T>(ref T field, T value, [CallerMemberName] string name = null)
11    {
12        if (EqualityComparer<T>.Default.Equals(field, value))
13        {
14            return false;
15        }
16        field = value;
17        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
18        return true;
19    }
20}
21<?xml version="1.0" encoding="utf-8" ?>
22<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
23             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
24             x:Class="MauiPlayground.SwitchDemo">
25    <StackLayout>
26        <Label Text="Switch binding demo" />
27        <HorizontalStackLayout>
28            <Switch x:Name="switchControl"
29                    IsToggled="{Binding Toggled, Mode=TwoWay}"
30                    Toggled="Toggled" />
31            <CheckBox IsChecked="{Binding Toggled, Mode=TwoWay}" />
32            <Label Text="{Binding Toggled}" />
33        </HorizontalStackLayout>
34
35        <Button Text="Toggle" Clicked="Toggle" />
36        <Label x:Name="manualLabel1" Text="Value set in button click handler" />
37        <Label x:Name="manualLabel2" Text="Value set in toggled handler" />
38    </StackLayout>
39</ContentPage>
40namespace MauiPlayground;
41
42public partial class SwitchDemo : ContentPage
43{
44    public SwitchDemo()
45    {
46        InitializeComponent();
47        BindingContext = new ViewModel();
48    }
49
50    private void Toggle(object sender, EventArgs e)
51    {
52        var vm = (ViewModel)BindingContext;
53        vm.Toggled = !vm.Toggled;
54        manualLabel1.Text = $"Set in click handler: {switchControl.IsToggled}";
55    }
56
57    private void Toggled(object sender, ToggledEventArgs e) =>
58        manualLabel2.Text = $"Set in toggled handler: {switchControl.IsToggled}";
59
60    private class ViewModel : ViewModelBase
61    {
62        private bool toggled;
63        public bool Toggled
64        {
65            get => toggled;
66            set => SetProperty(ref toggled, value);
67        }
68    }
69}
70

Screenshot of the emulator after clicking on the "Toggle" button, which updates the view-model:

Demonstration of Switch issue

Notes:

  • The checkbox (bound to the same VM property) has updated
  • The label next to the checkbox (bound to the same VM property) has updated
  • The label below the button indicates that switch.IsToggled is true
  • The label below that indicates that the Switch.Toggled event has been raised
  • The Switch itself has not changed visible state

Clicking on the Switch control directly does visually toggle it.

ListView sample code

ListViewDemo.xaml

1using System.ComponentModel;
2using System.Runtime.CompilerServices;
3
4namespace MauiPlayground;
5
6public class ViewModelBase : INotifyPropertyChanged
7{
8    public event PropertyChangedEventHandler PropertyChanged;
9
10    public bool SetProperty<T>(ref T field, T value, [CallerMemberName] string name = null)
11    {
12        if (EqualityComparer<T>.Default.Equals(field, value))
13        {
14            return false;
15        }
16        field = value;
17        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
18        return true;
19    }
20}
21<?xml version="1.0" encoding="utf-8" ?>
22<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
23             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
24             x:Class="MauiPlayground.SwitchDemo">
25    <StackLayout>
26        <Label Text="Switch binding demo" />
27        <HorizontalStackLayout>
28            <Switch x:Name="switchControl"
29                    IsToggled="{Binding Toggled, Mode=TwoWay}"
30                    Toggled="Toggled" />
31            <CheckBox IsChecked="{Binding Toggled, Mode=TwoWay}" />
32            <Label Text="{Binding Toggled}" />
33        </HorizontalStackLayout>
34
35        <Button Text="Toggle" Clicked="Toggle" />
36        <Label x:Name="manualLabel1" Text="Value set in button click handler" />
37        <Label x:Name="manualLabel2" Text="Value set in toggled handler" />
38    </StackLayout>
39</ContentPage>
40namespace MauiPlayground;
41
42public partial class SwitchDemo : ContentPage
43{
44    public SwitchDemo()
45    {
46        InitializeComponent();
47        BindingContext = new ViewModel();
48    }
49
50    private void Toggle(object sender, EventArgs e)
51    {
52        var vm = (ViewModel)BindingContext;
53        vm.Toggled = !vm.Toggled;
54        manualLabel1.Text = $"Set in click handler: {switchControl.IsToggled}";
55    }
56
57    private void Toggled(object sender, ToggledEventArgs e) =>
58        manualLabel2.Text = $"Set in toggled handler: {switchControl.IsToggled}";
59
60    private class ViewModel : ViewModelBase
61    {
62        private bool toggled;
63        public bool Toggled
64        {
65            get => toggled;
66            set => SetProperty(ref toggled, value);
67        }
68    }
69}
70<?xml version="1.0" encoding="utf-8" ?>
71<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
72             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
73             x:Class="MauiPlayground.ListViewDemo">
74    <StackLayout>
75        <Label Text="ListView binding demo" />
76        <ListView x:Name="listView" ItemsSource="{Binding Items}"
77                  SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
78                  VerticalOptions="Start"
79                  ItemSelected="ItemSelected"/>
80        <Label Text="{Binding SelectedItem}" />
81        <Button Text="Toggle" Clicked="Toggle" />
82        <Label x:Name="manualLabel1" Text="Text set in button click handler" />
83        <Label x:Name="manualLabel2" Text="Text set in item selected handler" />
84    </StackLayout>
85</ContentPage>
86

ListViewDemo.cs

1using System.ComponentModel;
2using System.Runtime.CompilerServices;
3
4namespace MauiPlayground;
5
6public class ViewModelBase : INotifyPropertyChanged
7{
8    public event PropertyChangedEventHandler PropertyChanged;
9
10    public bool SetProperty<T>(ref T field, T value, [CallerMemberName] string name = null)
11    {
12        if (EqualityComparer<T>.Default.Equals(field, value))
13        {
14            return false;
15        }
16        field = value;
17        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
18        return true;
19    }
20}
21<?xml version="1.0" encoding="utf-8" ?>
22<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
23             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
24             x:Class="MauiPlayground.SwitchDemo">
25    <StackLayout>
26        <Label Text="Switch binding demo" />
27        <HorizontalStackLayout>
28            <Switch x:Name="switchControl"
29                    IsToggled="{Binding Toggled, Mode=TwoWay}"
30                    Toggled="Toggled" />
31            <CheckBox IsChecked="{Binding Toggled, Mode=TwoWay}" />
32            <Label Text="{Binding Toggled}" />
33        </HorizontalStackLayout>
34
35        <Button Text="Toggle" Clicked="Toggle" />
36        <Label x:Name="manualLabel1" Text="Value set in button click handler" />
37        <Label x:Name="manualLabel2" Text="Value set in toggled handler" />
38    </StackLayout>
39</ContentPage>
40namespace MauiPlayground;
41
42public partial class SwitchDemo : ContentPage
43{
44    public SwitchDemo()
45    {
46        InitializeComponent();
47        BindingContext = new ViewModel();
48    }
49
50    private void Toggle(object sender, EventArgs e)
51    {
52        var vm = (ViewModel)BindingContext;
53        vm.Toggled = !vm.Toggled;
54        manualLabel1.Text = $"Set in click handler: {switchControl.IsToggled}";
55    }
56
57    private void Toggled(object sender, ToggledEventArgs e) =>
58        manualLabel2.Text = $"Set in toggled handler: {switchControl.IsToggled}";
59
60    private class ViewModel : ViewModelBase
61    {
62        private bool toggled;
63        public bool Toggled
64        {
65            get => toggled;
66            set => SetProperty(ref toggled, value);
67        }
68    }
69}
70<?xml version="1.0" encoding="utf-8" ?>
71<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
72             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
73             x:Class="MauiPlayground.ListViewDemo">
74    <StackLayout>
75        <Label Text="ListView binding demo" />
76        <ListView x:Name="listView" ItemsSource="{Binding Items}"
77                  SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
78                  VerticalOptions="Start"
79                  ItemSelected="ItemSelected"/>
80        <Label Text="{Binding SelectedItem}" />
81        <Button Text="Toggle" Clicked="Toggle" />
82        <Label x:Name="manualLabel1" Text="Text set in button click handler" />
83        <Label x:Name="manualLabel2" Text="Text set in item selected handler" />
84    </StackLayout>
85</ContentPage>
86namespace MauiPlayground;
87
88public partial class ListViewDemo : ContentPage
89{
90    public ListViewDemo()
91    {
92        InitializeComponent();
93        BindingContext = new ViewModel();
94    }
95
96    private void Toggle(object sender, EventArgs e)
97    {
98        var vm = (ViewModel)BindingContext;
99        vm.SelectedItem = vm.SelectedItem == "First" ? "Second" : "First";
100        manualLabel1.Text = $"Set in click handler: {listView.SelectedItem}";
101    }
102
103    private void ItemSelected(object sender, EventArgs e) =>
104        manualLabel2.Text = $"Set in item selected handler: {listView.SelectedItem}";
105
106    private class ViewModel : ViewModelBase
107    {
108        public List<string> Items { get; } = new List<string> { "First", "Second" };
109
110        private string selectedItem = "First";
111        public string SelectedItem
112        {
113            get => selectedItem;
114            set => SetProperty(ref selectedItem, value);
115        }
116    }
117}
118

Screenshot of the emulator after clicking on the "Toggle" button, which updates the view-model:

Demonstration of ListView issue

Notes:

  • The label below the list view (bound to the same VM property) has updated
  • The label below the button indicates that listView.SelectedItem has the new value
  • The label below that indicates that the ListView.ItemSelected event has been raised
  • The ListView itself appears to have no selected item

Interestingly, the list view does actually change appearance: before clicking on the button, the first item is visually selected (in orange). Selecting an item from the list manually updates all the properties, but we don't see the selected item in orange.

ANSWER

Answered 2022-Apr-09 at 18:07

These both may be bugs with the currently released version of MAUI.

This bug was recently posted and there is already a fix for the Switch to address this issue.

Source https://stackoverflow.com/questions/71810199

Community Discussions contain sources that include Stack Exchange Network

    Why do Switch and ListView controls in MAUI not update with 2-way binding?
    The unauthenticated git protocol on port 9418 is no longer supported
    Attempting to register a user on my devise app causes undefined method `user_url' for #<Devise::RegistrationsController:0x0000000000d9d0>
    How to install the Bumblebee 2021.1.1 Android Studio Patch?
    What is the correct way to install Android Studio Bumblebee 2021.1.1 Patch 1
    Error: Requiring module "node_modules\react-native-reanimated\src\Animated.js",
    flutter permission Handler grant not showing on iOS
    Vue 3: Module '"../../node_modules/vue/dist/vue"' has no exported member
    clarity.js by Microsoft slowing overall page loads
    expo-barcode-scanner only works once with react-native version 0.64.2 and expo 43.0.0

QUESTION

Why do Switch and ListView controls in MAUI not update with 2-way binding?

Asked 2022-Apr-11 at 09:33

This question is about two MAUI controls (Switch and ListView) - I'm asking about them both in the same question as I'm expecting the root cause of the problem to be the same for both controls. It's entirely possible that they're different problems that just share some common symptoms though. (CollectionView has similar issues, but other confounding factors that make it trickier to demonstrate.)

I'm using 2-way data binding in my MAUI app: changes to the data can either come directly from the user, or from a background polling task that checks whether the canonical data has been changed elsewhere. The problem I'm facing is that changes to the view model are not visually propagated to the Switch.IsToggled and ListView.SelectedItem properties, even though the controls do raise events showing that they've "noticed" the property changes. Other controls (e.g. Label and Checkbox) are visually updated, indicating that the view model notification is working fine and the UI itself is generally healthy.

Build environment: Visual Studio 2022 17.2.0 preview 2.1
App environment: Android, either emulator "Pixel 5 - API 30" or a real Pixel 6

The sample code is all below, but the fundamental question is whether this a bug somewhere in my code (do I need to "tell" the controls to update themselves for some reason?) or possibly a bug in MAUI (in which case I should presumably report it)?

Sample code

The sample code below can be added directly a "File new project" MAUI app (with a name of "MauiPlayground" to use the same namespaces), or it's all available from my demo code repo. Each example is independent of the other - you can try just one. (Then update App.cs to set MainPage to the right example.)

Both examples have a very simple situation: a control with two-way binding to a view-model, and a button that updates the view-model property (to simulate "the data has been modified elsewhere" in the real app). In both cases, the control remains unchanged visually.

Note that I've specified {Binding ..., Mode=TwoWay} in both cases, even though that's the default for those properties, just to be super-clear that that isn't the problem.

The ViewModelBase code is shared by both examples, and is simply a convenient way of raising INotifyPropertyChanged.PropertyChanged without any extra dependencies:

ViewModelBase.cs:

1using System.ComponentModel;
2using System.Runtime.CompilerServices;
3
4namespace MauiPlayground;
5
6public class ViewModelBase : INotifyPropertyChanged
7{
8    public event PropertyChangedEventHandler PropertyChanged;
9
10    public bool SetProperty<T>(ref T field, T value, [CallerMemberName] string name = null)
11    {
12        if (EqualityComparer<T>.Default.Equals(field, value))
13        {
14            return false;
15        }
16        field = value;
17        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
18        return true;
19    }
20}
21

Switch sample code

SwitchDemo.xaml

1using System.ComponentModel;
2using System.Runtime.CompilerServices;
3
4namespace MauiPlayground;
5
6public class ViewModelBase : INotifyPropertyChanged
7{
8    public event PropertyChangedEventHandler PropertyChanged;
9
10    public bool SetProperty<T>(ref T field, T value, [CallerMemberName] string name = null)
11    {
12        if (EqualityComparer<T>.Default.Equals(field, value))
13        {
14            return false;
15        }
16        field = value;
17        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
18        return true;
19    }
20}
21<?xml version="1.0" encoding="utf-8" ?>
22<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
23             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
24             x:Class="MauiPlayground.SwitchDemo">
25    <StackLayout>
26        <Label Text="Switch binding demo" />
27        <HorizontalStackLayout>
28            <Switch x:Name="switchControl"
29                    IsToggled="{Binding Toggled, Mode=TwoWay}"
30                    Toggled="Toggled" />
31            <CheckBox IsChecked="{Binding Toggled, Mode=TwoWay}" />
32            <Label Text="{Binding Toggled}" />
33        </HorizontalStackLayout>
34
35        <Button Text="Toggle" Clicked="Toggle" />
36        <Label x:Name="manualLabel1" Text="Value set in button click handler" />
37        <Label x:Name="manualLabel2" Text="Value set in toggled handler" />
38    </StackLayout>
39</ContentPage>
40

SwitchDemo.cs

1using System.ComponentModel;
2using System.Runtime.CompilerServices;
3
4namespace MauiPlayground;
5
6public class ViewModelBase : INotifyPropertyChanged
7{
8    public event PropertyChangedEventHandler PropertyChanged;
9
10    public bool SetProperty<T>(ref T field, T value, [CallerMemberName] string name = null)
11    {
12        if (EqualityComparer<T>.Default.Equals(field, value))
13        {
14            return false;
15        }
16        field = value;
17        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
18        return true;
19    }
20}
21<?xml version="1.0" encoding="utf-8" ?>
22<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
23             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
24             x:Class="MauiPlayground.SwitchDemo">
25    <StackLayout>
26        <Label Text="Switch binding demo" />
27        <HorizontalStackLayout>
28            <Switch x:Name="switchControl"
29                    IsToggled="{Binding Toggled, Mode=TwoWay}"
30                    Toggled="Toggled" />
31            <CheckBox IsChecked="{Binding Toggled, Mode=TwoWay}" />
32            <Label Text="{Binding Toggled}" />
33        </HorizontalStackLayout>
34
35        <Button Text="Toggle" Clicked="Toggle" />
36        <Label x:Name="manualLabel1" Text="Value set in button click handler" />
37        <Label x:Name="manualLabel2" Text="Value set in toggled handler" />
38    </StackLayout>
39</ContentPage>
40namespace MauiPlayground;
41
42public partial class SwitchDemo : ContentPage
43{
44    public SwitchDemo()
45    {
46        InitializeComponent();
47        BindingContext = new ViewModel();
48    }
49
50    private void Toggle(object sender, EventArgs e)
51    {
52        var vm = (ViewModel)BindingContext;
53        vm.Toggled = !vm.Toggled;
54        manualLabel1.Text = $"Set in click handler: {switchControl.IsToggled}";
55    }
56
57    private void Toggled(object sender, ToggledEventArgs e) =>
58        manualLabel2.Text = $"Set in toggled handler: {switchControl.IsToggled}";
59
60    private class ViewModel : ViewModelBase
61    {
62        private bool toggled;
63        public bool Toggled
64        {
65            get => toggled;
66            set => SetProperty(ref toggled, value);
67        }
68    }
69}
70

Screenshot of the emulator after clicking on the "Toggle" button, which updates the view-model:

Demonstration of Switch issue

Notes:

  • The checkbox (bound to the same VM property) has updated
  • The label next to the checkbox (bound to the same VM property) has updated
  • The label below the button indicates that switch.IsToggled is true
  • The label below that indicates that the Switch.Toggled event has been raised
  • The Switch itself has not changed visible state

Clicking on the Switch control directly does visually toggle it.

ListView sample code

ListViewDemo.xaml

1using System.ComponentModel;
2using System.Runtime.CompilerServices;
3
4namespace MauiPlayground;
5
6public class ViewModelBase : INotifyPropertyChanged
7{
8    public event PropertyChangedEventHandler PropertyChanged;
9
10    public bool SetProperty<T>(ref T field, T value, [CallerMemberName] string name = null)
11    {
12        if (EqualityComparer<T>.Default.Equals(field, value))
13        {
14            return false;
15        }
16        field = value;
17        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
18        return true;
19    }
20}
21<?xml version="1.0" encoding="utf-8" ?>
22<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
23             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
24             x:Class="MauiPlayground.SwitchDemo">
25    <StackLayout>
26        <Label Text="Switch binding demo" />
27        <HorizontalStackLayout>
28            <Switch x:Name="switchControl"
29                    IsToggled="{Binding Toggled, Mode=TwoWay}"
30                    Toggled="Toggled" />
31            <CheckBox IsChecked="{Binding Toggled, Mode=TwoWay}" />
32            <Label Text="{Binding Toggled}" />
33        </HorizontalStackLayout>
34
35        <Button Text="Toggle" Clicked="Toggle" />
36        <Label x:Name="manualLabel1" Text="Value set in button click handler" />
37        <Label x:Name="manualLabel2" Text="Value set in toggled handler" />
38    </StackLayout>
39</ContentPage>
40namespace MauiPlayground;
41
42public partial class SwitchDemo : ContentPage
43{
44    public SwitchDemo()
45    {
46        InitializeComponent();
47        BindingContext = new ViewModel();
48    }
49
50    private void Toggle(object sender, EventArgs e)
51    {
52        var vm = (ViewModel)BindingContext;
53        vm.Toggled = !vm.Toggled;
54        manualLabel1.Text = $"Set in click handler: {switchControl.IsToggled}";
55    }
56
57    private void Toggled(object sender, ToggledEventArgs e) =>
58        manualLabel2.Text = $"Set in toggled handler: {switchControl.IsToggled}";
59
60    private class ViewModel : ViewModelBase
61    {
62        private bool toggled;
63        public bool Toggled
64        {
65            get => toggled;
66            set => SetProperty(ref toggled, value);
67        }
68    }
69}
70<?xml version="1.0" encoding="utf-8" ?>
71<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
72             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
73             x:Class="MauiPlayground.ListViewDemo">
74    <StackLayout>
75        <Label Text="ListView binding demo" />
76        <ListView x:Name="listView" ItemsSource="{Binding Items}"
77                  SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
78                  VerticalOptions="Start"
79                  ItemSelected="ItemSelected"/>
80        <Label Text="{Binding SelectedItem}" />
81        <Button Text="Toggle" Clicked="Toggle" />
82        <Label x:Name="manualLabel1" Text="Text set in button click handler" />
83        <Label x:Name="manualLabel2" Text="Text set in item selected handler" />
84    </StackLayout>
85</ContentPage>
86

ListViewDemo.cs

1using System.ComponentModel;
2using System.Runtime.CompilerServices;
3
4namespace MauiPlayground;
5
6public class ViewModelBase : INotifyPropertyChanged
7{
8    public event PropertyChangedEventHandler PropertyChanged;
9
10    public bool SetProperty<T>(ref T field, T value, [CallerMemberName] string name = null)
11    {
12        if (EqualityComparer<T>.Default.Equals(field, value))
13        {
14            return false;
15        }
16        field = value;
17        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
18        return true;
19    }
20}
21<?xml version="1.0" encoding="utf-8" ?>
22<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
23             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
24             x:Class="MauiPlayground.SwitchDemo">
25    <StackLayout>
26        <Label Text="Switch binding demo" />
27        <HorizontalStackLayout>
28            <Switch x:Name="switchControl"
29                    IsToggled="{Binding Toggled, Mode=TwoWay}"
30                    Toggled="Toggled" />
31            <CheckBox IsChecked="{Binding Toggled, Mode=TwoWay}" />
32            <Label Text="{Binding Toggled}" />
33        </HorizontalStackLayout>
34
35        <Button Text="Toggle" Clicked="Toggle" />
36        <Label x:Name="manualLabel1" Text="Value set in button click handler" />
37        <Label x:Name="manualLabel2" Text="Value set in toggled handler" />
38    </StackLayout>
39</ContentPage>
40namespace MauiPlayground;
41
42public partial class SwitchDemo : ContentPage
43{
44    public SwitchDemo()
45    {
46        InitializeComponent();
47        BindingContext = new ViewModel();
48    }
49
50    private void Toggle(object sender, EventArgs e)
51    {
52        var vm = (ViewModel)BindingContext;
53        vm.Toggled = !vm.Toggled;
54        manualLabel1.Text = $"Set in click handler: {switchControl.IsToggled}";
55    }
56
57    private void Toggled(object sender, ToggledEventArgs e) =>
58        manualLabel2.Text = $"Set in toggled handler: {switchControl.IsToggled}";
59
60    private class ViewModel : ViewModelBase
61    {
62        private bool toggled;
63        public bool Toggled
64        {
65            get => toggled;
66            set => SetProperty(ref toggled, value);
67        }
68    }
69}
70<?xml version="1.0" encoding="utf-8" ?>
71<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
72             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
73             x:Class="MauiPlayground.ListViewDemo">
74    <StackLayout>
75        <Label Text="ListView binding demo" />
76        <ListView x:Name="listView" ItemsSource="{Binding Items}"
77                  SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
78                  VerticalOptions="Start"
79                  ItemSelected="ItemSelected"/>
80        <Label Text="{Binding SelectedItem}" />
81        <Button Text="Toggle" Clicked="Toggle" />
82        <Label x:Name="manualLabel1" Text="Text set in button click handler" />
83        <Label x:Name="manualLabel2" Text="Text set in item selected handler" />
84    </StackLayout>
85</ContentPage>
86namespace MauiPlayground;
87
88public partial class ListViewDemo : ContentPage
89{
90    public ListViewDemo()
91    {
92        InitializeComponent();
93        BindingContext = new ViewModel();
94    }
95
96    private void Toggle(object sender, EventArgs e)
97    {
98        var vm = (ViewModel)BindingContext;
99        vm.SelectedItem = vm.SelectedItem == "First" ? "Second" : "First";
100        manualLabel1.Text = $"Set in click handler: {listView.SelectedItem}";
101    }
102
103    private void ItemSelected(object sender, EventArgs e) =>
104        manualLabel2.Text = $"Set in item selected handler: {listView.SelectedItem}";
105
106    private class ViewModel : ViewModelBase
107    {
108        public List<string> Items { get; } = new List<string> { "First", "Second" };
109
110        private string selectedItem = "First";
111        public string SelectedItem
112        {
113            get => selectedItem;
114            set => SetProperty(ref selectedItem, value);
115        }
116    }
117}
118

Screenshot of the emulator after clicking on the "Toggle" button, which updates the view-model:

Demonstration of ListView issue

Notes:

  • The label below the list view (bound to the same VM property) has updated
  • The label below the button indicates that listView.SelectedItem has the new value
  • The label below that indicates that the ListView.ItemSelected event has been raised
  • The ListView itself appears to have no selected item

Interestingly, the list view does actually change appearance: before clicking on the button, the first item is visually selected (in orange). Selecting an item from the list manually updates all the properties, but we don't see the selected item in orange.

ANSWER

Answered 2022-Apr-09 at 18:07

These both may be bugs with the currently released version of MAUI.

This bug was recently posted and there is already a fix for the Switch to address this issue.

Source https://stackoverflow.com/questions/71810199