Use a custom control to manage navbar items title fadeout.
ADD
WalletWasabi.Fluent/Controls/FadeOutTextBlock.cs
+using System.Reactive.Linq;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+using Avalonia.Media;
+using Avalonia.Styling;
+using Avalonia.VisualTree;
+using ReactiveUI;
+
+namespace WalletWasabi.Fluent.Controls;
+
+public class FadeOutTextBlock : TextBlock, IStyleable
+{
+ public Type StyleKey { get; } = typeof(TextBlock);
+
+ public FadeOutTextBlock()
+ {
+ TextWrapping = TextWrapping.NoWrap;
+ }
+
+ private static IBrush FadeoutOpacityMask = new LinearGradientBrush
+ {
+ StartPoint = new RelativePoint(0, 0, RelativeUnit.Relative),
+ EndPoint = new RelativePoint(1, 0, RelativeUnit.Relative),
+ GradientStops =
+ {
+ new GradientStop {Color = Colors.White, Offset = 0},
+ new GradientStop {Color = Colors.White, Offset = 0.7},
+ new GradientStop {Color = Colors.Transparent, Offset = 1}
+ }
+ }.ToImmutable();
+
+ public override void Render(DrawingContext context)
+ {
+ var background = Background;
+
+ if (background != null)
+ {
+ context.FillRectangle(background, new Rect(Bounds.Size));
+ }
+
+ if (TextLayout == null)
+ {
+ return;
+ }
+
+ var textWidth = TextLayout.Size.Width;
+ var constraints = Bounds.Deflate(Padding);
+ var constraintsWidth = constraints.Width;
+ var isConstrained = textWidth >= constraintsWidth;
+
+ if (isConstrained)
+ {
+ using var sd = context.PushOpacityMask(FadeoutOpacityMask, constraints);
+ TextLayout.Draw(context);
+ }
+ else
+ {
+ TextLayout.Draw(context);
+ }
+ }
+}
\ No newline at end of file

MODIFY
WalletWasabi.Fluent/Views/NavBar/NavBar.axaml
WalletWasabi.Fluent/Views/NavBar/NavBar.axaml
</Style>
<Style Selector=":is(Panel).NavBarItemPanel DockPanel TextBlock">
+ <Setter Property="TextAlignment" Value="Center" />
+ <Setter Property="Margin" Value="8,5,8, 0" />
<Setter Property="FontSize" Value="{StaticResource FontSizeH9}" />
</Style>
<Setter Property="Fill" Value="{DynamicResource CoinjoinActiveColor}" />
</Style>
- <Style Selector=":is(Panel).NavBarItemPanel.wallets" x:DataType="vmw:WalletViewModelBase">
- <Setter Property="ToolTip.Tip" Value="{Binding Title}" />
- </Style>
-
- <Style Selector=":is(Panel).NavBarItemPanel.utilities" x:DataType="vm:NavBarItemViewModel">
- <Setter Property="ToolTip.Tip" Value="{Binding Title}" />
- </Style>
<Style Selector="c|NavBarItem :is(Panel).NavBarItemPanel DockPanel LayoutTransformControl">
<Setter Property="LayoutTransform" Value="scaleY(1)" />
<Setter Property="Opacity" Value="1" />
+ <Setter Property="Margin" Value="10, 0" />
<Setter Property="Transitions">
<Transitions>
<TransformOperationsTransition Property="LayoutTransform" Duration="0:0:0.175" />
</Setter>
</Style>
+ <Style Selector=":is(Panel).NavBarItemPanel DockPanel TextBlock">
+ <Setter Property="TextWrapping" Value="NoWrap" />
+ <Setter Property="TextTrimming" Value="None" />
+ <Setter Property="HorizontalAlignment" Value="Center" />
+ </Style>
+
<Style Selector="c|NavBarItem:selected :is(Panel).NavBarItemPanel DockPanel LayoutTransformControl">
<Setter Property="LayoutTransform" Value="scaleY(0)" />
<Setter Property="Opacity" Value="0" />
</c:NavBarListBox.ItemsPanel>
<c:NavBarListBox.DataTemplates>
<DataTemplate DataType="vm:NavBarItemViewModel">
- <Panel Classes="NavBarItemPanel utilities">
+ <Panel Classes="NavBarItemPanel utilities" ToolTip.Tip="{Binding Title}">
<DockPanel>
<LayoutTransformControl DockPanel.Dock="Bottom">
- <Panel HorizontalAlignment="Stretch" Margin="5 5 5 0">
- <Panel.OpacityMask>
- <LinearGradientBrush StartPoint="100%,0%" EndPoint="80%,0%">
- <LinearGradientBrush.GradientStops>
- <GradientStop Color="#00FFFFFF" Offset="0.1" />
- <GradientStop Color="#FFFFFFFF" Offset="1" />
- </LinearGradientBrush.GradientStops>
- </LinearGradientBrush>
- </Panel.OpacityMask>
- <TextBlock Text="{Binding Title}" HorizontalAlignment="Stretch" TextAlignment="Center" TextTrimming="CharacterEllipsis" />
- </Panel>
+ <c:FadeOutTextBlock Text="{Binding Title}" />
</LayoutTransformControl>
<Panel>
<Image Source="{Binding IconName, Converter={x:Static conv:NavBarIconConverter.Instance}}" />
VerticalAlignment="Stretch">
<c:NavBarListBox.DataTemplates>
<DataTemplate DataType="vmw:WalletViewModelBase">
- <Panel Classes="NavBarItemPanel wallets">
+ <Panel Classes="NavBarItemPanel wallets" ToolTip.Tip="{Binding Title}">
<Ellipse Classes.isLoading="{Binding IsLoading}"
Classes.isLoggedIn="{Binding IsLoggedIn}"
Classes.isCoinjoining="{Binding IsCoinJoining}" />
<DockPanel>
<LayoutTransformControl DockPanel.Dock="Bottom">
- <Panel HorizontalAlignment="Stretch" Margin="5 5 5 0">
- <Panel.OpacityMask>
- <LinearGradientBrush StartPoint="100%,0%" EndPoint="80%,0%">
- <LinearGradientBrush.GradientStops>
- <GradientStop Color="#00FFFFFF" Offset="0.1" />
- <GradientStop Color="#FFFFFFFF" Offset="1" />
- </LinearGradientBrush.GradientStops>
- </LinearGradientBrush>
- </Panel.OpacityMask>
- <TextBlock Text="{Binding Title}" HorizontalAlignment="Stretch" TextAlignment="Center" TextTrimming="CharacterEllipsis" />
- </Panel>
+ <c:FadeOutTextBlock Text="{Binding Title}" />
</LayoutTransformControl>
<Panel>
<Image Source="{Binding IconName, Converter={x:Static conv:NavBarIconConverter.Instance}}" />

Use a custom control to manage navbar items title fadeout.