Skip to content

Commit 292cba9

Browse files
ArcanoxDragonArcanoxDragon
committed
Use FluentAvalonia for better-looking theme and improve layout of inventory view
1 parent bed6929 commit 292cba9

File tree

9 files changed

+180
-136
lines changed

9 files changed

+180
-136
lines changed

‎StudioZDR.UI.Avalonia/App.axaml

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@
22
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
33
xmlns:local="using:StudioZDR.UI.Avalonia"
44
xmlns:avicons="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
5+
xmlns:fa="clr-namespace:FluentAvalonia.Styling;assembly=FluentAvalonia"
56
x:Class="StudioZDR.UI.Avalonia.App"
67
RequestedThemeVariant="Dark">
78
<Application.DataTemplates>
89
<local:ViewLocator />
910
</Application.DataTemplates>
1011

1112
<Application.Styles>
12-
<FluentTheme DensityStyle="Compact" />
13+
<fa:FluentAvaloniaTheme PreferSystemTheme="False" />
1314
<avicons:MaterialIconStyles />
1415
<StyleInclude Source="/Styles/AppStyles.axaml" />
1516
</Application.Styles>

‎StudioZDR.UI.Avalonia/Features/SaveEditor/Views/InventoryView.axaml

+107-98
Original file line numberDiff line numberDiff line change
@@ -11,113 +11,122 @@
1111
MinWidth="600">
1212
<ScrollViewer>
1313
<StackPanel Orientation="Vertical" Spacing="10" Margin="10">
14-
<!-- Missiles -->
15-
<controls:GroupBox>
16-
<controls:GroupBox.Header>
17-
<StackPanel Orientation="Horizontal" Spacing="5">
18-
<Image Source="/Assets/Images/MissileTank.png" Width="20" />
19-
<TextBlock Text="Missiles" VerticalAlignment="Center" />
20-
</StackPanel>
21-
</controls:GroupBox.Header>
14+
<Grid ColumnDefinitions="*,10,*">
15+
<!-- Energy -->
16+
<controls:GroupBox Grid.Column="0">
17+
<controls:GroupBox.Header>
18+
<StackPanel Orientation="Horizontal" Spacing="5">
19+
<Image Source="/Assets/Images/EnergyTank.png" Width="20" />
20+
<TextBlock Text="Energy" VerticalAlignment="Center" />
21+
</StackPanel>
22+
</controls:GroupBox.Header>
2223

23-
<Grid RowDefinitions="Auto,Auto" ColumnDefinitions="2*,3*,20,2*,3*" Classes="ControlGrid">
24-
<!-- First Column -->
25-
<Label Grid.Row="0" Grid.Column="0"
26-
Content="Current Missiles:" Target="CurrentMissiles" />
27-
<NumericUpDown Name="CurrentMissiles" Grid.Row="0" Grid.Column="1"
28-
Value="{Binding CurrentMissiles}" Minimum="0"
29-
ParsingNumberStyle="Integer" FormatString="0" />
24+
<Grid RowDefinitions="Auto,Auto,Auto,Auto" ColumnDefinitions="2*,3*" Classes="ControlGrid">
25+
<!-- Current Health -->
26+
<Label Grid.Row="0" Grid.Column="0"
27+
Content="Current Energy:" Target="CurrentHealth" />
28+
<NumericUpDown Name="CurrentHealth" Grid.Row="0" Grid.Column="1"
29+
Value="{Binding CurrentHealth}" Minimum="0"
30+
ParsingNumberStyle="Integer" FormatString="0" />
3031

31-
<Label Grid.Row="1" Grid.Column="0"
32-
Content="Max Missiles:" Target="MaxMissiles" />
33-
<NumericUpDown Name="MaxMissiles" Grid.Row="1" Grid.Column="1"
34-
Value="{Binding MaxMissiles}" Minimum="0"
35-
ParsingNumberStyle="Integer" FormatString="0" />
32+
<!-- Max Health -->
33+
<Label Grid.Row="1" Grid.Column="0"
34+
Content="Max Energy:" Target="MaxHealth" />
35+
<NumericUpDown Name="MaxHealth" Grid.Row="1" Grid.Column="1"
36+
Value="{Binding MaxHealth}" Minimum="0"
37+
ParsingNumberStyle="Integer" FormatString="0" />
3638

37-
<!-- Second Column -->
38-
<Label Grid.Row="0" Grid.Column="3"
39-
Content="Missile Tanks:" Target="MissileTanks">
40-
<ToolTip.Tip>
41-
<x:String>
42-
This is how many Missile Tanks the player has collected. This does not
43-
directly affect the amount of missiles Samus can carry; it only affects
44-
the game completion percentage.
45-
</x:String>
46-
</ToolTip.Tip>
47-
</Label>
48-
<NumericUpDown Name="MissileTanks" Grid.Row="0" Grid.Column="4"
49-
Value="{Binding MissileTanks}" Minimum="0"
50-
ParsingNumberStyle="Integer" FormatString="0" />
39+
<!-- Energy Tanks -->
40+
<Label Grid.Row="2" Grid.Column="0"
41+
Content="Energy Tanks:" Target="EnergyTanks">
42+
<ToolTip.Tip>
43+
<x:String>
44+
This is how many Energy Tanks the player has collected. This does not
45+
directly affect Samus's maximum health; it only affects the game
46+
completion percentage and the energy amount on the completion
47+
screen (for 2.0.0+ save files).
48+
</x:String>
49+
</ToolTip.Tip>
50+
</Label>
51+
<NumericUpDown Name="EnergyTanks" Grid.Row="2" Grid.Column="1"
52+
Value="{Binding EnergyTanks}" Minimum="0"
53+
ParsingNumberStyle="Integer" FormatString="0" />
5154

52-
<Label Grid.Row="1" Grid.Column="3"
53-
Content="Missile+ Tanks:" Target="MissilePlusTanks">
54-
<ToolTip.Tip>
55-
<x:String>
56-
This is how many Missile Plus Tanks the player has collected. This does
57-
not directly affect the amount of missiles Samus can carry; it only affects
58-
the game completion percentage.
59-
</x:String>
60-
</ToolTip.Tip>
61-
</Label>
62-
<NumericUpDown Name="MissilePlusTanks" Grid.Row="1" Grid.Column="4"
63-
Value="{Binding MissilePlusTanks}" Minimum="0"
64-
ParsingNumberStyle="Integer" FormatString="0" />
65-
</Grid>
66-
</controls:GroupBox>
55+
<!-- Energy Pargs -->
56+
<Label Grid.Row="3" Grid.Column="0"
57+
Content="Energy Parts:" Target="EnergyTankParts">
58+
<ToolTip.Tip>
59+
<x:String>
60+
This is how many Energy Parts the player currently has, as shown in the
61+
Samus screen. Every fourth part collected resets this to 0 and increases
62+
the number of Energy Tanks by 1.
63+
</x:String>
64+
</ToolTip.Tip>
65+
</Label>
66+
<NumericUpDown Name="EnergyTankParts" Grid.Row="3" Grid.Column="1"
67+
Value="{Binding EnergyTankParts}" Minimum="0" Maximum="3"
68+
ParsingNumberStyle="Integer" FormatString="0" />
69+
</Grid>
70+
</controls:GroupBox>
6771

68-
<!-- Health (Energy) -->
69-
<controls:GroupBox>
70-
<controls:GroupBox.Header>
71-
<StackPanel Orientation="Horizontal" Spacing="5">
72-
<Image Source="/Assets/Images/EnergyTank.png" Width="20" />
73-
<TextBlock Text="Health" VerticalAlignment="Center" />
74-
</StackPanel>
75-
</controls:GroupBox.Header>
72+
<!-- Missiles -->
73+
<controls:GroupBox Grid.Column="2">
74+
<controls:GroupBox.Header>
75+
<StackPanel Orientation="Horizontal" Spacing="5">
76+
<Image Source="/Assets/Images/MissileTank.png" Width="20" />
77+
<TextBlock Text="Missiles" VerticalAlignment="Center" />
78+
</StackPanel>
79+
</controls:GroupBox.Header>
7680

77-
<Grid RowDefinitions="Auto,Auto" ColumnDefinitions="2*,3*,20,2*,3*" Classes="ControlGrid">
78-
<!-- First Column -->
79-
<Label Grid.Row="0" Grid.Column="0"
80-
Content="Current Health:" Target="CurrentHealth" />
81-
<NumericUpDown Name="CurrentHealth" Grid.Row="0" Grid.Column="1"
82-
Value="{Binding CurrentHealth}" Minimum="0"
83-
ParsingNumberStyle="Integer" FormatString="0" />
81+
<Grid RowDefinitions="Auto,Auto,Auto,Auto" ColumnDefinitions="2*,3*" Classes="ControlGrid">
82+
<!-- Current Missiles -->
83+
<Label Grid.Row="0" Grid.Column="0"
84+
Content="Current Missiles:" Target="CurrentMissiles" />
85+
<NumericUpDown Name="CurrentMissiles" Grid.Row="0" Grid.Column="1"
86+
Value="{Binding CurrentMissiles}" Minimum="0"
87+
ParsingNumberStyle="Integer" FormatString="0" />
8488

85-
<Label Grid.Row="1" Grid.Column="0"
86-
Content="Max Health:" Target="MaxHealth" />
87-
<NumericUpDown Name="MaxHealth" Grid.Row="1" Grid.Column="1"
88-
Value="{Binding MaxHealth}" Minimum="0"
89-
ParsingNumberStyle="Integer" FormatString="0" />
89+
<!-- Max Missiles -->
90+
<Label Grid.Row="1" Grid.Column="0"
91+
Content="Max Missiles:" Target="MaxMissiles" />
92+
<NumericUpDown Name="MaxMissiles" Grid.Row="1" Grid.Column="1"
93+
Value="{Binding MaxMissiles}" Minimum="0"
94+
ParsingNumberStyle="Integer" FormatString="0" />
9095

91-
<!-- Second Column -->
92-
<Label Grid.Row="0" Grid.Column="3"
93-
Content="Energy Tanks:" Target="EnergyTanks">
94-
<ToolTip.Tip>
95-
<x:String>
96-
This is how many Energy Tanks the player has collected. This does not
97-
directly affect Samus's maximum health; it only affects the game
98-
completion percentage.
99-
</x:String>
100-
</ToolTip.Tip>
101-
</Label>
102-
<NumericUpDown Name="EnergyTanks" Grid.Row="0" Grid.Column="4"
103-
Value="{Binding EnergyTanks}" Minimum="0"
104-
ParsingNumberStyle="Integer" FormatString="0" />
96+
<!-- Missile Tanks -->
97+
<Label Grid.Row="2" Grid.Column="0"
98+
Content="Missile Tanks:" Target="MissileTanks">
99+
<ToolTip.Tip>
100+
<x:String>
101+
This is how many Missile Tanks the player has collected. This does not
102+
directly affect the amount of missiles Samus can carry; it only affects
103+
the game completion percentage and the missile count on the completion
104+
screen (for 2.0.0+ save files).
105+
</x:String>
106+
</ToolTip.Tip>
107+
</Label>
108+
<NumericUpDown Name="MissileTanks" Grid.Row="2" Grid.Column="1"
109+
Value="{Binding MissileTanks}" Minimum="0"
110+
ParsingNumberStyle="Integer" FormatString="0" />
105111

106-
<Label Grid.Row="1" Grid.Column="3"
107-
Content="Energy Tank Parts:" Target="EnergyTankParts">
108-
<ToolTip.Tip>
109-
<x:String>
110-
This is how many Energy Tank Parts the player currently has, as shown
111-
in the Samus screen. Every fourth part collected resets this to 0 and
112-
increases the number of Energy Tanks by 1.
113-
</x:String>
114-
</ToolTip.Tip>
115-
</Label>
116-
<NumericUpDown Name="EnergyTankParts" Grid.Row="1" Grid.Column="4"
117-
Value="{Binding EnergyTankParts}" Minimum="0" Maximum="3"
118-
ParsingNumberStyle="Integer" FormatString="0" />
119-
</Grid>
120-
</controls:GroupBox>
112+
<!-- Missile+ Tanks -->
113+
<Label Grid.Row="3" Grid.Column="0"
114+
Content="Missile+ Tanks:" Target="MissilePlusTanks">
115+
<ToolTip.Tip>
116+
<x:String>
117+
This is how many Missile Plus Tanks the player has collected. This does
118+
not directly affect the amount of missiles Samus can carry; it only affects
119+
the game completion percentage and the missile count on the completion
120+
screen (for 2.0.0+ save files).
121+
</x:String>
122+
</ToolTip.Tip>
123+
</Label>
124+
<NumericUpDown Name="MissilePlusTanks" Grid.Row="3" Grid.Column="1"
125+
Value="{Binding MissilePlusTanks}" Minimum="0"
126+
ParsingNumberStyle="Integer" FormatString="0" />
127+
</Grid>
128+
</controls:GroupBox>
129+
</Grid>
121130

122131
<Grid ColumnDefinitions="*,10,*">
123132
<!-- Power Bombs -->

‎StudioZDR.UI.Avalonia/Features/SaveEditor/Views/SaveEditorView.axaml

+14-13
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@
33
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
44
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
55
xmlns:vm="clr-namespace:StudioZDR.App.Features.SaveEditor.ViewModels;assembly=StudioZDR.App"
6-
mc:Ignorable="d"
6+
xmlns:framework="clr-namespace:StudioZDR.UI.Avalonia.Framework"
7+
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="400"
78
x:Class="StudioZDR.UI.Avalonia.Features.SaveEditor.Views.SaveEditorView"
89
x:DataType="vm:SaveEditorViewModel"
910
x:CompileBindings="True"
10-
Name="View">
11+
Name="View"
12+
framework:FeatureView.PreferredSize="1000, 960">
1113
<UserControl.KeyBindings>
1214
<KeyBinding Gesture="Ctrl+O" Command="{Binding OpenFile}" />
1315
<KeyBinding Gesture="Ctrl+S" Command="{Binding SaveFile}">
@@ -41,9 +43,8 @@
4143
</MenuItem>
4244
</Menu>
4345

44-
<RelativePanel>
45-
<TabControl RelativePanel.AlignTopWithPanel="True" RelativePanel.AlignBottomWithPanel="True"
46-
RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True"
46+
<Grid>
47+
<TabControl Grid.Row="0" Grid.Column="0"
4748
IsVisible="{Binding IsProfileOpened}">
4849
<TabItem Header="Inventory">
4950
<ContentControl Content="{Binding Inventory}" />
@@ -53,8 +54,10 @@
5354
</TabItem>
5455
</TabControl>
5556

56-
<TextBlock RelativePanel.AlignHorizontalCenterWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True"
57-
Text="Open a profile to begin!">
57+
<TextBlock Grid.Row="0" Grid.Column="0"
58+
Text="Open a profile to begin!"
59+
HorizontalAlignment="Center"
60+
VerticalAlignment="Center">
5861
<TextBlock.IsVisible>
5962
<MultiBinding Converter="{x:Static BoolConverters.And}">
6063
<Binding Path="!IsProfileOpened" />
@@ -64,19 +67,17 @@
6467
</TextBlock>
6568

6669
<!-- Transluscent backdrop of "please wait" message -->
67-
<Border RelativePanel.AlignTopWithPanel="True" RelativePanel.AlignBottomWithPanel="True"
68-
RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True"
70+
<Border Grid.Row="0" Grid.Column="0"
6971
Background="Black" Opacity="0.5" IsVisible="{Binding IsBusy}" />
7072

7173
<!-- "Please wait" message itself -->
72-
<Border RelativePanel.AlignTopWithPanel="True" RelativePanel.AlignBottomWithPanel="True"
73-
RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True"
74+
<Border Grid.Row="0" Grid.Column="0"
7475
IsVisible="{Binding IsBusy}">
7576
<StackPanel Orientation="Vertical" Spacing="20" HorizontalAlignment="Center" VerticalAlignment="Center">
7677
<TextBlock Text="Please wait..." HorizontalAlignment="Center" />
77-
<ProgressBar IsIndeterminate="True" />
78+
<ProgressBar IsIndeterminate="{Binding IsBusy}" IsVisible="{Binding IsBusy}" />
7879
</StackPanel>
7980
</Border>
80-
</RelativePanel>
81+
</Grid>
8182
</DockPanel>
8283
</UserControl>

‎StudioZDR.UI.Avalonia/Framework/FeatureView.cs

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
using Avalonia.Controls;
2+
3+
namespace StudioZDR.UI.Avalonia.Framework;
4+
5+
public static class FeatureView
6+
{
7+
public static readonly AttachedProperty<Size> PreferredSizeProperty = AvaloniaProperty.RegisterAttached<UserControl, Size>("PreferredSize", typeof(FeatureView));
8+
9+
public static void SetPreferredSize(AvaloniaObject element, Size value)
10+
=> element.SetValue(PreferredSizeProperty, value);
11+
12+
public static Size GetPreferredSize(AvaloniaObject element)
13+
=> element.GetValue(PreferredSizeProperty);
14+
}

‎StudioZDR.UI.Avalonia/StudioZDR.UI.Avalonia.csproj

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
<!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
3030
<PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.10" />
3131
<PackageReference Include="Avalonia.ReactiveUI" Version="11.0.10" />
32+
<PackageReference Include="FluentAvaloniaUI" Version="2.0.5" />
3233
<PackageReference Include="Material.Icons.Avalonia" Version="2.1.9" />
3334
</ItemGroup>
3435

‎StudioZDR.UI.Avalonia/Views/Controls/GroupBox.axaml

+3-2
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,17 @@
55
xmlns:controls="clr-namespace:StudioZDR.UI.Avalonia.Views.Controls"
66
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
77
x:Class="StudioZDR.UI.Avalonia.Views.Controls.GroupBox">
8+
89
<ContentControl.Styles>
910
<Style Selector="Border.ContentBorder">
10-
<Setter Property="BorderBrush" Value="{DynamicResource SystemControlForegroundBaseMediumBrush}" />
11+
<Setter Property="BorderBrush" Value="{DynamicResource TextFillColorPrimaryBrush}" />
1112
<Setter Property="BorderThickness" Value="{DynamicResource TextControlBorderThemeThickness}" />
1213
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
1314
<Setter Property="Padding" Value="8,12,8,8" />
1415
</Style>
1516

1617
<Style Selector="ContentPresenter.Header">
17-
<Setter Property="Background" Value="{DynamicResource SystemRegionBrush}" />
18+
<Setter Property="Background" Value="{DynamicResource SolidBackgroundFillColorBaseBrush}" />
1819
<Setter Property="Margin" Value="12,0,0,0" />
1920
<Setter Property="Padding" Value="5,0,5,0" />
2021
<Setter Property="HorizontalAlignment" Value="Left" />

‎StudioZDR.UI.Avalonia/Views/Dialogs/AlertDialog.axaml.cs

-4
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,6 @@ public partial class AlertDialog : ReactiveWindow<ViewModelBase>
2222
public AlertDialog()
2323
{
2424
InitializeComponent();
25-
26-
#if DEBUG
27-
this.AttachDevTools();
28-
#endif
2925
}
3026

3127
/// <summary>

‎StudioZDR.UI.Avalonia/Views/Dialogs/ConfirmDialog.axaml.cs

-4
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,6 @@ public partial class ConfirmDialog : ReactiveWindow<ViewModelBase>
2727
public ConfirmDialog()
2828
{
2929
InitializeComponent();
30-
31-
#if DEBUG
32-
this.AttachDevTools();
33-
#endif
3430
}
3531

3632
/// <summary>

0 commit comments

Comments
 (0)