Add OpacityMasks
MODIFY
WalletWasabi.Fluent/Styles/ScrollViewer.axaml
WalletWasabi.Fluent/Styles/ScrollViewer.axaml
<Design.PreviewWith>
<Grid ColumnDefinitions="*,20,*"
- Height="300"
+ Height="200"
Width="200"
Margin="20">
<ScrollViewer>
- <Border Height="1000" Background="#ccc"/>
+ <ItemsControl>
+ <TextBlock>Item 1</TextBlock>
+ <TextBlock>Item 1</TextBlock>
+ <TextBlock>Item 1</TextBlock>
+ <TextBlock>Item 1</TextBlock>
+ <TextBlock>Item 1</TextBlock>
+ <TextBlock>Item 1</TextBlock>
+ <TextBlock>Item 1</TextBlock>
+ <TextBlock>Item 1</TextBlock>
+ <TextBlock>Item 1</TextBlock>
+ <TextBlock>Item 1</TextBlock>
+ <TextBlock>Item 1</TextBlock>
+ <TextBlock>Item 1</TextBlock>
+ <TextBlock>Item 1</TextBlock>
+ <TextBlock>Item 1</TextBlock>
+ <TextBlock>Item 1</TextBlock>
+ <TextBlock>Item 1</TextBlock>
+ </ItemsControl>
</ScrollViewer>
<ScrollViewer Grid.Column="2">
<Border Height="1000" Background="#ccc"/>
<Setter Property="Template">
<ControlTemplate>
<Grid ColumnDefinitions="*,Auto" RowDefinitions="*,Auto">
+
<ScrollContentPresenter Name="PART_ContentPresenter"
Grid.Row="0"
Grid.Column="0"
Margin="{TemplateBinding Padding}"
Offset="{TemplateBinding Offset, Mode=TwoWay}"
Viewport="{TemplateBinding Viewport, Mode=TwoWay}">
+
+ <Classes.bottomCue>
+ <MultiBinding Converter="{x:Static BoolConverters.And}">
+ <Binding Path="#BottomCue.IsVisible" />
+ <Binding Path="!#TopCue.IsVisible" />
+ </MultiBinding>
+ </Classes.bottomCue>
+ <Classes.topCue>
+ <MultiBinding Converter="{x:Static BoolConverters.And}">
+ <Binding Path="!#BottomCue.IsVisible" />
+ <Binding Path="#TopCue.IsVisible" />
+ </MultiBinding>
+ </Classes.topCue>
+ <Classes.bothCues>
+ <MultiBinding Converter="{x:Static BoolConverters.And}">
+ <Binding Path="#BottomCue.IsVisible" />
+ <Binding Path="#TopCue.IsVisible" />
+ </MultiBinding>
+ </Classes.bothCues>
+
+ <ScrollContentPresenter.Styles>
+ <Style Selector="ScrollContentPresenter.bottomCue">
+ <Setter Property="OpacityMask">
+ <Setter.Value>
+ <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+ <GradientStop Color="Black" Offset="0.9" />
+ <GradientStop Color="Transparent" Offset="1" />
+ </LinearGradientBrush>
+ </Setter.Value>
+ </Setter>
+ </Style>
+ <Style Selector="ScrollContentPresenter.topCue">
+ <Setter Property="OpacityMask">
+ <Setter.Value>
+ <LinearGradientBrush StartPoint="0%,100%" EndPoint="0%,0%">
+ <GradientStop Color="Black" Offset="0.9"></GradientStop>
+ <GradientStop Color="Transparent" Offset="1"></GradientStop>
+ </LinearGradientBrush>
+ </Setter.Value>
+ </Setter>
+ </Style>
+ <Style Selector="ScrollContentPresenter.bothCues">
+ <Setter Property="OpacityMask">
+ <Setter.Value>
+ <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+ <GradientStop Color="#00000000" Offset="0.0"></GradientStop>
+ <GradientStop Color="Black" Offset="0.2"></GradientStop>
+ <GradientStop Color="Black" Offset="0.8"></GradientStop>
+ <GradientStop Color="#00000000" Offset="1"></GradientStop>
+ </LinearGradientBrush>
+ </Setter.Value>
+ </Setter>
+ </Style>
+ </ScrollContentPresenter.Styles>
+
<ScrollContentPresenter.GestureRecognizers>
<ScrollGestureRecognizer
CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" />
</ScrollContentPresenter.GestureRecognizers>
</ScrollContentPresenter>
+
<ScrollBar Name="PART_HorizontalScrollBar"
+ MaxHeight="10"
+ MinHeight="2"
AllowAutoHide="{TemplateBinding AllowAutoHide}"
Orientation="Horizontal"
LargeChange="{Binding LargeChange.Width, RelativeSource={RelativeSource TemplatedParent}}"
Grid.Row="1"
Focusable="False" />
<ScrollBar Name="PART_VerticalScrollBar"
+ MaxWidth="10"
+ MinWidth="2"
AllowAutoHide="{TemplateBinding AllowAutoHide}"
Orientation="Vertical"
LargeChange="{Binding LargeChange.Height, RelativeSource={RelativeSource TemplatedParent}}"
<Panel x:Name="PART_ScrollBarsSeparator" Grid.Row="1" Grid.Column="1" Background="{DynamicResource ScrollViewerScrollBarsSeparatorBackground}" />
<!-- Scroll hints -->
- <Viewbox Classes="ScrollViewerCuePath" VerticalAlignment="Top">
+ <Viewbox x:Name="TopCue" Classes="ScrollViewerCuePath" VerticalAlignment="Top">
<Viewbox.IsVisible>
<MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
ConverterParameter="0">
<Path Data="M 0 4 L 8 4 L 4 0 Z" Classes="ScrollViewerCuePath"/>
</Viewbox>
- <Viewbox Classes="ScrollViewerCuePath" Stretch="Fill" Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="0" VerticalAlignment="Bottom" >
+ <Viewbox x:Name="BottomCue" Classes="ScrollViewerCuePath" Stretch="Fill" Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="0" VerticalAlignment="Bottom" >
<Viewbox.IsVisible>
<MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
ConverterParameter="100">
</Style>
<Style Selector="Path.ScrollViewerCuePath">
- <Setter Property="Stroke" Value="{StaticResource SystemBaseMediumLowColor}" />
- <Setter Property="Fill" Value="{StaticResource SystemBaseMediumHighColor}"></Setter>
- <Setter Property="StrokeThickness" Value="1" />
+ <Setter Property="Fill" Value="{StaticResource AcrylicTrimForeground}"></Setter>
</Style>
<Style Selector="Viewbox.ScrollViewerCuePath">

MODIFY
WalletWasabi.Fluent/Views/NavBar/NavBar.axaml
WalletWasabi.Fluent/Views/NavBar/NavBar.axaml
</Style>
</UserControl.Styles>
- <DockPanel Margin="0 -5 0 5">
+ <DockPanel Margin="0 0 0 5">
<DockPanel Background="Transparent" DockPanel.Dock="Bottom">
<c:NavBarListBox Items="{Binding BottomItems}"
SelectedItem="{Binding SelectedItem, Mode=TwoWay}"

Add OpacityMasks