TileButton control
MODIFY
WalletWasabi.Fluent/App.xaml
WalletWasabi.Fluent/App.xaml
<StyleInclude Source="avares://WalletWasabi.Fluent/Controls/TagsBox.xaml" />
<StyleInclude Source="avares://WalletWasabi.Fluent/Controls/NavBarItem.xaml" />
<StyleInclude Source="avares://WalletWasabi.Fluent/Controls/NavBarTreeItem.xaml" />
+ <StyleInclude Source="avares://WalletWasabi.Fluent/Controls/TileButton.axaml" />
</Application.Styles>
<NativeMenu.Menu>
<NativeMenu>

MODIFY
WalletWasabi.Fluent/Controls/InfoMessage.axaml.cs
WalletWasabi.Fluent/Controls/InfoMessage.axaml.cs
@@ -6,7 +6,7 @@ namespace WalletWasabi.Fluent.Controls
public class InfoMessage : Label
{
public static readonly StyledProperty<int> IconSizeProperty =
- AvaloniaProperty.Register<ContentArea, int>(nameof(IconSize), 20);
+ AvaloniaProperty.Register<InfoMessage, int>(nameof(IconSize), 20);
public int IconSize
{

ADD
WalletWasabi.Fluent/Controls/TileButton.axaml
+<Styles xmlns="https://github.com/avaloniaui"
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+ xmlns:c="using:WalletWasabi.Fluent.Controls">
+
+ <Style Selector="c|TileButton">
+ <Setter Property="Template">
+ <ControlTemplate>
+ <Border x:Name="PART_Border"
+ BorderThickness="{TemplateBinding BorderThickness}"
+ BorderBrush="{TemplateBinding BorderBrush}"
+ Background="{TemplateBinding Background}">
+ <Panel>
+ <PathIcon x:Name="PART_Icon"
+ Data="{TemplateBinding Icon}"
+ Width="{TemplateBinding IconSize}"
+ Height="{TemplateBinding IconSize}"
+ Foreground="{TemplateBinding Foreground}"/>
+ <TextBlock x:Name="PART_Text"
+ Text="{TemplateBinding Text}"
+ Foreground="{TemplateBinding Foreground}"/>
+ </Panel>
+ </Border>
+ </ControlTemplate>
+ </Setter>
+ </Style>
+
+ <Style Selector="c|TileButton /template/ PathIcon#PART_Icon">
+ <Setter Property="Opacity" Value="0.8"/>
+ <Setter Property="HorizontalAlignment" Value="Center"/>
+ <Setter Property="VerticalAlignment" Value="Center"/>
+ </Style>
+
+ <Style Selector="c|TileButton /template/ TextBlock#PART_Text">
+ <Setter Property="Margin" Value="0 0 0 15"/>
+ <Setter Property="HorizontalAlignment" Value="Center"/>
+ <Setter Property="VerticalAlignment" Value="Bottom"/>
+ </Style>
+
+ <Style Selector="c|TileButton /template/ Border#PART_Border">
+ <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+ <Setter Property="BoxShadow" Value="{DynamicResource OptionButtonShadow}" />
+ </Style>
+
+ <Style Selector="c|TileButton">
+ <Setter Property="Width" Value="250"/>
+ <Setter Property="Height" Value="250"/>
+ <Setter Property="ClipToBounds" Value="False" />
+ <Setter Property="BorderThickness" Value="0" />
+ <Setter Property="Background" Value="{DynamicResource OptionButtonBackground}" />
+ <Setter Property="BorderBrush" Value="{DynamicResource OptionButtonBorderBrush}" />
+ </Style>
+
+ <Style Selector="c|TileButton:pointerover">
+ <Setter Property="Background" Value="{DynamicResource ButtonBackgroundPointerOver}" />
+ <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrushPointerOver}" />
+ <Setter Property="Foreground" Value="{DynamicResource ButtonForegroundPointerOver}" />
+ </Style>
+
+ <Style Selector="c|TileButton:pressed">
+ <Setter Property="Foreground" Value="{DynamicResource ButtonForegroundPressed}" />
+ </Style>
+
+ <Style Selector="c|TileButton:pressed">
+ <Setter Property="RenderTransform" Value="scale(0.98)" />
+ </Style>
+
+</Styles>

ADD
WalletWasabi.Fluent/Controls/TileButton.axaml.cs
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Media;
+using WalletWasabi.WebClients.Gemini;
+
+namespace WalletWasabi.Fluent.Controls
+{
+ public class TileButton : Button
+ {
+ public static readonly StyledProperty<int> IconSizeProperty =
+ AvaloniaProperty.Register<TileButton, int>(nameof(IconSize), 80);
+
+ public static readonly StyledProperty<string> TextProperty =
+ AvaloniaProperty.Register<TileButton, string>(nameof(Text));
+
+ public static readonly StyledProperty<Geometry> IconProperty =
+ AvaloniaProperty.Register<TileButton, Geometry>(nameof(Icon));
+
+ public int IconSize
+ {
+ get => GetValue(IconSizeProperty);
+ set => SetValue(IconSizeProperty, value);
+ }
+
+ public string Text
+ {
+ get => GetValue(TextProperty);
+ set => SetValue(TextProperty, value);
+ }
+
+ public Geometry Icon
+ {
+ get => GetValue(IconProperty);
+ set => SetValue(IconProperty, value);
+ }
+ }
+}
\ No newline at end of file

MODIFY
WalletWasabi.Fluent/Views/AddWallet/AddWalletPageView.axaml
WalletWasabi.Fluent/Views/AddWallet/AddWalletPageView.axaml
</StackPanel>
<ScrollViewer>
<StackPanel Spacing="10" Margin="0 0 0 20">
- <StackPanel.Styles>
- <Style Selector="Button">
- <Setter Property="HorizontalAlignment" Value="Stretch" />
- <Setter Property="BorderThickness" Value="1" />
- <Setter Property="Padding" Value="0" />
- <Setter Property="IsEnabled" Value="{Binding OptionsEnabled}" />
- <Setter Property="Opacity" Value="{Binding OptionsEnabled, Converter={x:Static conv:BoolOpacityConverters.BoolToOpacity}}" />
- <Setter Property="IsVisible" x:CompileBindings="False" Value="{Binding $self.Opacity, Converter={x:Static conv:BoolOpacityConverters.OpacityToBool}}" />
- </Style>
- <Style Selector="Button.option:disabled /template/ ContentPresenter#PART_ContentPresenter">
- <Setter Property="Background" Value="{DynamicResource OptionButtonBackground}" />
- </Style>
- </StackPanel.Styles>
- <Button Classes="option" Command="{Binding CreateWalletCommand}">
- <StackPanel Orientation="Horizontal">
- <PathIcon DockPanel.Dock="Left" Margin="20" Data="{StaticResource add_regular}" Width="16"
- VerticalAlignment="Center" />
- <TextBlock Text="Create a new wallet" VerticalAlignment="Center" />
- </StackPanel>
- </Button>
-
- <Button Classes="option" Command="{Binding RecoverWalletCommand}">
- <StackPanel Orientation="Horizontal">
- <PathIcon DockPanel.Dock="Left" Margin="20"
- Data="{StaticResource recover_arrow_right_regular}"
- Width="16" VerticalAlignment="Center" />
- <TextBlock Text="Recover a wallet" VerticalAlignment="Center" />
- </StackPanel>
- </Button>
+ <c:TileButton Text="Create a new wallet"
+ Icon="{StaticResource add_regular}"
+ Command="{Binding CreateWalletCommand}"
+ />
+ <!-- <StackPanel.Styles> -->
+ <!-- <Style Selector="Button"> -->
+ <!-- <Setter Property="HorizontalAlignment" Value="Stretch" /> -->
+ <!-- <Setter Property="BorderThickness" Value="1" /> -->
+ <!-- <Setter Property="Padding" Value="0" /> -->
+ <!-- <Setter Property="IsEnabled" Value="{Binding OptionsEnabled}" /> -->
+ <!-- <Setter Property="Opacity" Value="{Binding OptionsEnabled, Converter={x:Static conv:BoolOpacityConverters.BoolToOpacity}}" /> -->
+ <!-- <Setter Property="IsVisible" x:CompileBindings="False" Value="{Binding $self.Opacity, Converter={x:Static conv:BoolOpacityConverters.OpacityToBool}}" /> -->
+ <!-- </Style> -->
+ <!-- <Style Selector="Button.option:disabled /template/ ContentPresenter#PART_ContentPresenter"> -->
+ <!-- <Setter Property="Background" Value="{DynamicResource OptionButtonBackground}" /> -->
+ <!-- </Style> -->
+ <!-- </StackPanel.Styles> -->
- <Button Classes="option" Command="{Binding ImportWalletCommand}">
- <StackPanel Orientation="Horizontal">
- <PathIcon DockPanel.Dock="Left" Margin="20" Data="{StaticResource import_regular}"
- Width="16"
- VerticalAlignment="Center" />
- <TextBlock Text="Import a wallet" VerticalAlignment="Center" />
- </StackPanel>
- </Button>
-
- <Button Classes="option" Command="{Binding ConnectHardwareWalletCommand}">
- <StackPanel Orientation="Horizontal">
- <PathIcon DockPanel.Dock="Left" Margin="20" Data="{StaticResource web_asset_regular}"
- Width="16" VerticalAlignment="Center" />
- <TextBlock Text="Connect to hardware wallet" VerticalAlignment="Center" />
- </StackPanel>
- </Button>
+ <!-- <Button Classes="option" Command="{Binding CreateWalletCommand}"> -->
+ <!-- <StackPanel Orientation="Horizontal"> -->
+ <!-- <PathIcon DockPanel.Dock="Left" Margin="20" Data="{StaticResource add_regular}" Width="16" -->
+ <!-- VerticalAlignment="Center" /> -->
+ <!-- <TextBlock Text="Create a new wallet" VerticalAlignment="Center" /> -->
+ <!-- </StackPanel> -->
+ <!-- </Button> -->
+ <!-- -->
+ <!-- <Button Classes="option" Command="{Binding RecoverWalletCommand}"> -->
+ <!-- <StackPanel Orientation="Horizontal"> -->
+ <!-- <PathIcon DockPanel.Dock="Left" Margin="20" -->
+ <!-- Data="{StaticResource recover_arrow_right_regular}" -->
+ <!-- Width="16" VerticalAlignment="Center" /> -->
+ <!-- <TextBlock Text="Recover a wallet" VerticalAlignment="Center" /> -->
+ <!-- </StackPanel> -->
+ <!-- </Button> -->
+ <!-- -->
+ <!-- <Button Classes="option" Command="{Binding ImportWalletCommand}"> -->
+ <!-- <StackPanel Orientation="Horizontal"> -->
+ <!-- <PathIcon DockPanel.Dock="Left" Margin="20" Data="{StaticResource import_regular}" -->
+ <!-- Width="16" -->
+ <!-- VerticalAlignment="Center" /> -->
+ <!-- <TextBlock Text="Import a wallet" VerticalAlignment="Center" /> -->
+ <!-- </StackPanel> -->
+ <!-- </Button> -->
+ <!-- -->
+ <!-- <Button Classes="option" Command="{Binding ConnectHardwareWalletCommand}"> -->
+ <!-- <StackPanel Orientation="Horizontal"> -->
+ <!-- <PathIcon DockPanel.Dock="Left" Margin="20" Data="{StaticResource web_asset_regular}" -->
+ <!-- Width="16" VerticalAlignment="Center" /> -->
+ <!-- <TextBlock Text="Connect to hardware wallet" VerticalAlignment="Center" /> -->
+ <!-- </StackPanel> -->
+ <!-- </Button> -->
</StackPanel>
</ScrollViewer>
</DockPanel>

TileButton control