Styles: add shared Typography/Scroll resources; add platform overrides (Desktop/Android/Browser) and load via App; switch icons to resource-based sizes and cap history text lines.
This commit is contained in:
parent
a212870d09
commit
7e40c1dc0b
8 changed files with 144 additions and 6 deletions
17
src/AdvancedCalculator.Android/Styles/Android.axaml
Normal file
17
src/AdvancedCalculator.Android/Styles/Android.axaml
Normal file
|
@ -0,0 +1,17 @@
|
|||
<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>
|
||||
|
||||
<!-- Thin overlay-like scrollbars -->
|
||||
<Style Selector="ScrollBar:vertical">
|
||||
<Setter Property="Width" Value="8"/>
|
||||
</Style>
|
||||
<Style Selector="ScrollBar:horizontal">
|
||||
<Setter Property="Height" Value="8"/>
|
||||
</Style>
|
||||
</ResourceDictionary>
|
||||
|
16
src/AdvancedCalculator.Browser/Styles/Browser.axaml
Normal file
16
src/AdvancedCalculator.Browser/Styles/Browser.axaml
Normal file
|
@ -0,0 +1,16 @@
|
|||
<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>
|
||||
|
||||
<!-- Slightly thinner scrollbars on web -->
|
||||
<Style Selector="ScrollBar:vertical">
|
||||
<Setter Property="Width" Value="8"/>
|
||||
</Style>
|
||||
<Style Selector="ScrollBar:horizontal">
|
||||
<Setter Property="Height" Value="8"/>
|
||||
</Style>
|
||||
</ResourceDictionary>
|
||||
|
16
src/AdvancedCalculator.Desktop/Styles/Desktop.axaml
Normal file
16
src/AdvancedCalculator.Desktop/Styles/Desktop.axaml
Normal file
|
@ -0,0 +1,16 @@
|
|||
<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>
|
||||
|
||||
<!-- Scrollbars a bit thicker on desktop -->
|
||||
<Style Selector="ScrollBar:vertical">
|
||||
<Setter Property="Width" Value="12"/>
|
||||
</Style>
|
||||
<Style Selector="ScrollBar:horizontal">
|
||||
<Setter Property="Height" Value="12"/>
|
||||
</Style>
|
||||
</ResourceDictionary>
|
||||
|
|
@ -6,6 +6,8 @@
|
|||
|
||||
<Application.Styles>
|
||||
<FluentTheme />
|
||||
<StyleInclude Source="avares://AdvancedCalculator/Styles/Typography.axaml"/>
|
||||
<StyleInclude Source="avares://AdvancedCalculator/Styles/Scroll.axaml"/>
|
||||
</Application.Styles>
|
||||
|
||||
<Application.Resources>
|
||||
|
|
|
@ -5,6 +5,8 @@ using Avalonia;
|
|||
using Avalonia.Controls.ApplicationLifetimes;
|
||||
using Avalonia.Data.Core.Plugins;
|
||||
using Avalonia.Markup.Xaml;
|
||||
using Avalonia.Styling;
|
||||
using System;
|
||||
|
||||
namespace AdvancedCalculator;
|
||||
|
||||
|
@ -21,6 +23,40 @@ public partial class App : Application
|
|||
// Without this line you will get duplicate validations from both Avalonia and CT
|
||||
BindingPlugins.DataValidators.RemoveAt(0);
|
||||
|
||||
// Load platform-specific styles (typography, scrollbars overrides)
|
||||
try
|
||||
{
|
||||
var styles = Current?.Styles;
|
||||
if (styles is not null)
|
||||
{
|
||||
if (OperatingSystem.IsAndroid())
|
||||
{
|
||||
styles.Add(new StyleInclude(new Uri("avares://AdvancedCalculator/"))
|
||||
{
|
||||
Source = new Uri("avares://AdvancedCalculator.Android/Styles/Android.axaml")
|
||||
});
|
||||
}
|
||||
else if (OperatingSystem.IsBrowser())
|
||||
{
|
||||
styles.Add(new StyleInclude(new Uri("avares://AdvancedCalculator/"))
|
||||
{
|
||||
Source = new Uri("avares://AdvancedCalculator.Browser/Styles/Browser.axaml")
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
styles.Add(new StyleInclude(new Uri("avares://AdvancedCalculator/"))
|
||||
{
|
||||
Source = new Uri("avares://AdvancedCalculator.Desktop/Styles/Desktop.axaml")
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
catch
|
||||
{
|
||||
// If a platform-specific style dictionary is missing, continue without failing.
|
||||
}
|
||||
|
||||
if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
|
||||
{
|
||||
desktop.MainWindow = new MainWindow
|
||||
|
|
21
src/AdvancedCalculator/Styles/Scroll.axaml
Normal file
21
src/AdvancedCalculator/Styles/Scroll.axaml
Normal file
|
@ -0,0 +1,21 @@
|
|||
<ResourceDictionary 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"/>
|
||||
</Style>
|
||||
<Style Selector="ScrollBar:horizontal">
|
||||
<Setter Property="Height" Value="10"/>
|
||||
</Style>
|
||||
</ResourceDictionary>
|
||||
|
30
src/AdvancedCalculator/Styles/Typography.axaml
Normal file
30
src/AdvancedCalculator/Styles/Typography.axaml
Normal file
|
@ -0,0 +1,30 @@
|
|||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- Defaults for text -->
|
||||
<Style Selector="TextBlock">
|
||||
<Setter Property="TextElement.FontSize" Value="{DynamicResource FontSizeBase}"/>
|
||||
<Setter Property="TextWrapping" Value="Wrap"/>
|
||||
<Setter Property="LineHeight" Value="{DynamicResource LineHeightBase}"/>
|
||||
</Style>
|
||||
|
||||
<!-- Subtle caption text helper -->
|
||||
<Style Selector="TextBlock.caption">
|
||||
<Setter Property="TextElement.FontSize" Value="{DynamicResource FontSizeSmall}"/>
|
||||
<Setter Property="Opacity" Value="0.85"/>
|
||||
</Style>
|
||||
</ResourceDictionary>
|
||||
|
|
@ -59,8 +59,8 @@
|
|||
Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44"
|
||||
AutomationProperties.Name="Insert variable">
|
||||
<Grid ColumnDefinitions="Auto,*,Auto">
|
||||
<TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}"
|
||||
FontSize="22" Text="{Binding Icon}" VerticalAlignment="Center" Margin="0,0,8,0" />
|
||||
<TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}"
|
||||
FontSize="{DynamicResource IconSizeM}" 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="6" VerticalAlignment="Center">
|
||||
<TextBlock Text="{Binding Value}" />
|
||||
|
@ -132,11 +132,11 @@
|
|||
<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" />
|
||||
<TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.ArrowRightDropCircle}"
|
||||
FontSize="{DynamicResource IconSizeM}" VerticalAlignment="Center" Margin="0,0,8,0" />
|
||||
<StackPanel Grid.Column="1">
|
||||
<TextBlock Text="{Binding Input}" />
|
||||
<TextBlock Text="{Binding Output}" FontWeight="Bold" />
|
||||
<TextBlock Text="{Binding Input}" MaxLines="3" />
|
||||
<TextBlock Text="{Binding Output}" FontWeight="Bold" MaxLines="2" />
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</DataTemplate>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue