Use new tile view model for layout with BindableGrid control
MODIFY
WalletWasabi.Fluent/ViewModels/Wallets/Home/Tiles/TileViewModel.cs
WalletWasabi.Fluent/ViewModels/Wallets/Home/Tiles/TileViewModel.cs
-using System.Collections.Generic;
-using System.Reactive.Disposables;
+using System;
+using System.Collections.ObjectModel;
+using ReactiveUI;
namespace WalletWasabi.Fluent.ViewModels.Wallets.Home.Tiles
{
public abstract partial class TileViewModel : ActivatableViewModel
{
- [AutoNotify] private IList<int>? _columnSpan;
- [AutoNotify] private IList<int>? _rowSpan;
+ [AutoNotify] private ObservableCollection<TilePresetViewModel>? _tilePresets;
+ [AutoNotify] private int _tilePresetIndex;
+
+ protected TileViewModel()
+ {
+ this.WhenAnyValue(x => x.TilePresetIndex)
+ .Subscribe(_ => NotifyPresetChanged());
+ }
+
+ public int Column => CurrentTilePreset?.Column ?? 0;
+
+ public int Row => CurrentTilePreset?.Row ?? 0;
+
+ public int ColumnSpan => CurrentTilePreset?.ColumnSpan ?? 1;
+
+ public int RowSpan => CurrentTilePreset?.RowSpan ?? 1;
+
+ public TilePresetViewModel? CurrentTilePreset => TilePresets?[TilePresetIndex];
+
+ private void NotifyPresetChanged()
+ {
+ this.RaisePropertyChanged(nameof(CurrentTilePreset));
+ this.RaisePropertyChanged(nameof(Column));
+ this.RaisePropertyChanged(nameof(Row));
+ this.RaisePropertyChanged(nameof(ColumnSpan));
+ this.RaisePropertyChanged(nameof(RowSpan));
+ }
}
}
\ No newline at end of file

MODIFY
WalletWasabi.Fluent/ViewModels/Wallets/WalletViewModel.cs
WalletWasabi.Fluent/ViewModels/Wallets/WalletViewModel.cs
using ReactiveUI;
using System;
using System.Collections.Generic;
+using System.Collections.ObjectModel;
using System.Reactive;
using System.Reactive.Concurrency;
using System.Reactive.Disposables;
@@ -19,7 +20,9 @@ namespace WalletWasabi.Fluent.ViewModels.Wallets
{
public partial class WalletViewModel : WalletViewModelBase
{
- [AutoNotify] private IList<TileViewModel> _tiles;
+ [AutoNotify] private IList<TileViewModel>? _tiles;
+ [AutoNotify] private IList<TileLayoutViewModel>? _layouts;
+ [AutoNotify] private int _layoutIndex;
protected WalletViewModel(Wallet wallet) : base(wallet)
{
@@ -41,30 +44,64 @@ namespace WalletWasabi.Fluent.ViewModels.Wallets
History = new HistoryViewModel(this, balanceChanged);
+ Layouts = new ObservableCollection<TileLayoutViewModel>()
+ {
+ new("Small", "330,330,330,330,330", "150"),
+ new("Normal", "330,330,330", "150,300"),
+ new("Wide", "330,330", "150,300,300")
+ };
+
+ LayoutIndex = 1;
+
BalanceTile = new WalletBalanceTileViewModel(wallet, balanceChanged)
{
- ColumnSpan = new List<int> { 1, 1, 1 },
- RowSpan = new List<int> { 1, 1, 1 }
+ TilePresets = new ObservableCollection<TilePresetViewModel>()
+ {
+ new(0, 0, 1, 1),
+ new(0, 0, 1, 1),
+ new(0, 0, 1, 1)
+ },
+ TilePresetIndex = LayoutIndex
};
RoundStatusTile = new RoundStatusTileViewModel(wallet)
{
- ColumnSpan = new List<int> { 1, 1, 1 },
- RowSpan = new List<int> { 1, 1, 1 }
+ TilePresets = new ObservableCollection<TilePresetViewModel>()
+ {
+ new(1, 0, 1, 1),
+ new(1, 0, 1, 1),
+ new(1, 0, 1, 1)
+ },
+ TilePresetIndex = LayoutIndex
};
BtcPriceTile = new BtcPriceTileViewModel(wallet)
{
- ColumnSpan = new List<int> { 1, 1, 1 },
- RowSpan = new List<int> { 1, 1, 1 }
+ TilePresets = new ObservableCollection<TilePresetViewModel>()
+ {
+ new(2, 0, 1, 1),
+ new(2, 0, 1, 1),
+ new(0, 1, 1, 1)
+ },
+ TilePresetIndex = LayoutIndex
};
WalletPieChart = new WalletPieChartTileViewModel(wallet, balanceChanged)
{
- ColumnSpan = new List<int> { 1, 1, 1 },
- RowSpan = new List<int> { 1, 2, 2 }
+ TilePresets = new ObservableCollection<TilePresetViewModel>()
+ {
+ new(3, 0, 1, 1),
+ new(0, 1, 1, 1),
+ new(1, 1, 1, 1)
+ },
+ TilePresetIndex = LayoutIndex
};
BalanceChartTile = new WalletBalanceChartTileViewModel(History.UnfilteredTransactions)
{
- ColumnSpan = new List<int> { 2, 2, 2 },
- RowSpan = new List<int> { 1, 2, 2 }
+ TilePresets = new ObservableCollection<TilePresetViewModel>()
+ {
+ new(4, 0, 1, 1),
+ new(1, 1, 2, 1),
+ new(0, 2, 2, 1)
+ },
+ TilePresetIndex = LayoutIndex
};
_tiles = new List<TileViewModel>
@@ -76,6 +113,12 @@ namespace WalletWasabi.Fluent.ViewModels.Wallets
BalanceChartTile
};
+ this.WhenAnyValue(x => x.LayoutIndex)
+ .Subscribe(_ => NotifyLayoutChanged());
+
+ this.WhenAnyValue(x => x.LayoutIndex)
+ .Subscribe(_ => UpdateTiles());
+
SendCommand = ReactiveCommand.Create(() =>
{
Navigate(NavigationTarget.DialogScreen)
@@ -107,6 +150,24 @@ namespace WalletWasabi.Fluent.ViewModels.Wallets
public WalletBalanceChartTileViewModel BalanceChartTile { get; }
+ public TileLayoutViewModel? CurrentLayout => Layouts?[LayoutIndex];
+
+ private void NotifyLayoutChanged()
+ {
+ this.RaisePropertyChanged(nameof(CurrentLayout));
+ }
+
+ private void UpdateTiles()
+ {
+ if (Tiles != null)
+ {
+ foreach (var tile in Tiles)
+ {
+ tile.TilePresetIndex = LayoutIndex;
+ }
+ }
+ }
+
public void NavigateAndHighlight(uint256 txid)
{
Navigate().To(this, NavigationMode.Clear);

MODIFY
WalletWasabi.Fluent/Views/Wallets/WalletView.axaml
WalletWasabi.Fluent/Views/Wallets/WalletView.axaml
</c:ContentArea.Title>
<DockPanel VerticalAlignment="Top">
-
<ScrollViewer Name="ScrollViewer"
DockPanel.Dock="Top"
- Width="{Binding #HistoryTable.Bounds.Width}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
- ScrollViewer.HorizontalScrollBarVisibility="Auto"
- ScrollViewer.VerticalScrollBarVisibility="Disabled">
- <ItemsRepeater Items="{Binding Tiles}"
+ HorizontalScrollBarVisibility="Auto"
+ VerticalScrollBarVisibility="Auto">
+ <ItemsControl Items="{Binding Tiles}"
DockPanel.Dock="Top"
Margin="0 0"
HorizontalAlignment="Left"
- VerticalAlignment="Top"
- UseLayoutRounding="False">
- <ItemsRepeater.Styles>
- <Style Selector="ItemsRepeater > :is(Control)" x:DataType="tiles:TileViewModel">
- <Setter Property="(c:NonVirtualizingResponsiveLayout.ColumnSpan)"
- Value="{Binding ColumnSpan}" />
- <Setter Property="(c:NonVirtualizingResponsiveLayout.RowSpan)" Value="{Binding RowSpan}" />
+ VerticalAlignment="Top">
+ <ItemsControl.Styles>
+ <Style Selector="ItemsControl > ContentPresenter" x:DataType="tiles:TileViewModel">
+ <Setter Property="Grid.Column" Value="{Binding Column}" />
+ <Setter Property="Grid.Row" Value="{Binding Row}" />
+ <Setter Property="Grid.ColumnSpan" Value="{Binding ColumnSpan}" />
+ <Setter Property="Grid.RowSpan" Value="{Binding RowSpan}" />
</Style>
- </ItemsRepeater.Styles>
- <ItemsRepeater.ItemTemplate>
+ </ItemsControl.Styles>
+ <ItemsControl.ItemsPanel>
+ <ItemsPanelTemplate>
+ <c:BindableGrid ColumnDefinitionsSource="{Binding CurrentLayout.ColumnDefinitions}"
+ RowDefinitionsSource="{Binding CurrentLayout.RowDefinitions}"
+ ShowGridLines="False" />
+ </ItemsPanelTemplate>
+ </ItemsControl.ItemsPanel>
+ <ItemsControl.ItemTemplate>
<locator:ViewLocator />
- </ItemsRepeater.ItemTemplate>
- <ItemsRepeater.Layout>
- <c:NonVirtualizingResponsiveLayout ItemWidth="330"
- ItemHeight="150"
- WidthSource="{Binding #ScrollViewer.Bounds.Width}"
- AspectRatio="NaN"
- ColumnHints="3, 3, 3"
- WidthTriggers="300, 660, 990" />
- </ItemsRepeater.Layout>
- </ItemsRepeater>
-
+ </ItemsControl.ItemTemplate>
+ </ItemsControl>
</ScrollViewer>
<history:HistoryTable Name="HistoryTable" DataContext="{Binding History}" MaxWidth="1000"
HorizontalAlignment="Left" VerticalAlignment="Top" />

Use new tile view model for layout with BindableGrid control