c# - 自定义 NavigationView 面板以包含图像 UWP
问题描述
我正在尝试NavigationView
在 UWP C# XAML 上进行自定义,以便在左侧面板的顶部具有静态应用程序图像,该图像不会重定向到页面,而只是应用程序图标。
官方文档Canvas.Index
仅提到使用0/1 选项显示 App 标题和自定义背景。
<NavigationView OpenPaneLength="200"
x:Name="navigationView"
SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
Header="{x:Bind ViewModel.Selected.Content, Mode=OneWay}"
IsSettingsVisible="True"
IsPaneToggleButtonVisible="True"
Background="{ThemeResource SystemControlBackgroundAltHighBrush}">
我想将其自定义为在顶部具有至少 100x100 像素的图像。
我尝试了什么?: 我试过下面的代码,但是图片只占用了左边的图标空间。
<NavigationViewItem>
<Image Source="/Assets/Cubes/purple.png"
HorizontalAlignment="Center"></Image>
</NavigationViewItem>
<NavigationViewItem>
<Image Source="/Assets/Cubes/purple.png"
HorizontalAlignment="Center" MinHeight="100" MinWidth="100"></Image>
</NavigationViewItem>
<NavigationViewItem Height="100">
<Image Source="/Assets/Cubes/purple.png"
HorizontalAlignment="Center" MinHeight="100" MinWidth="100"></Image>
</NavigationViewItem>
预期的
是否仍然可以使用其他 UI 元素来实现这一点,NavigationView
或者我是否需要使用其他 UI 元素,例如SplitView
或MasterDetailView
解决方案
问题是由于 NavigationViewItem 的 ControlTemplate 的根面板的高度设置为固定值 (40)。
您可以编辑 NavigationViewItem 的样式以使其符合您的要求。
请参阅我的以下示例:
<Style TargetType="NavigationViewItem" x:Key="test">
<Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForeground}" />
<Setter Property="Background" Value="{ThemeResource NavigationViewItemBackground}" />
<Setter Property="BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrush}" />
<Setter Property="BorderThickness" Value="{StaticResource NavigationViewItemBorderThickness}" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="NavigationViewItem">
<Grid
x:Name="LayoutRoot"
Height="{TemplateBinding Height}"
Background="{TemplateBinding Background}"
Control.IsTemplateFocusTarget="True">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PointerStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundPointerOver}" />
<Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundPointerOver}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed" />
<Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundPressed}" />
<Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundPressed}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelected}" />
<Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushSelected}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelected}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOverSelected">
<VisualState.Setters>
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelectedPointerOver}" />
<Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushSelectedPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelectedPointerOver}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PressedSelected">
<VisualState.Setters>
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed" />
<Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelectedPressed}" />
<Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushSelectedPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelectedPressed}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DisabledStates">
<VisualState x:Name="Enabled" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushCheckedDisabled}" />
<Setter Target="LayoutRoot.Opacity" Value="{ThemeResource ListViewItemDisabledThemeOpacity}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="IconStates">
<VisualState x:Name="IconVisible" />
<VisualState x:Name="IconCollapsed">
<VisualState.Setters>
<Setter Target="IconBox.Visibility" Value="Collapsed" />
<Setter Target="IconColumn.Width" Value="16" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!-- Wrap SelectionIndicator in a grid so that its offset is 0,0 - this enables the offset animation. -->
<Grid
HorizontalAlignment="Left"
VerticalAlignment="Center">
<Rectangle
x:Name="SelectionIndicator"
Width="6"
Height="24"
Fill="{ThemeResource NavigationViewSelectionIndicatorForeground}"
Opacity="0.0"/>
</Grid>
<Border
x:Name="RevealBorder"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
<Grid Height="100" HorizontalAlignment="Left" x:Name="ContentGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="IconColumn" Width="48" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Viewbox x:Name="IconBox"
Child="{TemplateBinding Icon}"
Margin="16,12"/>
<ContentPresenter x:Name="ContentPresenter"
Grid.Column="1"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"/>
<ToolTipService.ToolTip>
<ToolTip x:Name="ToolTip" />
</ToolTipService.ToolTip>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
我设置Height="{TemplateBinding Height}"
了“LayoutRoot”网格,然后您可以将此样式应用于您的 NavigationViewItem,如下所示:
<NavigationViewItem Style="{StaticResource test}">
<Image Source="/Assets/Cubes/purple.png" HorizontalAlignment="Center" MinHeight="100" MinWidth="100"></Image>
</NavigationViewItem>
推荐阅读
- angular - 全局定位的overlayRef的角度cdk覆盖更新位置
- javascript - jquery hide/show 在节点 js 中没有按预期工作
- javascript - Javascript 错误:无法使用画布标记读取 null 的属性“getContext”
- java - 如何监视引导上下文 bean
- unity3d - 冻结后没有发生碰撞
- python - 使用fuzzywuzzy 时出错:UserWarning: Using slow pure-python SequenceMatcher。安装 python-Levenshtein 以删除此警告
- node.js - 是否有任何选项可以在树结构中安装软件包,例如 0.12 以下的节点版本如何使用
- mysql - 使用表中的 created_at 值从 laravel 的数据库中获取最近 7 个季度的数据
- r - Shinyapps.io 部署包安装失败
- javascript - 如何在 html 中隐藏表格行,使用 javaScript 将条件作为行值?如果两行值相同,则隐藏一个