Refine nav state visuals with active icon highlight

This commit is contained in:
Meik
2026-03-05 11:32:05 +01:00
parent 9e4dab398f
commit a2ea0ca204
2 changed files with 146 additions and 68 deletions

View File

@@ -212,7 +212,7 @@
<EventSetter Event="Loaded"
Handler="Button_Loaded" />
<Setter Property="Background"
Value="{DynamicResource inactiveButtonColor}" />
Value="Transparent" />
<Setter Property="Foreground"
Value="{DynamicResource navForeground}" />
<Setter Property="BorderBrush"
@@ -525,6 +525,7 @@
<Border Visibility="Hidden"
Tag="ActiveIndicator"
Panel.ZIndex="1001"
Opacity="0"
Width="4"
Height="34"
HorizontalAlignment="Right"
@@ -542,17 +543,31 @@
ClipToBounds="False"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Image Source="{DynamicResource nav_appbar_newspaper}"
Panel.ZIndex="18"
Tag="ICO"
Style="{StaticResource ImageStyle}"
x:Name="icoAnn"
Stretch="Fill"
Width="34"
Height="34"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="14" />
<Grid Width="34"
Height="34"
Margin="14">
<Image Source="{DynamicResource nav_appbar_newspaper}"
Panel.ZIndex="18"
Tag="ICO"
Style="{StaticResource ImageStyle}"
x:Name="icoAnn"
Stretch="Fill"
Width="34"
Height="34"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
<Rectangle Tag="ActiveIcon"
Visibility="Hidden"
Panel.ZIndex="19"
Width="34"
Height="34"
Fill="{DynamicResource accentColor}">
<Rectangle.OpacityMask>
<ImageBrush ImageSource="{DynamicResource nav_appbar_newspaper}"
Stretch="Fill" />
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
<Image Source="Resources/StateOverlays/OverlayNewContentButton.png"
Visibility="Collapsed"
Panel.ZIndex="18"
@@ -585,6 +600,7 @@
<Border Visibility="Hidden"
Tag="ActiveIndicator"
Panel.ZIndex="1001"
Opacity="0"
Width="4"
Height="34"
HorizontalAlignment="Right"
@@ -600,15 +616,29 @@
<StackPanel x:Name="StackPanel"
Orientation="Horizontal"
Background="Transparent">
<Image Source="{DynamicResource nav_appbar_clipboard_variant_text}"
x:Name="icoInc"
Tag="ICO"
Stretch="fill"
Panel.ZIndex="18"
Style="{StaticResource ImageStyle}"
Width="34"
Height="34"
Margin="14" />
<Grid Width="34"
Height="34"
Margin="14">
<Image Source="{DynamicResource nav_appbar_clipboard_variant_text}"
x:Name="icoInc"
Tag="ICO"
Stretch="fill"
Panel.ZIndex="18"
Style="{StaticResource ImageStyle}"
Width="34"
Height="34" />
<Rectangle Tag="ActiveIcon"
Visibility="Hidden"
Panel.ZIndex="19"
Width="34"
Height="34"
Fill="{DynamicResource accentColor}">
<Rectangle.OpacityMask>
<ImageBrush ImageSource="{DynamicResource nav_appbar_clipboard_variant_text}"
Stretch="Fill" />
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
<Image Source="Resources/StateOverlays/OverlayNewContentButton.png"
Visibility="Collapsed"
Panel.ZIndex="18"
@@ -641,6 +671,7 @@
<Border Visibility="Hidden"
Tag="ActiveIndicator"
Panel.ZIndex="1001"
Opacity="0"
Width="4"
Height="34"
HorizontalAlignment="Right"
@@ -655,15 +686,29 @@
</Button.Template>
<StackPanel Orientation="Horizontal"
Background="Transparent">
<Image Source="{DynamicResource nav_appbar_cart}"
x:Name="icoSSP"
Stretch="fill"
Panel.ZIndex="18"
Style="{StaticResource ImageStyle}"
Width="34"
Height="34"
Margin="14"
Tag="ICO" />
<Grid Width="34"
Height="34"
Margin="14">
<Image Source="{DynamicResource nav_appbar_cart}"
x:Name="icoSSP"
Stretch="fill"
Panel.ZIndex="18"
Style="{StaticResource ImageStyle}"
Width="34"
Height="34"
Tag="ICO" />
<Rectangle Tag="ActiveIcon"
Visibility="Hidden"
Panel.ZIndex="19"
Width="34"
Height="34"
Fill="{DynamicResource accentColor}">
<Rectangle.OpacityMask>
<ImageBrush ImageSource="{DynamicResource nav_appbar_cart}"
Stretch="Fill" />
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
<Image Source="Resources/StateOverlays/OverlayNewContentButton.png"
Visibility="Collapsed"
Panel.ZIndex="18"
@@ -697,6 +742,7 @@
<Border Visibility="Hidden"
Tag="ActiveIndicator"
Panel.ZIndex="1001"
Opacity="0"
Width="4"
Height="34"
HorizontalAlignment="Right"
@@ -711,15 +757,29 @@
</Button.Template>
<StackPanel Orientation="Horizontal"
Background="Transparent">
<Image Source="{DynamicResource nav_appbar_star}"
x:Name="icoCustomLinks"
Tag="ICO"
Stretch="fill"
Panel.ZIndex="18"
Style="{StaticResource ImageStyle}"
Width="34"
Height="34"
Margin="14" />
<Grid Width="34"
Height="34"
Margin="14">
<Image Source="{DynamicResource nav_appbar_star}"
x:Name="icoCustomLinks"
Tag="ICO"
Stretch="fill"
Panel.ZIndex="18"
Style="{StaticResource ImageStyle}"
Width="34"
Height="34" />
<Rectangle Tag="ActiveIcon"
Visibility="Hidden"
Panel.ZIndex="19"
Width="34"
Height="34"
Fill="{DynamicResource accentColor}">
<Rectangle.OpacityMask>
<ImageBrush ImageSource="{DynamicResource nav_appbar_star}"
Stretch="Fill" />
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
<Image Source="Resources/StateOverlays/OverlayNewContentButton.png"
Visibility="Collapsed"
Panel.ZIndex="18"
@@ -753,6 +813,7 @@
<Border Visibility="Hidden"
Tag="ActiveIndicator"
Panel.ZIndex="1001"
Opacity="0"
Width="4"
Height="34"
HorizontalAlignment="Right"
@@ -767,15 +828,29 @@
</Button.Template>
<StackPanel Orientation="Horizontal"
Background="Transparent">
<Image Source="{DynamicResource nav_appbar_information}"
x:Name="icoInfo"
Tag="ICO"
Stretch="fill"
Panel.ZIndex="18"
Style="{StaticResource ImageStyle}"
Width="34"
Height="34"
Margin="14" />
<Grid Width="34"
Height="34"
Margin="14">
<Image Source="{DynamicResource nav_appbar_information}"
x:Name="icoInfo"
Tag="ICO"
Stretch="fill"
Panel.ZIndex="18"
Style="{StaticResource ImageStyle}"
Width="34"
Height="34" />
<Rectangle Tag="ActiveIcon"
Visibility="Hidden"
Panel.ZIndex="19"
Width="34"
Height="34"
Fill="{DynamicResource accentColor}">
<Rectangle.OpacityMask>
<ImageBrush ImageSource="{DynamicResource nav_appbar_information}"
Stretch="Fill" />
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
<Image Source="Resources/StateOverlays/OverlayNewContentButton.png"
Visibility="Collapsed"
Panel.ZIndex="18"