Fix styles as Styles (not ResourceDictionary); replace DataTriggers with width converters; add IsZeroConverter; remove unsupported properties; fix ancestor command bindings; bind SplitView props directly.

2025-08-27 03:23:40 -05:00 · 2025-08-27 03:23:40 -05:00 · 1667fc8b3d
commit 1667fc8b3d
parent c624127bf9
9 changed files with 146 additions and 101 deletions
--- a/src/AdvancedCalculator.Android/Styles/Android.axaml
+++ b/src/AdvancedCalculator.Android/Styles/Android.axaml
@ -1,10 +1,12 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-  <!-- Android overrides: larger, touch-first -->
-  <x:Double x:Key="FontSizeBase">16</x:Double>
-  <x:Double x:Key="FontSizeLarge">18</x:Double>
-  <x:Double x:Key="IconSizeM">24</x:Double>
-  <x:Double x:Key="LineHeightBase">1.35</x:Double>
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Styles.Resources>
+    <!-- Android overrides: larger, touch-first -->
+    <x:Double x:Key="FontSizeBase">16</x:Double>
+    <x:Double x:Key="FontSizeLarge">18</x:Double>
+    <x:Double x:Key="IconSizeM">24</x:Double>
+    <x:Double x:Key="LineHeightBase">1.35</x:Double>
+  </Styles.Resources>

  <!-- Thin overlay-like scrollbars -->
  <Style Selector="ScrollBar:vertical">
@ -13,5 +15,4 @@
  <Style Selector="ScrollBar:horizontal">
    <Setter Property="Height" Value="8"/>
  </Style>
-</ResourceDictionary>
-
+</Styles>
--- a/src/AdvancedCalculator.Browser/Styles/Browser.axaml
+++ b/src/AdvancedCalculator.Browser/Styles/Browser.axaml
@ -1,9 +1,11 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-  <!-- Browser overrides: middle ground -->
-  <x:Double x:Key="FontSizeBase">15</x:Double>
-  <x:Double x:Key="IconSizeM">22</x:Double>
-  <x:Double x:Key="LineHeightBase">1.3</x:Double>
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Styles.Resources>
+    <!-- Browser overrides: middle ground -->
+    <x:Double x:Key="FontSizeBase">15</x:Double>
+    <x:Double x:Key="IconSizeM">22</x:Double>
+    <x:Double x:Key="LineHeightBase">1.3</x:Double>
+  </Styles.Resources>

  <!-- Slightly thinner scrollbars on web -->
  <Style Selector="ScrollBar:vertical">
@ -12,5 +14,4 @@
  <Style Selector="ScrollBar:horizontal">
    <Setter Property="Height" Value="8"/>
  </Style>
-</ResourceDictionary>
-
+</Styles>
--- a/src/AdvancedCalculator.Desktop/Styles/Desktop.axaml
+++ b/src/AdvancedCalculator.Desktop/Styles/Desktop.axaml
@ -1,9 +1,11 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-  <!-- Desktop overrides: slightly denser -->
-  <x:Double x:Key="FontSizeBase">13</x:Double>
-  <x:Double x:Key="LineHeightBase">1.2</x:Double>
-  <x:Double x:Key="IconSizeM">20</x:Double>
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Styles.Resources>
+    <!-- Desktop overrides: slightly denser -->
+    <x:Double x:Key="FontSizeBase">13</x:Double>
+    <x:Double x:Key="LineHeightBase">1.2</x:Double>
+    <x:Double x:Key="IconSizeM">20</x:Double>
+  </Styles.Resources>

  <!-- Scrollbars a bit thicker on desktop -->
  <Style Selector="ScrollBar:vertical">
@ -12,5 +14,4 @@
  <Style Selector="ScrollBar:horizontal">
    <Setter Property="Height" Value="12"/>
  </Style>
-</ResourceDictionary>
-
+</Styles>
--- a/src/AdvancedCalculator/Converters/IsZeroConverter.cs
+++ b/src/AdvancedCalculator/Converters/IsZeroConverter.cs
@ -0,0 +1,25 @@
+using System;
+using System.Globalization;
+using Avalonia.Data.Converters;
+
+namespace AdvancedCalculator.Converters;
+
+public class IsZeroConverter : IValueConverter
+{
+    public static readonly IsZeroConverter Instance = new();
+
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo? culture)
+    {
+        if (value is int i)
+            return i == 0;
+        if (value is long l)
+            return l == 0L;
+        if (value is double d)
+            return Math.Abs(d) < double.Epsilon;
+        return false;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo? culture)
+        => throw new NotSupportedException();
+}
+
--- a/src/AdvancedCalculator/Converters/WidthToPaneOpenConverter.cs
+++ b/src/AdvancedCalculator/Converters/WidthToPaneOpenConverter.cs
@ -0,0 +1,29 @@
+using System;
+using System.Globalization;
+using Avalonia.Data.Converters;
+
+namespace AdvancedCalculator.Converters;
+
+public class WidthToPaneOpenConverter : IValueConverter
+{
+    public static readonly WidthToPaneOpenConverter Instance = new();
+
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo? culture)
+    {
+        if (value is double width)
+        {
+            double threshold = 640;
+            if (parameter is double p)
+                threshold = p;
+            else if (parameter is string s && double.TryParse(s, NumberStyles.Number, CultureInfo.InvariantCulture, out var parsed))
+                threshold = parsed;
+
+            return width >= threshold;
+        }
+        return true;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo? culture)
+        => throw new NotSupportedException();
+}
+
--- a/src/AdvancedCalculator/Converters/WidthToSplitViewModeConverter.cs
+++ b/src/AdvancedCalculator/Converters/WidthToSplitViewModeConverter.cs
@ -0,0 +1,30 @@
+using System;
+using System.Globalization;
+using Avalonia.Controls;
+using Avalonia.Data.Converters;
+
+namespace AdvancedCalculator.Converters;
+
+public class WidthToSplitViewModeConverter : IValueConverter
+{
+    public static readonly WidthToSplitViewModeConverter Instance = new();
+
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo? culture)
+    {
+        if (value is double width)
+        {
+            double threshold = 640;
+            if (parameter is double p)
+                threshold = p;
+            else if (parameter is string s && double.TryParse(s, NumberStyles.Number, CultureInfo.InvariantCulture, out var parsed))
+                threshold = parsed;
+
+            return width < threshold ? SplitViewDisplayMode.Overlay : SplitViewDisplayMode.Inline;
+        }
+        return SplitViewDisplayMode.Inline;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo? culture)
+        => throw new NotSupportedException();
+}
+
--- a/src/AdvancedCalculator/Styles/Scroll.axaml
+++ b/src/AdvancedCalculator/Styles/Scroll.axaml
@ -1,15 +1,11 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <!-- Shared scrolling defaults -->
  <Style Selector="ListBox">
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
  </Style>

-  <Style Selector="ScrollViewer">
-    <Setter Property="CanScrollHorizontally" Value="False"/>
-  </Style>
-
  <!-- Thin-ish scrollbars by default; platform overrides will adjust -->
  <Style Selector="ScrollBar:vertical">
    <Setter Property="Width" Value="10"/>
@ -17,5 +13,4 @@
  <Style Selector="ScrollBar:horizontal">
    <Setter Property="Height" Value="10"/>
  </Style>
-</ResourceDictionary>
-
+</Styles>
--- a/src/AdvancedCalculator/Styles/Typography.axaml
+++ b/src/AdvancedCalculator/Styles/Typography.axaml
@ -1,18 +1,20 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-  <!-- Shared typography resources -->
-  <x:Double x:Key="FontSizeSmall">12</x:Double>
-  <x:Double x:Key="FontSizeBase">14</x:Double>
-  <x:Double x:Key="FontSizeLarge">16</x:Double>
-  <x:Double x:Key="FontSizeXL">20</x:Double>
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Styles.Resources>
+    <!-- Shared typography resources -->
+    <x:Double x:Key="FontSizeSmall">12</x:Double>
+    <x:Double x:Key="FontSizeBase">14</x:Double>
+    <x:Double x:Key="FontSizeLarge">16</x:Double>
+    <x:Double x:Key="FontSizeXL">20</x:Double>

-  <x:Double x:Key="IconSizeS">18</x:Double>
-  <x:Double x:Key="IconSizeM">22</x:Double>
-  <x:Double x:Key="IconSizeL">26</x:Double>
+    <x:Double x:Key="IconSizeS">18</x:Double>
+    <x:Double x:Key="IconSizeM">22</x:Double>
+    <x:Double x:Key="IconSizeL">26</x:Double>

-  <x:Double x:Key="LineHeightTight">1.1</x:Double>
-  <x:Double x:Key="LineHeightBase">1.25</x:Double>
-  <x:Double x:Key="LineHeightRelaxed">1.4</x:Double>
+    <x:Double x:Key="LineHeightTight">1.1</x:Double>
+    <x:Double x:Key="LineHeightBase">1.25</x:Double>
+    <x:Double x:Key="LineHeightRelaxed">1.4</x:Double>
+  </Styles.Resources>

  <!-- Defaults for text -->
  <Style Selector="TextBlock">
@ -26,5 +28,4 @@
    <Setter Property="TextElement.FontSize" Value="{DynamicResource FontSizeSmall}"/>
    <Setter Property="Opacity" Value="0.85"/>
  </Style>
-</ResourceDictionary>
-
+</Styles>
--- a/src/AdvancedCalculator/Views/MainView.axaml
+++ b/src/AdvancedCalculator/Views/MainView.axaml
@ -11,34 +11,16 @@
  <UserControl.Resources>
    <conv:BoolToGridLengthConverter x:Key="BoolToGridLengthConverter" />
    <conv:WidthToBooleanConverter x:Key="WidthToBooleanConverter" />
+    <conv:IsZeroConverter x:Key="IsZeroConverter" />
+    <conv:WidthToSplitViewModeConverter x:Key="WidthToSplitViewModeConverter" />
+    <conv:WidthToPaneOpenConverter x:Key="WidthToPaneOpenConverter" />
  </UserControl.Resources>
  <!-- Replace columns with a responsive SplitView -->
  <SplitView x:Name="RootSplit"
             OpenPaneLength="320"
-             CompactPaneLength="0">
-    <!-- Responsive behavior: set DisplayMode and IsPaneOpen based on width -->
-    <SplitView.Styles>
-      <Style Selector="SplitView#RootSplit">
-        <Style.Triggers>
-          <!-- Narrow: Overlay mode, pane closed by default -->
-          <DataTrigger Value="True"
-                       Binding="{Binding $parent[Window].Bounds.Width,
-                                         Converter={StaticResource WidthToBooleanConverter},
-                                         ConverterParameter=640}">
-            <Setter Property="DisplayMode" Value="Overlay" />
-            <Setter Property="IsPaneOpen" Value="False" />
-          </DataTrigger>
-          <!-- Wide: Inline mode, pane open -->
-          <DataTrigger Value="False"
-                       Binding="{Binding $parent[Window].Bounds.Width,
-                                         Converter={StaticResource WidthToBooleanConverter},
-                                         ConverterParameter=640}">
-            <Setter Property="DisplayMode" Value="Inline" />
-            <Setter Property="IsPaneOpen" Value="True" />
-          </DataTrigger>
-        </Style.Triggers>
-      </Style>
-    </SplitView.Styles>
+             CompactPaneLength="0"
+             DisplayMode="{Binding $parent[Window].Bounds.Width, Converter={StaticResource WidthToSplitViewModeConverter}, ConverterParameter=640}"
+             IsPaneOpen="{Binding $parent[Window].Bounds.Width, Converter={StaticResource WidthToPaneOpenConverter}, ConverterParameter=640}">

    <!-- Left pane: Variables + Functions -->
    <SplitView.Pane>
@ -50,11 +32,11 @@

        <!-- Variables list with empty-state hint overlay -->
        <Grid Grid.Row="0">
-          <ListBox ItemsSource="{Binding Variables}" SelectedIndex="-1" HorizontalContentAlignment="Stretch"
+          <ListBox ItemsSource="{Binding Variables}" SelectedIndex="-1"
                   AutomationProperties.Name="Variables list">
            <ListBox.ItemTemplate>
              <DataTemplate x:DataType="m:VariableItem">
-                <Button Command="{Binding DataContext.InsertVariableCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                <Button Command="{Binding $parent[UserControl].DataContext.InsertVariableCommand}"
                        CommandParameter="{Binding VariableName}"
                        Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44"
                        AutomationProperties.Name="Insert variable">
@ -72,29 +54,19 @@
            </ListBox.ItemTemplate>
          </ListBox>
          <TextBlock Text="No variables yet. Define with: x = 5"
-                     IsVisible="False"
+                     IsVisible="{Binding Variables.Count, Converter={StaticResource IsZeroConverter}}"
                     IsHitTestVisible="False"
                     Opacity="0.6"
-                     HorizontalAlignment="Center" VerticalAlignment="Center">
-            <TextBlock.Styles>
-              <Style Selector="TextBlock">
-                <Style.Triggers>
-                  <DataTrigger Binding="{Binding Variables.Count}" Value="0">
-                    <Setter Property="IsVisible" Value="True" />
-                  </DataTrigger>
-                </Style.Triggers>
-              </Style>
-            </TextBlock.Styles>
-          </TextBlock>
+                     HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Grid>

        <!-- Function definitions -->
-        <ListBox Grid.Row="1" BorderThickness="0" HorizontalContentAlignment="Stretch"
+        <ListBox Grid.Row="1" BorderThickness="0"
                 ItemsSource="{x:Static m:FunctionDefinitionItem.DefinedFunctions}"
                 AutomationProperties.Name="Functions list">
          <ListBox.ItemTemplate>
            <DataTemplate x:DataType="m:FunctionDefinitionItem">
-              <Button Command="{Binding DataContext.InsertFunctionCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+              <Button Command="{Binding $parent[UserControl].DataContext.InsertFunctionCommand}"
                      CommandParameter="{Binding FunctionName}"
                      Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44"
                      AutomationProperties.Name="Insert function">
@ -143,24 +115,14 @@
            </ListBox.ItemTemplate>
          </ListBox>
          <TextBlock Text="No history yet. Enter an expression and Evaluate."
-                     IsVisible="False"
+                     IsVisible="{Binding History.Count, Converter={StaticResource IsZeroConverter}}"
                     IsHitTestVisible="False"
                     Opacity="0.6"
-                     HorizontalAlignment="Center" VerticalAlignment="Center">
-            <TextBlock.Styles>
-              <Style Selector="TextBlock">
-                <Style.Triggers>
-                  <DataTrigger Binding="{Binding History.Count}" Value="0">
-                    <Setter Property="IsVisible" Value="True" />
-                  </DataTrigger>
-                </Style.Triggers>
-              </Style>
-            </TextBlock.Styles>
-          </TextBlock>
+                     HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Grid>

        <!-- Input Row -->
-        <Grid Grid.Row="1" ColumnDefinitions="Auto,Auto,*,Auto" Margin="4" ColumnSpacing="6">
+        <Grid Grid.Row="1" ColumnDefinitions="Auto,Auto,*,Auto" Margin="4">
          <!-- Pane toggle: visible on narrow only -->
          <ToggleButton Margin="0,0,6,0"
                        IsVisible="{Binding $parent[Window].Bounds.Width,