UI: Replace two-column Grid with SplitView; add narrow pane toggle; add WidthToBooleanConverter and width-based DisplayMode triggers for a responsive layout across Web, Desktop, Android.
This commit is contained in:
Codex CLI
parent
f8c1ef0e96
commit
0b06265117
2 changed files with 153 additions and 83 deletions
31
src/AdvancedCalculator/Converters/WidthToBooleanConverter.cs
Normal file
31
src/AdvancedCalculator/Converters/WidthToBooleanConverter.cs
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
using System;
|
||||
using System.Globalization;
|
||||
using Avalonia.Data.Converters;
|
||||
|
||||
namespace AdvancedCalculator.Converters;
|
||||
|
||||
// Returns true if width (double) is less than the provided threshold (parameter),
|
||||
// otherwise false. Default threshold is 640 when parameter is null or invalid.
|
||||
public class WidthToBooleanConverter : IValueConverter
|
||||
{
|
||||
public static readonly WidthToBooleanConverter 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 false;
|
||||
}
|
||||
|
||||
public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo? culture)
|
||||
=> throw new NotSupportedException();
|
||||
}
|
||||
|
||||
|
|
@ -10,92 +10,131 @@
|
|||
x:DataType="vm:MainViewModel">
|
||||
<UserControl.Resources>
|
||||
<conv:BoolToGridLengthConverter x:Key="BoolToGridLengthConverter" />
|
||||
<conv:WidthToBooleanConverter x:Key="WidthToBooleanConverter" />
|
||||
</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>
|
||||
|
||||
<Grid ColumnDefinitions="*,3*">
|
||||
<!-- Left column: Variables + Functions -->
|
||||
<Grid Grid.Column="0">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="*" />
|
||||
<RowDefinition Height="{Binding IsFunctionsPanelOpen, Converter={StaticResource BoolToGridLengthConverter}}" />
|
||||
</Grid.RowDefinitions>
|
||||
<!-- Left pane: Variables + Functions -->
|
||||
<SplitView.Pane>
|
||||
<Grid>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="*" />
|
||||
<RowDefinition Height="{Binding IsFunctionsPanelOpen, Converter={StaticResource BoolToGridLengthConverter}}" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- Variables list -->
|
||||
<ListBox Grid.Row="0" ItemsSource="{Binding Variables}" SelectedIndex="-1">
|
||||
<ListBox.ItemTemplate>
|
||||
<DataTemplate x:DataType="m:VariableItem">
|
||||
<Grid ColumnDefinitions="Auto,*,Auto" Margin="4,2">
|
||||
<TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}"
|
||||
FontSize="22" Text="{Binding Icon}" VerticalAlignment="Center" Margin="0,0,8,0" />
|
||||
<TextBlock Grid.Column="1" Text="{Binding VariableName}" FontWeight="Bold" VerticalAlignment="Center" />
|
||||
<StackPanel Grid.Column="2" Spacing="2">
|
||||
<TextBlock Text="{Binding Value}" />
|
||||
<TextBlock IsVisible="{Binding IsExpression}" Text="{Binding ExpressionComputation}" FontStyle="Italic" />
|
||||
<!-- Variables list -->
|
||||
<ListBox Grid.Row="0" ItemsSource="{Binding Variables}" SelectedIndex="-1">
|
||||
<ListBox.ItemTemplate>
|
||||
<DataTemplate x:DataType="m:VariableItem">
|
||||
<Grid ColumnDefinitions="Auto,*,Auto" Margin="4,2">
|
||||
<TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}"
|
||||
FontSize="22" Text="{Binding Icon}" VerticalAlignment="Center" Margin="0,0,8,0" />
|
||||
<TextBlock Grid.Column="1" Text="{Binding VariableName}" FontWeight="Bold" VerticalAlignment="Center" />
|
||||
<StackPanel Grid.Column="2" Spacing="2">
|
||||
<TextBlock Text="{Binding Value}" />
|
||||
<TextBlock IsVisible="{Binding IsExpression}" Text="{Binding ExpressionComputation}" FontStyle="Italic" />
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</DataTemplate>
|
||||
</ListBox.ItemTemplate>
|
||||
</ListBox>
|
||||
|
||||
<!-- Function definitions -->
|
||||
<ListBox Grid.Row="1" BorderThickness="0"
|
||||
ItemsSource="{x:Static m:FunctionDefinitionItem.DefinedFunctions}">
|
||||
<ListBox.ItemTemplate>
|
||||
<DataTemplate x:DataType="m:FunctionDefinitionItem">
|
||||
<StackPanel Spacing="2" Margin="4,6">
|
||||
<StackPanel Orientation="Horizontal" Spacing="6">
|
||||
<TextBlock FontFamily="{StaticResource MDI}" Text="{Binding Icon}" />
|
||||
<TextBlock Text="{Binding FunctionName}" FontWeight="Bold" />
|
||||
</StackPanel>
|
||||
<TextBlock Text="{Binding FunctionDescription}" FontStyle="Italic" TextWrapping="Wrap" />
|
||||
<ItemsControl ItemsSource="{Binding FunctionArguments}">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate>
|
||||
<StackPanel>
|
||||
<TextBlock Text="{Binding Key}" />
|
||||
<TextBlock Text="{Binding Value}" FontStyle="Italic" Margin="8,0,0,0" />
|
||||
</StackPanel>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</DataTemplate>
|
||||
</ListBox.ItemTemplate>
|
||||
</ListBox>
|
||||
|
||||
<!-- Function definitions -->
|
||||
<ListBox Grid.Row="1" BorderThickness="0"
|
||||
ItemsSource="{x:Static m:FunctionDefinitionItem.DefinedFunctions}">
|
||||
<ListBox.ItemTemplate>
|
||||
<DataTemplate x:DataType="m:FunctionDefinitionItem">
|
||||
<StackPanel Spacing="2" Margin="4,6">
|
||||
<StackPanel Orientation="Horizontal" Spacing="6">
|
||||
<TextBlock FontFamily="{StaticResource MDI}" Text="{Binding Icon}" />
|
||||
<TextBlock Text="{Binding FunctionName}" FontWeight="Bold" />
|
||||
</StackPanel>
|
||||
<TextBlock Text="{Binding FunctionDescription}" FontStyle="Italic" TextWrapping="Wrap" />
|
||||
<ItemsControl ItemsSource="{Binding FunctionArguments}">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate>
|
||||
<StackPanel>
|
||||
<TextBlock Text="{Binding Key}" />
|
||||
<TextBlock Text="{Binding Value}" FontStyle="Italic" Margin="8,0,0,0" />
|
||||
</StackPanel>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</StackPanel>
|
||||
</DataTemplate>
|
||||
</ListBox.ItemTemplate>
|
||||
</ListBox>
|
||||
</Grid>
|
||||
|
||||
<!-- GridSplitter between columns -->
|
||||
<GridSplitter Grid.Column="0" HorizontalAlignment="Right" Width="5" Background="Transparent" />
|
||||
|
||||
<!-- Right column: History + Input -->
|
||||
<Grid Grid.Column="1" RowDefinitions="*,Auto">
|
||||
<!-- History -->
|
||||
<ListBox Grid.Row="0" ItemsSource="{Binding History}" SelectedIndex="{Binding SelectedHistoryIndex}">
|
||||
<ListBox.ItemTemplate>
|
||||
<DataTemplate x:DataType="m:HistoryItem">
|
||||
<Grid ColumnDefinitions="Auto,*" Margin="4,2">
|
||||
<TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.ArrowRightDropCircle}"
|
||||
FontSize="22" VerticalAlignment="Center" Margin="0,0,8,0" />
|
||||
<StackPanel Grid.Column="1">
|
||||
<TextBlock Text="{Binding Input}" />
|
||||
<TextBlock Text="{Binding Output}" FontWeight="Bold" />
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</DataTemplate>
|
||||
</ListBox.ItemTemplate>
|
||||
</ListBox>
|
||||
|
||||
<!-- Input Row -->
|
||||
<Grid Grid.Row="1" ColumnDefinitions="Auto,*" Margin="4">
|
||||
<Button Command="{Binding ToggleFunctionsCommand}" Margin="0,0,6,0">
|
||||
<TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.Function}" />
|
||||
</Button>
|
||||
<TextBox Grid.Column="1" Text="{Binding InputText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
|
||||
<InputElement.KeyBindings>
|
||||
<KeyBinding Gesture="Enter" Command="{Binding SubmitCommand}" />
|
||||
</InputElement.KeyBindings>
|
||||
</TextBox>
|
||||
</DataTemplate>
|
||||
</ListBox.ItemTemplate>
|
||||
</ListBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</SplitView.Pane>
|
||||
|
||||
<!-- Right content: History + Input -->
|
||||
<SplitView.Content>
|
||||
<Grid RowDefinitions="*,Auto">
|
||||
<!-- History -->
|
||||
<ListBox Grid.Row="0" ItemsSource="{Binding History}" SelectedIndex="{Binding SelectedHistoryIndex}">
|
||||
<ListBox.ItemTemplate>
|
||||
<DataTemplate x:DataType="m:HistoryItem">
|
||||
<Grid ColumnDefinitions="Auto,*" Margin="4,2">
|
||||
<TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.ArrowRightDropCircle}"
|
||||
FontSize="22" VerticalAlignment="Center" Margin="0,0,8,0" />
|
||||
<StackPanel Grid.Column="1">
|
||||
<TextBlock Text="{Binding Input}" />
|
||||
<TextBlock Text="{Binding Output}" FontWeight="Bold" />
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</DataTemplate>
|
||||
</ListBox.ItemTemplate>
|
||||
</ListBox>
|
||||
|
||||
<!-- Input Row -->
|
||||
<Grid Grid.Row="1" ColumnDefinitions="Auto,Auto,*" Margin="4">
|
||||
<!-- Pane toggle: visible on narrow only -->
|
||||
<ToggleButton Margin="0,0,6,0"
|
||||
IsVisible="{Binding $parent[Window].Bounds.Width,
|
||||
Converter={StaticResource WidthToBooleanConverter},
|
||||
ConverterParameter=640}"
|
||||
IsChecked="{Binding #RootSplit.IsPaneOpen}">
|
||||
<TextBlock Text="≡" FontSize="18"/>
|
||||
</ToggleButton>
|
||||
|
||||
<!-- Toggle functions panel inside the pane -->
|
||||
<Button Grid.Column="1" Command="{Binding ToggleFunctionsCommand}" Margin="0,0,6,0">
|
||||
<TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.Function}" />
|
||||
</Button>
|
||||
|
||||
<TextBox Grid.Column="2" Text="{Binding InputText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
|
||||
<InputElement.KeyBindings>
|
||||
<KeyBinding Gesture="Enter" Command="{Binding SubmitCommand}" />
|
||||
</InputElement.KeyBindings>
|
||||
</TextBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</SplitView.Content>
|
||||
</SplitView>
|
||||
</UserControl>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue