Skip to content

Align Avalonia UI with WinUI styling and behavior #4975

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Gabriel Dufresne (GabrielDuf) merged 10 commits into from
Jun 22, 2026
Merged

Align Avalonia UI with WinUI styling and behavior #4975

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a365b18
Match Avalonia text styling to WinUI (size, weight, font)
GabrielDuf Jun 19, 2026
59e488a
Blend Avalonia package list with Mica, match WinUI header
GabrielDuf Jun 19, 2026
6a3f224
Match Avalonia selection visuals to WinUI
GabrielDuf Jun 19, 2026
6df4a52
Match Avalonia package tag badge to WinUI
GabrielDuf Jun 19, 2026
b4351a4
Spin Avalonia settings gear on click like WinUI
GabrielDuf Jun 19, 2026
7d994b3
Match Avalonia ignored-updates dialog to WinUI
GabrielDuf Jun 19, 2026
a6268d6
Match Avalonia install-options dialog to WinUI
GabrielDuf Jun 19, 2026
b21d02a
Remove DevExpress package references
GabrielDuf Jun 19, 2026
321e6df
Remove separator between footer and package list
GabrielDuf Jun 19, 2026
17bece7
Fix import ordering
GabrielDuf Jun 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 116 additions & 0 deletions src/UniGetUI.Avalonia/Assets/Styles/Styles.Common.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@
<SolidColorBrush x:Key="AccentFillColorTertiaryBrush" Color="{DynamicResource SystemAccentColorDark2}"/>
<SolidColorBrush x:Key="AccentFillColorDisabledBrush" Color="#37000000"/>
<SolidColorBrush x:Key="AccentFillColorSelectedTextBackgroundBrush" Color="{DynamicResource SystemAccentColor}"/>
<!-- Subtle fills (WinUI NavigationViewItem hover/selected backgrounds) -->
<SolidColorBrush x:Key="SubtleFillColorSecondaryBrush" Color="#09000000"/>
<SolidColorBrush x:Key="SubtleFillColorTertiaryBrush" Color="#06000000"/>
<!-- Accent text (darker accents read better on light bg) -->
<SolidColorBrush x:Key="AccentTextFillColorPrimaryBrush" Color="{DynamicResource SystemAccentColorDark2}"/>
<SolidColorBrush x:Key="AccentTextFillColorSecondaryBrush" Color="{DynamicResource SystemAccentColorDark3}"/>
Expand All @@ -35,6 +38,14 @@
<SolidColorBrush x:Key="SettingsCardBackground" Color="#FBFBFB"/>
<SolidColorBrush x:Key="SettingsCardBorderBrush" Color="#ECECEC"/>
<SolidColorBrush x:Key="SettingsCardHoverBackground" Color="#F6F6F6"/>
<!-- Package list container; near-transparent over Mica (see Styles.WindowsMica) -->
<SolidColorBrush x:Key="PackageListBackground" Color="#FBFBFB"/>
<!-- Column header: WinUI default button (ControlFillColorDefault fill + ControlStrokeColorDefault border) -->
<SolidColorBrush x:Key="PackageListHeaderBackground" Color="#B3FFFFFF"/>
<SolidColorBrush x:Key="PackageListHeaderBorderBrush" Color="#0F000000"/>
<!-- Subtle header hover/press (WinUI-style), over the rest fill -->
<SolidColorBrush x:Key="DataGridColumnHeaderHoveredBackgroundBrush" Color="#05000000"/>
<SolidColorBrush x:Key="DataGridColumnHeaderPressedBackgroundBrush" Color="#14000000"/>
<!-- Window structure -->
<SolidColorBrush x:Key="AppWindowBackground" Color="#F3F3F3"/>
<SolidColorBrush x:Key="AppTitleBarBackground" Color="#F3F3F3"/>
Expand Down Expand Up @@ -78,6 +89,9 @@
<SolidColorBrush x:Key="AccentFillColorTertiaryBrush" Color="{DynamicResource SystemAccentColor}"/>
<SolidColorBrush x:Key="AccentFillColorDisabledBrush" Color="#28FFFFFF"/>
<SolidColorBrush x:Key="AccentFillColorSelectedTextBackgroundBrush" Color="{DynamicResource SystemAccentColor}"/>
<!-- Subtle fills (WinUI NavigationViewItem hover/selected backgrounds) -->
<SolidColorBrush x:Key="SubtleFillColorSecondaryBrush" Color="#0FFFFFFF"/>
<SolidColorBrush x:Key="SubtleFillColorTertiaryBrush" Color="#0AFFFFFF"/>
<!-- Accent text -->
<SolidColorBrush x:Key="AccentTextFillColorPrimaryBrush" Color="{DynamicResource SystemAccentColorLight3}"/>
<SolidColorBrush x:Key="AccentTextFillColorSecondaryBrush" Color="{DynamicResource SystemAccentColorLight3}"/>
Expand All @@ -99,6 +113,14 @@
<SolidColorBrush x:Key="SettingsCardBackground" Color="#2D2D2D"/>
<SolidColorBrush x:Key="SettingsCardBorderBrush" Color="#393939"/>
<SolidColorBrush x:Key="SettingsCardHoverBackground" Color="#323232"/>
<!-- Package list container; near-transparent over Mica (see Styles.WindowsMica) -->
<SolidColorBrush x:Key="PackageListBackground" Color="#2D2D2D"/>
<!-- Column header: WinUI default button (ControlFillColorDefault fill + ControlStrokeColorDefault border) -->
<SolidColorBrush x:Key="PackageListHeaderBackground" Color="#0FFFFFFF"/>
<SolidColorBrush x:Key="PackageListHeaderBorderBrush" Color="#12FFFFFF"/>
<!-- Subtle header hover/press (WinUI-style), over the rest fill -->
<SolidColorBrush x:Key="DataGridColumnHeaderHoveredBackgroundBrush" Color="#0AFFFFFF"/>
<SolidColorBrush x:Key="DataGridColumnHeaderPressedBackgroundBrush" Color="#1FFFFFFF"/>
<!-- Window structure -->
<SolidColorBrush x:Key="AppWindowBackground" Color="#202020"/>
<SolidColorBrush x:Key="AppTitleBarBackground" Color="#202020"/>
Expand Down Expand Up @@ -147,6 +169,10 @@
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="Transparent"/>
</Style>
<!-- Column headers default to Avalonia's 12px bare-TextBlock size; WinUI renders them at 14px. -->
<Style Selector="DataGridColumnHeader">
<Setter Property="FontSize" Value="14"/>
</Style>
<Style Selector="DataGridRow:selected">
<Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColor}"/>
</Style>
Expand All @@ -157,6 +183,96 @@
<Setter Property="Fill" Value="{DynamicResource SettingsCardHoverBackground}"/>
</Style>

<!-- Sidebar navigation items: WinUI NavigationViewItem-style selection.
Fluent's default fills the selected item with the accent colour; instead use a subtle
neutral fill plus a vertical accent pill on the left edge. The content presenter is named
ContentHost (not PART_ContentPresenter) so the base theme's accent-fill setters don't apply. -->
<Style Selector="ListBoxItem.nav-item">
<Setter Property="Template">
<ControlTemplate>
<Panel>
<ContentPresenter Name="ContentHost"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Padding="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"/>
<Border Name="SelectionPill"
Width="3" Height="16" CornerRadius="1.5"
Background="{DynamicResource AccentFillColorDefaultBrush}"
HorizontalAlignment="Left" VerticalAlignment="Center"
Opacity="0">
<Border.Transitions>
<Transitions><DoubleTransition Property="Opacity" Duration="0:0:0.1"/></Transitions>
</Border.Transitions>
</Border>
</Panel>
</ControlTemplate>
</Setter>
</Style>
<Style Selector="ListBoxItem.nav-item:pointerover /template/ ContentPresenter#ContentHost">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}"/>
</Style>
<Style Selector="ListBoxItem.nav-item:pressed /template/ ContentPresenter#ContentHost">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorTertiaryBrush}"/>
</Style>
<Style Selector="ListBoxItem.nav-item:selected /template/ ContentPresenter#ContentHost">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}"/>
</Style>
<Style Selector="ListBoxItem.nav-item:selected:pointerover /template/ ContentPresenter#ContentHost">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorTertiaryBrush}"/>
</Style>
<Style Selector="ListBoxItem.nav-item:selected /template/ Border#SelectionPill">
<Setter Property="Opacity" Value="1"/>
</Style>

<!-- View-mode segmented selector (List / Grid / Icons): WinUI Segmented-style selection — subtle
fill plus an accent underline under the selected segment, not Fluent's full-accent fill. -->
<Style Selector="ListBoxItem.segment-item">
<Setter Property="Template">
<ControlTemplate>
<Panel>
<ContentPresenter Name="ContentHost"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Padding="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"/>
<Border Name="SelectionPill"
Height="2" CornerRadius="1"
Background="{DynamicResource AccentFillColorDefaultBrush}"
HorizontalAlignment="Stretch" VerticalAlignment="Bottom"
Margin="5,0,5,2"
Opacity="0">
<Border.Transitions>
<Transitions><DoubleTransition Property="Opacity" Duration="0:0:0.1"/></Transitions>
</Border.Transitions>
</Border>
</Panel>
</ControlTemplate>
</Setter>
</Style>
<Style Selector="ListBoxItem.segment-item:pointerover /template/ ContentPresenter#ContentHost">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}"/>
</Style>
<Style Selector="ListBoxItem.segment-item:selected /template/ ContentPresenter#ContentHost">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}"/>
</Style>
<Style Selector="ListBoxItem.segment-item:selected:pointerover /template/ ContentPresenter#ContentHost">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorTertiaryBrush}"/>
</Style>
<Style Selector="ListBoxItem.segment-item:selected /template/ Border#SelectionPill">
<Setter Property="Opacity" Value="1"/>
</Style>

<!-- SettingsCard appearance -->
<Style Selector="Border.settings-card">
<Setter Property="Background" Value="{DynamicResource SettingsCardBackground}"/>
Expand Down
4 changes: 4 additions & 0 deletions src/UniGetUI.Avalonia/Assets/Styles/Styles.WindowsMica.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@
<!-- Cards / panels: translucent white layers over the (light) Mica -->
<SolidColorBrush x:Key="SettingsCardBackground" Color="#80FFFFFF"/>
<SolidColorBrush x:Key="SettingsCardBorderBrush" Color="#14000000"/>
<!-- Package list: near-transparent so Mica shows through, matching WinUI's SystemFillColorNeutralBackground -->
<SolidColorBrush x:Key="PackageListBackground" Color="#06000000"/>
<SolidColorBrush x:Key="SettingsCardHoverBackground" Color="#99FFFFFF"/>
<SolidColorBrush x:Key="AppSplitterBackground" Color="#18000000"/>
<SolidColorBrush x:Key="AppOperationsPanelBackground" Color="#80FFFFFF"/>
Expand Down Expand Up @@ -53,6 +55,8 @@
<!-- Cards / panels: translucent dark layers; ~40% so the wallpaper-tinted Mica bleeds through -->
<SolidColorBrush x:Key="SettingsCardBackground" Color="#662D2D2D"/>
<SolidColorBrush x:Key="SettingsCardBorderBrush" Color="#26FFFFFF"/>
<!-- Package list: near-transparent so Mica shows through, matching WinUI's SystemFillColorNeutralBackground -->
<SolidColorBrush x:Key="PackageListBackground" Color="#08FFFFFF"/>
<SolidColorBrush x:Key="SettingsCardHoverBackground" Color="#66383838"/>
<SolidColorBrush x:Key="AppSplitterBackground" Color="#66000000"/>
<SolidColorBrush x:Key="AppOperationsPanelBackground" Color="#66202020"/>
Expand Down
30 changes: 16 additions & 14 deletions src/UniGetUI.Avalonia/Models/PackageCollections.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,8 @@
public string VersionComboString { get; }
public string ListedNameTooltip { get; private set; } = "";
public float ListedOpacity { get; private set; } = 1.0f;
public string TagIconPath { get; private set; } = "";
public string TagBackdropIconPath { get; private set; } = "";
public string TagSymbolIconPath { get; private set; } = "";
public bool TagIconVisible { get; private set; }

public bool InstallerHostChanged { get; private set; }
Expand Down Expand Up @@ -113,7 +114,7 @@
/// See issue #4617 — defense-in-depth signal that an upgrade may be redirecting the
/// download to a different domain than the user originally trusted.
/// </summary>
private void MaybeStartInstallerHostCheck()

Check warning on line 117 in src/UniGetUI.Avalonia/Models/PackageCollections.cs

View workflow job for this annotation

GitHub Actions / Linux (Avalonia) 

Member 'MaybeStartInstallerHostCheck' does not access instance data and can be marked as static (https://learn.microsoft.com/dotnet/fundamentals/code-analysis/quality-rules/ca1822)
{
#if WINDOWS
if (!Package.IsUpgradable) return;
Expand Down Expand Up @@ -248,7 +249,8 @@
UpdateDisplayState();
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ListedOpacity)));
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ListedNameTooltip)));
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(TagIconPath)));
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(TagBackdropIconPath)));
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(TagSymbolIconPath)));
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(TagIconVisible)));
}
else if (e.PropertyName == nameof(Package.IsChecked))
Expand All @@ -270,20 +272,20 @@
};
ListedNameTooltip = Package.Name;

string tagName = Package.Tag switch
// Match WinUI: an accent-coloured filled disc with the symbol punched out, then the
// symbol drawn on top in the default foreground. OnQueue/Unavailable show no badge.
(string symbol, string backdrop) = Package.Tag switch
{
PackageTag.AlreadyInstalled => "installed_filled",
PackageTag.IsUpgradable => "upgradable_filled",
PackageTag.Pinned => "pin_filled",
PackageTag.OnQueue => "sandclock",
PackageTag.BeingProcessed => "loading_filled",
PackageTag.Failed => "warning_filled",
_ => "",
PackageTag.AlreadyInstalled => ("installed", "installed_filled"),
PackageTag.IsUpgradable => ("upgradable", "upgradable_filled"),
PackageTag.Pinned => ("pin", "pin_filled"),
PackageTag.BeingProcessed => ("loading", "loading_filled"),
PackageTag.Failed => ("warning", "warning_filled"),
_ => ("", ""),
};
TagIconVisible = tagName.Length > 0;
TagIconPath = TagIconVisible
? $"avares://UniGetUI.Avalonia/Assets/Symbols/{tagName}.svg"
: "";
TagIconVisible = symbol.Length > 0;
TagSymbolIconPath = TagIconVisible ? $"avares://UniGetUI.Avalonia/Assets/Symbols/{symbol}.svg" : "";
TagBackdropIconPath = TagIconVisible ? $"avares://UniGetUI.Avalonia/Assets/Symbols/{backdrop}.svg" : "";
}

public void Dispose()
Expand Down
1 change: 0 additions & 1 deletion src/UniGetUI.Avalonia/UniGetUI.Avalonia.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,6 @@
<PackageReference Include="Avalonia.Controls.DataGrid" Version="12.0.0" />
<PackageReference Include="Avalonia.Desktop" Version="12.0.4" />
<PackageReference Include="Avalonia.Themes.Fluent" Version="12.0.4" />
<PackageReference Include="Devolutions.AvaloniaTheme.DevExpress" Version="2026.3.13" />
<PackageReference Include="Devolutions.AvaloniaTheme.MacOS" Version="2026.3.13" />
<PackageReference Include="Devolutions.AvaloniaTheme.Linux" Version="2026.3.11" />
<PackageReference Include="AvaloniaUI.DiagnosticsSupport" Version="2.2.0-beta3" Condition="'$(EnableAvaloniaDiagnostics)' == 'true'" />
Expand Down
Loading
Loading