fix: Navigation View theme fixes (#1360)

- colors, fonts

fix: Navigation View theme fixes

- label visibility, pane padding, content radius, item disabled state

fix: Navigation View theme fixes

- Item selection in compact mode

fix: Navigation View theme fixes

- updated md file
This commit is contained in:
Silviu Obreja 2024-04-12 10:32:09 -04:00 коммит произвёл GitHub
Родитель fb3936c5f1
Коммит 733836e153
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: B5690EEEBB952194
3 изменённых файлов: 3833 добавлений и 3761 удалений

Просмотреть файл

@ -15,25 +15,31 @@ IsDefaultStyle\*: Styles in this column will be set as the default implicit styl
## Lightweight Styling
| Key | Type | Value |
|---------------------------------------------------------------|-------------------|-------------------------------------------------|
| `MaterialNavigationViewSplitViewCornerRadius` | `CornerRadius` | 0,14,14,0 |
| `MaterialNavigationViewContentGridCornerRadius` | `CornerRadius` | 14,0,0,14 |
| Key | Type | Value |
|---------------------------------------------------------------|-------------------|---------------------------------------------------|
| `MaterialNavigationViewSplitViewCornerRadius` | `CornerRadius` | 0 |
| `MaterialNavigationViewContentGridCornerRadius` | `CornerRadius` | 0 |
| `MaterialNavigationViewSplitViewPadding` | `Thickness` | 0,12 |
| `MaterialNavigationViewButtonWidth` | `Double` | 56 |
| `MaterialNavigationViewButtonCornerRadius` | `CornerRadius` | 28 |
| `MaterialNavigationViewButtonHeight` | `Double` | 32 |
| `MaterialNavigationViewButtonCornerRadius` | `CornerRadius` | 16 |
| `MaterialNavigationViewButtonIconLength` | `Double` | 24 |
| `MaterialNavigationViewButtonIconSymbolFontSize` | `Double` | 24 |
| `MaterialNavigationViewButtonMarginWhenStackedVertically` | `Thickness` | 12,0 |
| `MaterialNavigationItemHeight` | `Double` | 56 |
| `MaterialNavigationItemHeightCompact` | `Double` | 32 |
| `MaterialNavigationItemMarginCompact` | `Double` | 12 |
| `MaterialNavigationViewItemCornerRadius` | `CornerRadius` | 28 |
| `MaterialNavigationViewItemCornerRadiusLeftOnly` | `CornerRadius` | 28,0,0,28 |
| `MaterialNavigationViewItemCornerRadiusCompact` | `CornerRadius` | 16 |
| `MaterialNavigationItemLeftMargin` | `Thickness` | 12,0 |
| `MaterialNavigationItemIconLength` | `Double` | 24 |
| `MaterialNavigationItemContentMargin` | `Thickness` | 12,0,0,0 |
| `MaterialNavigationItemContentMarginWithoutIcon` | `Thickness` | 0 |
| `MaterialNavigationItemContentPaddingCompact` | `Thickness` | 16,4 |
| `NavigationViewAutoSuggestBoxMargin` | `Thickness` | 16,0 |
| `TopNavigationViewAutoSuggestBoxMargin` | `Thickness` | 4,0 |
| `PaneToggleButtonHeight` | `Double` | 56 |
| `PaneToggleButtonHeight` | `Double` | 32 |
| `PaneToggleButtonWidth` | `Double` | 80 |
| `NavigationViewCompactPaneLength` | `Double` | 80 |
| `NavigationViewIconBoxWidth` | `Double` | 40 |
@ -74,7 +80,7 @@ IsDefaultStyle\*: Styles in this column will be set as the default implicit styl
| `NavigationViewPaneTitlePresenterMargin` | `Thickness` | 8,4,0,0 |
| `NavigationViewItemMargin` | `Thickness` | 0 |
| `TopNavigationViewItemMargin` | `Thickness` | 0 |
| `NavigationViewItemSeparatorMargin` | `Thickness` | 0,3,0,4 |
| `NavigationViewItemSeparatorMargin` | `Thickness` | 28,0 |
| `NavigationViewCompactItemSeparatorMargin` | `Thickness` | 0,3,0,4 |
| `TopNavigationViewItemSeparatorMargin` | `Thickness` | 3,0,4,0 |
| `TopNavigationViewOverflowButtonMargin` | `Thickness` | 0 |
@ -96,7 +102,7 @@ IsDefaultStyle\*: Styles in this column will be set as the default implicit styl
| `TopNavigationViewOverflowMenuPadding` | `Thickness` | 0,8 |
| `NavigationViewItemChildrenMenuFlyoutPadding` | `Thickness` | 0,8 |
| `NavigationViewItemExpandedGlyphFontSize` | `Double` | 8 |
| `NavigationViewItemExpandedGlyph` | `String` | |
| `NavigationViewItemExpandedGlyph` | `String` |  |
| `SplitViewOpenPaneThemeLength` | `Double` | 320 |
| `SplitViewCompactPaneThemeLength` | `Double` | 48 |
| `SplitViewLeftBorderThemeThickness` | `Thickness` | 0,0,1,0 |
@ -107,35 +113,35 @@ IsDefaultStyle\*: Styles in this column will be set as the default implicit styl
| `SplitViewPaneAnimationCloseDuration` | `String` | 00:00:00.1 |
| `SplitViewPaneRootCornerRadius` | `CornerRadius` | 0 |
| `NavigationViewBackground` | `SolidColorBrush` | `SurfaceBrush` |
| `NavigationViewDefaultPaneBackground` | `SolidColorBrush` | `SystemControlPageBackgroundChromeLowBrush` |
| `NavigationViewPaneBackground` | `SolidColorBrush` | `SurfaceBrush` |
| `NavigationViewDefaultPaneBackground` | `SolidColorBrush` | `SurfaceVariantBrush` |
| `NavigationViewPaneBackground` | `SolidColorBrush` | `SurfaceVariantBrush` |
| `NavigationViewTopPaneBackground` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `NavigationViewDefaultPaneBorderBrush` | `SolidColorBrush` | `SurfaceBrush` |
| `NavigationViewButtonForeground` | `SolidColorBrush` | `OnSurfaceBrush` |
| `NavigationViewButtonForegroundPointerOver` | `SolidColorBrush` | `OnSurfaceBrush` |
| `NavigationViewButtonForegroundPressed` | `SolidColorBrush` | `OnSurfaceBrush` |
| `NavigationViewButtonForegroundDisabled` | `SolidColorBrush` | `OnSurfaceDisabledBrush` |
| `NavigationViewButtonForegroundDisabled` | `SolidColorBrush` | `OnSurfaceVariantBrush` |
| `NavigationViewButtonBackground` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `NavigationViewButtonBackgroundPointerOver` | `SolidColorBrush` | `PrimaryHoverBrush` |
| `NavigationViewButtonBackgroundPressed` | `SolidColorBrush` | `PrimaryPressedBrush` |
| `NavigationViewButtonBackgroundPointerOver` | `SolidColorBrush` | `OnSurfaceHoverBrush` |
| `NavigationViewButtonBackgroundPressed` | `SolidColorBrush` | `OnSurfacePressedBrush` |
| `NavigationViewButtonBackgroundDisabled` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `NavigationViewButtonRippleFeedback` | `SolidColorBrush` | `PrimaryPressedBrush` |
| `NavigationViewItemBackground` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `NavigationViewItemBackgroundPointerOver` | `SolidColorBrush` | `PrimaryHoverBrush` |
| `NavigationViewItemBackgroundPressed` | `SolidColorBrush` | `PrimaryPressedBrush` |
| `NavigationViewItemBackgroundDisabled` | `SolidColorBrush` | `OnSurfaceDisabledBrush` |
| `NavigationViewItemBackgroundSelected` | `SolidColorBrush` | `PrimarySelectedBrush` |
| `NavigationViewItemBackgroundSelectedPointerOver` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `NavigationViewItemBackgroundSelectedPressed` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `NavigationViewItemBackgroundSelectedDisabled` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `NavigationViewItemBackgroundPointerOver` | `SolidColorBrush` | `OnSurfaceHoverBrush` |
| `NavigationViewItemBackgroundPressed` | `SolidColorBrush` | `OnSurfacePressedBrush` |
| `NavigationViewItemBackgroundDisabled` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `NavigationViewItemBackgroundSelected` | `SolidColorBrush` | `SecondaryContainerBrush` |
| `NavigationViewItemBackgroundSelectedPointerOver` | `SolidColorBrush` | `OnSurfaceHoverBrush` |
| `NavigationViewItemBackgroundSelectedPressed` | `SolidColorBrush` | `OnSurfacePressedBrush` |
| `NavigationViewItemBackgroundSelectedDisabled` | `SolidColorBrush` | `OnSurfaceDisabledLowBrush` |
| `NavigationViewItemForeground` | `SolidColorBrush` | `OnSurfaceBrush` |
| `NavigationViewItemForegroundPointerOver` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `NavigationViewItemForegroundPressed` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `NavigationViewItemForegroundDisabled` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `NavigationViewItemForegroundDisabled` | `SolidColorBrush` | `OnSurfaceVariantBrush` |
| `NavigationViewItemForegroundSelected` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `NavigationViewItemForegroundSelectedPointerOver` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `NavigationViewItemForegroundSelectedPressed` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `NavigationViewItemForegroundSelectedDisabled` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `NavigationViewItemForegroundSelectedDisabled` | `SolidColorBrush` | `OnSurfaceVariantBrush` |
| `NavigationViewItemBorderBrush` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `NavigationViewItemBorderBrushPointerOver` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `NavigationViewItemBorderBrushPressed` | `SolidColorBrush` | `SystemControlTransparentBrush` |
@ -145,13 +151,13 @@ IsDefaultStyle\*: Styles in this column will be set as the default implicit styl
| `NavigationViewItemBorderBrushSelectedPressed` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `NavigationViewItemBorderBrushSelectedDisabled` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `NavigationViewItemSeparatorForeground` | `SolidColorBrush` | `OnSurfacePressedBrush` |
| `NavigationViewItemHeaderForeground` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `NavigationViewItemHeaderForeground` | `SolidColorBrush` | `OnSurfaceVariantBrush` |
| `NavigationViewSelectionIndicatorForeground` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `NavigationViewItemRippleFeedback` | `SolidColorBrush` | `PrimaryPressedBrush` |
| `TopNavigationViewItemForeground` | `SolidColorBrush` | `OnSurfaceBrush` |
| `TopNavigationViewItemForegroundPointerOver` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `TopNavigationViewItemForegroundPressed` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `TopNavigationViewItemForegroundDisabled` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `TopNavigationViewItemForegroundDisabled` | `SolidColorBrush` | `OnSurfaceVariantBrush` |
| `TopNavigationViewItemForegroundSelected` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `TopNavigationViewItemForegroundSelectedPointerOver` | `SolidColorBrush` | `SystemControlTransparentBrush` |
| `TopNavigationViewItemForegroundSelectedPressed` | `SolidColorBrush` | `SystemControlTransparentBrush` |

Разница между файлами не показана из-за своего большого размера Загрузить разницу

Просмотреть файл

@ -48,19 +48,47 @@
IsBackEnabled="False"
Style="{StaticResource MaterialNavigationViewStyle}">
<muxc:NavigationView.MenuItems>
<!-- First Header -->
<muxc:NavigationViewItemHeader Content="Main Section" />
<!-- First Group of Items -->
<muxc:NavigationViewItem Icon="Library"
Content="Parent for 1~3"
SelectsOnInvoked="False"
Style="{StaticResource MaterialNavigationViewItemStyle}">
<muxc:NavigationViewItem.MenuItems>
<muxc:NavigationViewItem Icon="Placeholder" Content="Item 1" Style="{StaticResource MaterialNavigationViewItemStyle}" />
<muxc:NavigationViewItem Icon="Placeholder" Content="Item 2" Style="{StaticResource MaterialNavigationViewItemStyle}" />
<muxc:NavigationViewItem Icon="Placeholder" Content="Item 3" Style="{StaticResource MaterialNavigationViewItemStyle}" />
<muxc:NavigationViewItem Icon="Placeholder"
Content="Item 1"
Style="{StaticResource MaterialNavigationViewItemStyle}" />
<muxc:NavigationViewItem Icon="Placeholder"
Content="Item 2"
Style="{StaticResource MaterialNavigationViewItemStyle}" />
<muxc:NavigationViewItem Icon="Placeholder"
Content="Item 3"
Style="{StaticResource MaterialNavigationViewItemStyle}" />
</muxc:NavigationViewItem.MenuItems>
</muxc:NavigationViewItem>
<muxc:NavigationViewItem Icon="Placeholder" Content="Item 4" Style="{StaticResource MaterialNavigationViewItemStyle}" />
<muxc:NavigationViewItem Icon="Placeholder"
Content="Item 4"
Style="{StaticResource MaterialNavigationViewItemStyle}" />
<!-- Separator -->
<muxc:NavigationViewItemSeparator />
<!-- Second Header -->
<muxc:NavigationViewItemHeader Content="Secondary Section" />
<!-- Second Group of Items -->
<muxc:NavigationViewItem Icon="Placeholder"
Content="Item 5"
Style="{StaticResource MaterialNavigationViewItemStyle}" />
<muxc:NavigationViewItem Icon="Placeholder"
Content="Item 6 (disabled)"
IsEnabled="False"
Style="{StaticResource MaterialNavigationViewItemStyle}" />
</muxc:NavigationView.MenuItems>
</muxc:NavigationView>
</sample:ClippedGrid>
</smtx:XamlDisplay>
</DataTemplate>