Fix broken radio buttons (#62)

chkr1011 · web-flow · commit 0224099e576b · 2022-10-26T19:50:30.000+02:00
diff --git a/Source/App.axaml b/Source/App.axaml
@@ -32,6 +32,7 @@
         <StyleInclude Source="/Styles/NumericUpDown.axaml" />
         <StyleInclude Source="/Styles/ComboBox.axaml" />
         <StyleInclude Source="/Styles/CheckBox.axaml" />
+        <StyleInclude Source="/Styles/RadioButton.axaml" />
 
         <StyleInclude Source="/Styles/Text.axaml" />
 
diff --git a/Source/Common/BaseSingleSelectionViewModel.cs b/Source/Common/BaseSingleSelectionViewModel.cs
@@ -0,0 +1,42 @@
+using ReactiveUI;
+
+namespace MQTTnetApp.Common;
+
+public abstract class BaseSingleSelectionViewModel : BaseViewModel
+{
+    readonly bool[] _states;
+
+    protected BaseSingleSelectionViewModel(int count)
+    {
+        _states = new bool[count];
+    }
+
+    protected bool GetState(int index)
+    {
+        return _states[index];
+    }
+
+    protected void UpdateStates(int changedStateIndex, bool changedStateValue)
+    {
+        if (!changedStateValue)
+        {
+            // Do not allow "unchecking" the value.
+            return;
+        }
+
+        for (var i = 0; i < _states.Length; i++)
+        {
+            if (i == changedStateIndex)
+            {
+                _states[i] = changedStateValue;
+            }
+            else
+            {
+                _states[i] = !changedStateValue;
+            }
+        }
+
+        // Notify all properties!
+        this.RaisePropertyChanged(string.Empty);
+    }
+}
diff --git a/Source/Controls/QualityOfServiceLevel/QualityOfServiceLevelSelectorView.axaml b/Source/Controls/QualityOfServiceLevel/QualityOfServiceLevelSelectorView.axaml
@@ -9,23 +9,17 @@
              d:DataContext="{d:DesignInstance controls:QualityOfServiceLevelSelectorViewModel}"
              x:Class="MQTTnetApp.Controls.QualityOfServiceLevelSelectorView">
     <StackPanel Orientation="Horizontal">
-        <StackPanel.Styles>
-            <Style Selector="RadioButton">
-                <Setter Property="Margin"
-                        Value="0,0,10,0" />
-            </Style>
-        </StackPanel.Styles>
+        <CheckBox Content="At most once - 0"
+                  Classes="radio-button"
+                  IsChecked="{Binding Path=IsLevel0, Mode=TwoWay}" />
 
-        <RadioButton GroupName="QoS"
-                     Content="At most once (0)"
-                     IsChecked="{Binding Path=IsLevel0, Mode=TwoWay}" />
+        <CheckBox Margin="10,0"
+                  Content="At lease once - 1"
+                  Classes="radio-button"
+                  IsChecked="{Binding Path=IsLevel1, Mode=TwoWay}" />
 
-        <RadioButton GroupName="QoS"
-                     Content="At lease once (1)"
-                     IsChecked="{Binding Path=IsLevel1, Mode=TwoWay}" />
-
-        <RadioButton GroupName="QoS"
-                     Content="Exactly once (2)"
-                     IsChecked="{Binding Path=IsLevel2, Mode=TwoWay}" />
+        <CheckBox Content="Exactly once - 2"
+                  Classes="radio-button"
+                  IsChecked="{Binding Path=IsLevel2, Mode=TwoWay}" />
     </StackPanel>
 </UserControl>
diff --git a/Source/Controls/QualityOfServiceLevel/QualityOfServiceLevelSelectorViewModel.cs b/Source/Controls/QualityOfServiceLevel/QualityOfServiceLevelSelectorViewModel.cs
@@ -1,37 +1,32 @@
 ﻿using System;
 using MQTTnet.Protocol;
 using MQTTnetApp.Common;
-using ReactiveUI;
 
 namespace MQTTnetApp.Controls;
 
-public sealed class QualityOfServiceLevelSelectorViewModel : BaseViewModel
+public sealed class QualityOfServiceLevelSelectorViewModel : BaseSingleSelectionViewModel
 {
-    bool _isLevel0 = true;
-    bool _isLevel1;
-    bool _isLevel2;
-
-    public QualityOfServiceLevelSelectorViewModel()
+    public QualityOfServiceLevelSelectorViewModel() : base(3)
     {
         Value = MqttQualityOfServiceLevel.AtMostOnce;
     }
 
     public bool IsLevel0
     {
-        get => _isLevel0;
-        set => this.RaiseAndSetIfChanged(ref _isLevel0, value);
+        get => GetState(0);
+        set => UpdateStates(0, value);
     }
 
     public bool IsLevel1
     {
-        get => _isLevel1;
-        set => this.RaiseAndSetIfChanged(ref _isLevel1, value);
+        get => GetState(1);
+        set => UpdateStates(1, value);
     }
 
     public bool IsLevel2
     {
-        get => _isLevel2;
-        set => this.RaiseAndSetIfChanged(ref _isLevel2, value);
+        get => GetState(2);
+        set => UpdateStates(2, value);
     }
 
     public MqttQualityOfServiceLevel Value
diff --git a/Source/Controls/RetainHandling/RetainHandlingSelectorView.axaml b/Source/Controls/RetainHandling/RetainHandlingSelectorView.axaml
@@ -9,23 +9,17 @@
              d:DataContext="{d:DesignInstance controls:RetainHandlingSelectorViewModel}"
              x:Class="MQTTnetApp.Controls.RetainHandlingSelectorView">
     <StackPanel Orientation="Horizontal">
-        <StackPanel.Styles>
-            <Style Selector="RadioButton">
-                <Setter Property="Margin"
-                        Value="0,0,10,0" />
-            </Style>
-        </StackPanel.Styles>
+        <CheckBox IsChecked="{Binding IsSendAtSubscribe, Mode=TwoWay}"
+                  Classes="radio-button"
+                  Content="Send at subscribe (0)" />
 
-        <RadioButton IsChecked="{Binding IsSendAtSubscribe, Mode=TwoWay}"
-                     GroupName="RetainHandling"
-                     Content="Send at subscribe (0)" />
+        <CheckBox Margin="10,0"
+                  IsChecked="{Binding IsSendAtSubscribeIfNewSubscriptionOnly, Mode=TwoWay}"
+                  Classes="radio-button"
+                  Content="Send at subscribe if new subscription only (1)" />
 
-        <RadioButton IsChecked="{Binding IsSendAtSubscribeIfNewSubscriptionOnly, Mode=TwoWay}"
-                     GroupName="RetainHandling"
-                     Content="Send at subscribe if new subscription only (1)" />
-
-        <RadioButton GroupName="RetainHandling"
-                     IsChecked="{Binding IsDoNotSendOnSubscribe, Mode=TwoWay}"
-                     Content="Do not send on subscribe (2)" />
+        <CheckBox Classes="radio-button"
+                  IsChecked="{Binding IsDoNotSendOnSubscribe, Mode=TwoWay}"
+                  Content="Do not send on subscribe (2)" />
     </StackPanel>
 </UserControl>
diff --git a/Source/Controls/RetainHandling/RetainHandlingSelectorViewModel.cs b/Source/Controls/RetainHandling/RetainHandlingSelectorViewModel.cs
@@ -1,54 +1,53 @@
 using System;
 using MQTTnet.Protocol;
 using MQTTnetApp.Common;
-using ReactiveUI;
 
 namespace MQTTnetApp.Controls;
 
-public sealed class RetainHandlingSelectorViewModel : BaseViewModel
+public sealed class RetainHandlingSelectorViewModel : BaseSingleSelectionViewModel
 {
-    bool _doNotSendOnSubscribe;
-    bool _isSendAtSubscribe;
-    bool _sendAtSubscribeIfNewSubscriptionOnly;
+    const int DoNotSendOnSubscribeIndex = 0;
+    const int SendAtSubscribeIndex = 1;
+    const int SendAtSubscribeIfNewSubscriptionOnly = 2;
 
-    public RetainHandlingSelectorViewModel()
+    public RetainHandlingSelectorViewModel() : base(3)
     {
         Value = MqttRetainHandling.SendAtSubscribe;
     }
 
     public bool IsDoNotSendOnSubscribe
     {
-        get => _doNotSendOnSubscribe;
-        set => this.RaiseAndSetIfChanged(ref _doNotSendOnSubscribe, value);
+        get => GetState(DoNotSendOnSubscribeIndex);
+        set => UpdateStates(DoNotSendOnSubscribeIndex, value);
     }
 
     public bool IsSendAtSubscribe
     {
-        get => _isSendAtSubscribe;
-        set => this.RaiseAndSetIfChanged(ref _isSendAtSubscribe, value);
+        get => GetState(SendAtSubscribeIndex);
+        set => UpdateStates(SendAtSubscribeIndex, value);
     }
 
     public bool IsSendAtSubscribeIfNewSubscriptionOnly
     {
-        get => _sendAtSubscribeIfNewSubscriptionOnly;
-        set => this.RaiseAndSetIfChanged(ref _sendAtSubscribeIfNewSubscriptionOnly, value);
+        get => GetState(SendAtSubscribeIfNewSubscriptionOnly);
+        set => UpdateStates(SendAtSubscribeIfNewSubscriptionOnly, value);
     }
 
     public MqttRetainHandling Value
     {
         get
         {
-            if (_isSendAtSubscribe)
+            if (IsSendAtSubscribe)
             {
                 return MqttRetainHandling.SendAtSubscribe;
             }
 
-            if (_sendAtSubscribeIfNewSubscriptionOnly)
+            if (IsSendAtSubscribeIfNewSubscriptionOnly)
             {
                 return MqttRetainHandling.SendAtSubscribeIfNewSubscriptionOnly;
             }
 
-            if (_doNotSendOnSubscribe)
+            if (IsDoNotSendOnSubscribe)
             {
                 return MqttRetainHandling.DoNotSendOnSubscribe;
             }
@@ -58,9 +57,9 @@ public MqttRetainHandling Value
 
         set
         {
-            _isSendAtSubscribe = value == MqttRetainHandling.SendAtSubscribe;
-            _doNotSendOnSubscribe = value == MqttRetainHandling.DoNotSendOnSubscribe;
-            _sendAtSubscribeIfNewSubscriptionOnly = value == MqttRetainHandling.SendAtSubscribeIfNewSubscriptionOnly;
+            IsSendAtSubscribe = value == MqttRetainHandling.SendAtSubscribe;
+            IsDoNotSendOnSubscribe = value == MqttRetainHandling.DoNotSendOnSubscribe;
+            IsSendAtSubscribeIfNewSubscriptionOnly = value == MqttRetainHandling.SendAtSubscribeIfNewSubscriptionOnly;
         }
     }
 }
diff --git a/Source/Pages/Publish/PayloadFormatIndicatorSelectorViewModel.cs b/Source/Pages/Publish/PayloadFormatIndicatorSelectorViewModel.cs
@@ -1,25 +1,29 @@
 ﻿using System;
 using MQTTnet.Protocol;
 using MQTTnetApp.Common;
-using ReactiveUI;
 
 namespace MQTTnetApp.Pages.Publish;
 
-public sealed class PayloadFormatIndicatorSelectorViewModel : BaseViewModel
+public sealed class PayloadFormatIndicatorSelectorViewModel : BaseSingleSelectionViewModel
 {
-    bool _isCharacterData;
-    bool _isUnspecified = true;
+    const int CharacterDataIndex = 0;
+    const int UnspecifiedIndex = 1;
+
+    public PayloadFormatIndicatorSelectorViewModel() : base(2)
+    {
+        IsUnspecified = true;
+    }
 
     public bool IsCharacterData
     {
-        get => _isCharacterData;
-        set => this.RaiseAndSetIfChanged(ref _isCharacterData, value);
+        get => GetState(CharacterDataIndex);
+        set => UpdateStates(CharacterDataIndex, value);
     }
 
     public bool IsUnspecified
     {
-        get => _isUnspecified;
-        set => this.RaiseAndSetIfChanged(ref _isUnspecified, value);
+        get => GetState(UnspecifiedIndex);
+        set => UpdateStates(UnspecifiedIndex, value);
     }
 
     public MqttPayloadFormatIndicator Value
diff --git a/Source/Pages/Publish/PublishItemView.axaml b/Source/Pages/Publish/PublishItemView.axaml
@@ -71,16 +71,14 @@
                                     Classes="value"
                                     Grid.Column="1"
                                     Orientation="Horizontal">
-                            <StackPanel.Styles>
-                                <Style Selector="RadioButton">
-                                    <Setter Property="Margin"
-                                            Value="0,0,10,0" />
-                                </Style>
-                            </StackPanel.Styles>
-                            <RadioButton Content="Unspecified"
-                                         IsChecked="{Binding PayloadFormatIndicator.IsUnspecified}" />
-                            <RadioButton Content="Character data"
-                                         IsChecked="{Binding PayloadFormatIndicator.IsCharacterData}" />
+
+                            <CheckBox Classes="radio-button"
+                                      Content="Unspecified"
+                                      IsChecked="{Binding PayloadFormatIndicator.IsUnspecified}" />
+                            <CheckBox Classes="radio-button"
+                                      Margin="10,0,0,0"
+                                      Content="Character data"
+                                      IsChecked="{Binding PayloadFormatIndicator.IsCharacterData}" />
                         </StackPanel>
 
                         <!-- The payload -->
@@ -108,8 +106,8 @@
                                    Grid.Row="0"
                                    Content="Quality of service (QoS) level" />
                             <controls:QualityOfServiceLevelSelectorView Grid.Column="1"
-                                              Grid.Row="0"
-                                              DataContext="{Binding QualityOfServiceLevel}" />
+                                                                        Grid.Row="0"
+                                                                        DataContext="{Binding QualityOfServiceLevel}" />
                             <!-- Retain -->
                             <Label Classes="caption"
                                    Grid.Column="0"
diff --git a/Source/Styles/CheckBox.axaml b/Source/Styles/CheckBox.axaml
@@ -16,4 +16,10 @@
                 Value="26" />
     </Style>
 
+    <!-- This is a fake radio button because the radio button from avalonia has binding bugs! -->
+    <Style Selector="CheckBox.radio-button">
+        <Setter Property="CornerRadius"
+                Value="50" />
+    </Style>
+    
 </Styles>
diff --git a/Source/Styles/RadioButton.axaml b/Source/Styles/RadioButton.axaml
@@ -0,0 +1,14 @@
+﻿<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <Border Padding="20">
+            <!-- Add Controls for Previewer Here -->
+        </Border>
+    </Design.PreviewWith>
+    
+    <Style Selector="RadioButton">
+        <Setter Property="MinHeight"
+                Value="26" />
+    </Style>
+    
+</Styles>

Original file line number	Diff line number	Diff line change
`@@ -1,37 +1,32 @@`
`1`	`1`	`using System;`
`2`	`2`	`using MQTTnet.Protocol;`
`3`	`3`	`using MQTTnetApp.Common;`
`4`		`-using ReactiveUI;`
`5`	`4`
`6`	`5`	`namespace MQTTnetApp.Controls;`
`7`	`6`
`8`		`-public sealed class QualityOfServiceLevelSelectorViewModel : BaseViewModel`
	`7`	`+public sealed class QualityOfServiceLevelSelectorViewModel : BaseSingleSelectionViewModel`
`9`	`8`	`{`
`10`		`- bool _isLevel0 = true;`
`11`		`- bool _isLevel1;`
`12`		`- bool _isLevel2;`
`13`		`-`
`14`		`- public QualityOfServiceLevelSelectorViewModel()`
	`9`	`+ public QualityOfServiceLevelSelectorViewModel() : base(3)`
`15`	`10`	`{`
`16`	`11`	`Value = MqttQualityOfServiceLevel.AtMostOnce;`
`17`	`12`	`}`
`18`	`13`
`19`	`14`	`public bool IsLevel0`
`20`	`15`	`{`
`21`		`- get => _isLevel0;`
`22`		`- set => this.RaiseAndSetIfChanged(ref _isLevel0, value);`
	`16`	`+ get => GetState(0);`
	`17`	`+ set => UpdateStates(0, value);`
`23`	`18`	`}`
`24`	`19`
`25`	`20`	`public bool IsLevel1`
`26`	`21`	`{`
`27`		`- get => _isLevel1;`
`28`		`- set => this.RaiseAndSetIfChanged(ref _isLevel1, value);`
	`22`	`+ get => GetState(1);`
	`23`	`+ set => UpdateStates(1, value);`
`29`	`24`	`}`
`30`	`25`
`31`	`26`	`public bool IsLevel2`
`32`	`27`	`{`
`33`		`- get => _isLevel2;`
`34`		`- set => this.RaiseAndSetIfChanged(ref _isLevel2, value);`
	`28`	`+ get => GetState(2);`
	`29`	`+ set => UpdateStates(2, value);`
`35`	`30`	`}`
`36`	`31`
`37`	`32`	`public MqttQualityOfServiceLevel Value`
Original file line number	Diff line number	Diff line change
`@@ -1,54 +1,53 @@`
`1`	`1`	`using System;`
`2`	`2`	`using MQTTnet.Protocol;`
`3`	`3`	`using MQTTnetApp.Common;`
`4`		`-using ReactiveUI;`
`5`	`4`
`6`	`5`	`namespace MQTTnetApp.Controls;`
`7`	`6`
`8`		`-public sealed class RetainHandlingSelectorViewModel : BaseViewModel`
	`7`	`+public sealed class RetainHandlingSelectorViewModel : BaseSingleSelectionViewModel`
`9`	`8`	`{`
`10`		`- bool _doNotSendOnSubscribe;`
`11`		`- bool _isSendAtSubscribe;`
`12`		`- bool _sendAtSubscribeIfNewSubscriptionOnly;`
	`9`	`+ const int DoNotSendOnSubscribeIndex = 0;`
	`10`	`+ const int SendAtSubscribeIndex = 1;`
	`11`	`+ const int SendAtSubscribeIfNewSubscriptionOnly = 2;`
`13`	`12`
`14`		`- public RetainHandlingSelectorViewModel()`
	`13`	`+ public RetainHandlingSelectorViewModel() : base(3)`
`15`	`14`	`{`
`16`	`15`	`Value = MqttRetainHandling.SendAtSubscribe;`
`17`	`16`	`}`
`18`	`17`
`19`	`18`	`public bool IsDoNotSendOnSubscribe`
`20`	`19`	`{`
`21`		`- get => _doNotSendOnSubscribe;`
`22`		`- set => this.RaiseAndSetIfChanged(ref _doNotSendOnSubscribe, value);`
	`20`	`+ get => GetState(DoNotSendOnSubscribeIndex);`
	`21`	`+ set => UpdateStates(DoNotSendOnSubscribeIndex, value);`
`23`	`22`	`}`
`24`	`23`
`25`	`24`	`public bool IsSendAtSubscribe`
`26`	`25`	`{`
`27`		`- get => _isSendAtSubscribe;`
`28`		`- set => this.RaiseAndSetIfChanged(ref _isSendAtSubscribe, value);`
	`26`	`+ get => GetState(SendAtSubscribeIndex);`
	`27`	`+ set => UpdateStates(SendAtSubscribeIndex, value);`
`29`	`28`	`}`
`30`	`29`
`31`	`30`	`public bool IsSendAtSubscribeIfNewSubscriptionOnly`
`32`	`31`	`{`
`33`		`- get => _sendAtSubscribeIfNewSubscriptionOnly;`
`34`		`- set => this.RaiseAndSetIfChanged(ref _sendAtSubscribeIfNewSubscriptionOnly, value);`
	`32`	`+ get => GetState(SendAtSubscribeIfNewSubscriptionOnly);`
	`33`	`+ set => UpdateStates(SendAtSubscribeIfNewSubscriptionOnly, value);`
`35`	`34`	`}`
`36`	`35`
`37`	`36`	`public MqttRetainHandling Value`
`38`	`37`	`{`
`39`	`38`	`get`
`40`	`39`	`{`
`41`		`- if (_isSendAtSubscribe)`
	`40`	`+ if (IsSendAtSubscribe)`
`42`	`41`	`{`
`43`	`42`	`return MqttRetainHandling.SendAtSubscribe;`
`44`	`43`	`}`
`45`	`44`
`46`		`- if (_sendAtSubscribeIfNewSubscriptionOnly)`
	`45`	`+ if (IsSendAtSubscribeIfNewSubscriptionOnly)`
`47`	`46`	`{`
`48`	`47`	`return MqttRetainHandling.SendAtSubscribeIfNewSubscriptionOnly;`
`49`	`48`	`}`
`50`	`49`
`51`		`- if (_doNotSendOnSubscribe)`
	`50`	`+ if (IsDoNotSendOnSubscribe)`
`52`	`51`	`{`
`53`	`52`	`return MqttRetainHandling.DoNotSendOnSubscribe;`
`54`	`53`	`}`
`@@ -58,9 +57,9 @@ public MqttRetainHandling Value`
`58`	`57`
`59`	`58`	`set`
`60`	`59`	`{`
`61`		`- _isSendAtSubscribe = value == MqttRetainHandling.SendAtSubscribe;`
`62`		`- _doNotSendOnSubscribe = value == MqttRetainHandling.DoNotSendOnSubscribe;`
`63`		`- _sendAtSubscribeIfNewSubscriptionOnly = value == MqttRetainHandling.SendAtSubscribeIfNewSubscriptionOnly;`
	`60`	`+ IsSendAtSubscribe = value == MqttRetainHandling.SendAtSubscribe;`
	`61`	`+ IsDoNotSendOnSubscribe = value == MqttRetainHandling.DoNotSendOnSubscribe;`
	`62`	`+ IsSendAtSubscribeIfNewSubscriptionOnly = value == MqttRetainHandling.SendAtSubscribeIfNewSubscriptionOnly;`
`64`	`63`	`}`
`65`	`64`	`}`
`66`	`65`	`}`