initial tiles ui implementations.
MODIFY
WalletWasabi.Fluent/ViewModels/LineChartDemo/XYLineChartViewModel.cs
WalletWasabi.Fluent/ViewModels/LineChartDemo/XYLineChartViewModel.cs
@@ -20,18 +20,26 @@ namespace WalletWasabi.Fluent.ViewModels.LineChartDemo
1,
};
+ public List<string> XAxisLabels => new List<string>()
+ {
+ "Jan," +
+ "Feb," +
+ "March",
+ "April"
+ };
+
public List<double> YAxisValues => new()
{
- 4,
- 4,
- 7,
- 22,
- 57,
- 97,
- 102,
- 123,
- 123,
- 185
+ 0.2,
+ 0.81,
+ 2.23,
+ 2.12,
+ 1.8,
+ 1.33,
+ 3.33,
+ 4.44,
+ 4.21,
+ 4.01
};
}
}

ADD
WalletWasabi.Fluent/Views/Wallets/Home/Tiles/WalletBalanceChartTileView.axaml
+<UserControl xmlns="https://github.com/avaloniaui"
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+ xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+ xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+ xmlns:c="using:WalletWasabi.Fluent.Controls"
+ xmlns:vm="using:WalletWasabi.Fluent.ViewModels.LineChartDemo"
+ mc:Ignorable="d" d:DesignWidth="620" d:DesignHeight="310"
+ x:Class="WalletWasabi.Fluent.Views.Wallets.Home.Tiles.WalletBalanceChartTileView">
+ <UserControl.DataContext>
+ <vm:XYLineChartViewModel/>
+ </UserControl.DataContext>
+ <UserControl.Styles>
+ <!-- LineChart Area -->
+ <Style Selector="c|LineChart.area">
+ <Setter Property="AreaMargin" Value="0"/>
+ <Setter Property="AreaStrokeThickness" Value="2"/>
+ <Setter Property="AreaStrokeLineCap" Value="Round"/>
+ <Setter Property="AreaMinViableWidth" Value="40"/>
+ <Setter Property="AreaMinViableHeight" Value="20"/>
+ <Setter Property="AreaFill">
+ <SolidColorBrush Color="#72BD81" Opacity="0.2"/>
+ </Setter>
+ <Setter Property="AreaStroke">
+ <SolidColorBrush Color="#72BD81" Opacity="1.0"/>
+ </Setter>
+ </Style>
+ <!-- LineChart Border -->
+ <Style Selector="c|LineChart.border">
+ <Setter Property="BorderThickness" Value="1" />
+ <Setter Property="BorderRadiusX" Value="1" />
+ <Setter Property="BorderRadiusY" Value="1" />
+ </Style>
+ <!-- LineChart XAxis -->
+ <Style Selector="c|LineChart.xAxis">
+ <Setter Property="XAxisOffset" Value="0,0" />
+ <Setter Property="XAxisOpacity" Value="1.0" />
+ <Setter Property="XAxisStrokeThickness" Value="0.7" />
+ <Setter Property="XAxisArrowSize" Value="3.5" />
+ <Setter Property="XAxisMinViableWidth" Value="0"/>
+ <Setter Property="XAxisMinViableHeight" Value="0"/>
+ </Style>
+ <!-- LineChart XAxis Labels -->
+ <Style Selector="c|LineChart.xAxisLabels">
+ <Setter Property="XAxisLabelForeground" Value="{DynamicResource TextForegroundColor}" />
+ <Setter Property="XAxisLabelAngle" Value="0" />
+ <Setter Property="XAxisLabelOffset" Value="0,10" />
+ <Setter Property="XAxisLabelAlignment" Value="Center" />
+ <Setter Property="XAxisLabelFontSize" Value="10" />
+ <Setter Property="XAxisLabelOpacity" Value="0.8" />
+ </Style>
+ <!-- LineChart YAxis -->
+ <Style Selector="c|LineChart.yAxis">
+ <Setter Property="YAxisOffset" Value="0,0" />
+ <Setter Property="YAxisOpacity" Value="1.0" />
+ <Setter Property="YAxisStroke" Value="{DynamicResource TextForegroundColor}" />
+ <Setter Property="YAxisStrokeThickness" Value="0" />
+ <Setter Property="YAxisArrowSize" Value="3.5" />
+ <Setter Property="YAxisMinViableWidth" Value="0"/>
+ <Setter Property="YAxisMinViableHeight" Value="0"/>
+ </Style>
+ <!-- LineChart YAxis Labels -->
+ <Style Selector="c|LineChart.yAxisLabels">
+ <Setter Property="YAxisLabelForeground" Value="{DynamicResource TextForegroundColor}" />
+ <Setter Property="YAxisLabelAngle" Value="0" />
+ <Setter Property="YAxisLabelOffset" Value="-10,0" />
+ <Setter Property="YAxisLabelAlignment" Value="Right" />
+ <Setter Property="YAxisLabelFontSize" Value="10" />
+ <Setter Property="YAxisLabelOpacity" Value="0.8" />
+ </Style>
+ </UserControl.Styles>
+ <Border ClipToBounds="False" CornerRadius="5" Background="#2b2b2b" Margin="6" Padding="16" BoxShadow="{DynamicResource InfoBoxShadow}">
+ <DockPanel>
+ <TextBlock Text="Balance over time" DockPanel.Dock="Top" />
+ <c:LineChart x:Name="GradientLineChart" DockPanel.Dock="Left" Margin="30"
+ Classes="area border xAxis xAxisLabels yAxis yAxisLabels"
+ XAxisLabels="{Binding XAxisLabels}"
+ XAxisValues="{Binding XAxisValues}"
+ YAxisValues="{Binding YAxisValues}">
+ </c:LineChart>
+ </DockPanel>
+ </Border>
+</UserControl>

ADD
WalletWasabi.Fluent/Views/Wallets/Home/Tiles/WalletBalanceChartTileView.axaml.cs
+using System.Collections.Generic;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using WalletWasabi.Fluent.ViewModels;
+
+namespace WalletWasabi.Fluent.Views.Wallets.Home.Tiles
+{
+ public partial class WalletBalanceChartTileViewModel : ViewModelBase
+ {
+ public List<double> YValues { get; } = new List<double> {0.25, 0.34, 0.79, 0.98, 1.2, 0.75, 0.68, 1.57};
+
+ public List<double> XValues { get; } = new List<double> {0.25, 0.34, 0.79, 0.98, 1.2, 0.75, 0.68, 1.57};
+ }
+
+ public class WalletBalanceChartTileView : UserControl
+ {
+ public WalletBalanceChartTileView()
+ {
+ InitializeComponent();
+ }
+
+ private void InitializeComponent()
+ {
+ AvaloniaXamlLoader.Load(this);
+ }
+ }
+}
\ No newline at end of file

ADD
WalletWasabi.Fluent/Views/Wallets/Home/Tiles/WalletBalanceTileView.axaml.cs
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace WalletWasabi.Fluent.Views.Wallets.Home.Tiles
+{
+ public class WalletBalanceTileView : UserControl
+ {
+ public WalletBalanceTileView()
+ {
+ InitializeComponent();
+ }
+
+ private void InitializeComponent()
+ {
+ AvaloniaXamlLoader.Load(this);
+ }
+ }
+}
\ No newline at end of file

MODIFY
WalletWasabi.Fluent/Views/Wallets/WalletView.axaml
WalletWasabi.Fluent/Views/Wallets/WalletView.axaml
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="clr-namespace:WalletWasabi.Fluent.Controls"
xmlns:wallets="clr-namespace:WalletWasabi.Fluent.ViewModels.Wallets"
- mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+ xmlns:tiles="using:WalletWasabi.Fluent.Views.Wallets.Home.Tiles"
+ mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="850"
x:DataType="wallets:WalletViewModel"
x:CompileBindings="True"
x:Class="WalletWasabi.Fluent.Views.Wallets.WalletView">
<controls:ContentArea Title="{Binding Title}"
- Caption="Wallet Home Page, currently under construction." />
+ Caption="Wallet Home Page, currently under construction.">
+ <StackPanel Spacing="0">
+ <tiles:WalletBalanceTileView VerticalAlignment="Top" HorizontalAlignment="Left" Width="310" Height="150" />
+ <tiles:WalletBalanceChartTileView VerticalAlignment="Top" HorizontalAlignment="Left" Width="620" Height="310" />
+ </StackPanel>
+
+ </controls:ContentArea>
</UserControl>

initial tiles ui implementations.