PrivacyRing - responsive layout
MODIFY
WalletWasabi.Fluent/ViewModels/Wallets/Home/Tiles/PrivacyRing/PrivacyRingItemViewModel.cs
WalletWasabi.Fluent/ViewModels/Wallets/Home/Tiles/PrivacyRing/PrivacyRingItemViewModel.cs
@@ -10,11 +10,12 @@ public class PrivacyRingItemViewModel : WalletCoinViewModel, IPrivacyRingPreview
{
private const double TotalAngle = 2d * Math.PI;
private const double UprightAngle = Math.PI / 2d;
+ private const double SegmentWidth = 10.0;
public PrivacyRingItemViewModel(PrivacyRingViewModel parent, SmartCoin coin, double start, double end) : base(coin)
{
- var outerRadius = parent.OuterRadius;
- var innerRadius = parent.InnerRadius;
+ var outerRadius = Math.Min(parent.Height / 2, parent.Width / 2);
+ var innerRadius = outerRadius - SegmentWidth;
var arc1Size = new Size(outerRadius, outerRadius);
var arc2Size = new Size(innerRadius, innerRadius);

MODIFY
WalletWasabi.Fluent/ViewModels/Wallets/Home/Tiles/PrivacyRing/PrivacyRingViewModel.cs
WalletWasabi.Fluent/ViewModels/Wallets/Home/Tiles/PrivacyRing/PrivacyRingViewModel.cs
+using Avalonia;
using Avalonia.Controls;
using DynamicData;
using DynamicData.Binding;
@@ -22,14 +23,15 @@ public partial class PrivacyRingViewModel : RoutableViewModel
private readonly SourceList<PrivacyRingItemViewModel> _itemsSourceList = new();
private IObservable<Unit> _coinsUpdated;
[AutoNotify] private PrivacyRingItemViewModel? _selectedItem;
+ [AutoNotify] private double _height;
+ [AutoNotify] private double _width;
+ [AutoNotify] private Thickness _margin;
+ [AutoNotify] private Thickness _negativeMargin;
public PrivacyRingViewModel(WalletViewModel walletViewModel, IObservable<Unit> balanceChanged)
{
Wallet = walletViewModel.Wallet;
- OuterRadius = 240d;
- InnerRadius = 230d;
-
NextCommand = CancelCommand;
PreviewItems.Add(walletViewModel.Tiles.OfType<PrivacyControlTileViewModel>().First());
@@ -52,15 +54,22 @@ public partial class PrivacyRingViewModel : RoutableViewModel
.ObserveOn(RxApp.MainThreadScheduler)
.Subscribe(RefreshCoinsList);
+ this.WhenAnyValue(x => x.Width, x => x.Height)
+ .Subscribe(x =>
+ {
+ var usableHeight = x.Item2;
+ var usableWidth = x.Item1;
+ Margin = new Thickness(usableWidth / 2, usableHeight / 2, 0, 0);
+ NegativeMargin = new Thickness(Margin.Left * -1, Margin.Top * -1, 0, 0);
+ RefreshCoinsList(walletViewModel.Wallet.GetPockets());
+ });
+
SetupCancel(enableCancel: true, enableCancelOnEscape: true, enableCancelOnPressed: true);
}
public ObservableCollectionExtended<PrivacyRingItemViewModel> Items { get; } = new();
public ObservableCollectionExtended<IPrivacyRingPreviewItem> PreviewItems { get; } = new();
- public double OuterRadius { get; }
- public double InnerRadius { get; }
-
public Wallet Wallet { get; }
private void RefreshCoinsList(IEnumerable<Pocket> pockets)

MODIFY
WalletWasabi.Fluent/Views/Wallets/Home/Tiles/PrivacyRing/PrivacyRingView.axaml
WalletWasabi.Fluent/Views/Wallets/Home/Tiles/PrivacyRing/PrivacyRingView.axaml
xmlns:tilesView="using:WalletWasabi.Fluent.Views.Wallets.Home.Tiles"
xmlns:ring="using:WalletWasabi.Fluent.ViewModels.Wallets.Home.Tiles.PrivacyRing"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
- x:Class="WalletWasabi.Fluent.Views.Wallets.Home.Tiles.PrivacyRing.PrivacyRingView">
+ x:Class="WalletWasabi.Fluent.Views.Wallets.Home.Tiles.PrivacyRing.PrivacyRingView"
+ x:Name="View">
<UserControl.Styles>
<Style Selector="Path:pointerover">
<Setter Property="StrokeThickness" Value="1" />
EnableNext="True" NextContent="Done"
EnableCancel="False"
EnableBack="True"
- Caption="Hover over the ring segments to see coin details">
- <Panel>
- <ListBox Items="{Binding Items}" ClipToBounds="False" Margin="240 240 0 0" HorizontalAlignment="Center"
+ Caption="Hover over the ring segments to see coin details"
+ ScrollViewer.VerticalScrollBarVisibility="Disabled"
+ ScrollViewer.HorizontalScrollBarVisibility="Disabled">
+ <Panel x:Name="Panel">
+ <i:Interaction.Behaviors>
+ <behaviors:BoundsObserverBehavior Bounds="{Binding #Panel.Bounds, Mode=OneWay}"
+ Width="{Binding Width, Mode=TwoWay}"
+ Height="{Binding Height, Mode=TwoWay}" />
+ </i:Interaction.Behaviors>
+
+ <ListBox Items="{Binding Items}" ClipToBounds="False"
SelectedItem="{Binding SelectedItem}"
- x:Name="Ring">
+ x:Name="Ring" Margin="{Binding Margin}">
<i:Interaction.Behaviors>
<behaviors:ListBoxPreviewBehavior PreviewItem="{Binding SelectedItem, Mode=TwoWay}" Delay="1000" />
<behaviors:ItemsControlAnimationBehavior />
<ControlTemplate TargetType="ListBox">
<Panel>
<!-- "transparent" Border used for MouseMove -->
- <Border Background="White" Margin="-240 -240 0 0" Opacity="0.0001" />
+ <Border Background="White" Margin="{Binding NegativeMargin}" Opacity="0.0001" />
<ItemsPresenter Name="PART_ItemsPresenter"
Items="{TemplateBinding Items}"
ItemsPanel="{TemplateBinding ItemsPanel}"
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
- <Path Stretch="None" Height="{Binding OuterRadius}" Width="{Binding OuterRadius}"
+ <Path Stretch="None" Height="{Binding Height}" Width="{Binding Width}"
Data="{Binding Data}"
Classes.private="{Binding IsPrivate}"
Classes.semiPrivate="{Binding IsSemiPrivate}"

PrivacyRing - responsive layout