自定义 NavigationView 面板以包含图像 UWP

Question

我正在尝试在 UWP C# XAML 上自定义 NavigationView 以在左侧面板的顶部显示静态应用程序图像，它不会重定向到页面，而只是应用程序图标。

官方documentation只提到使用Canvas.Index0/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 像素的图像。

我尝试了什么？ : 我尝试了下面的代码，但是图像只占据了左边的图标space。

<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>

预计

是否仍然可以使用 NavigationView 实现此目的，或者我是否需要使用其他 UI 元素，例如 SplitView 或 MasterDetailView

Answer 1

问题是由于 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>

我为 'LayoutRoot' 网格设置了 Height="{TemplateBinding Height}"，然后您可以将此样式应用到 NavigationViewItem，如下所示：

<NavigationViewItem Style="{StaticResource test}">
    <Image Source="/Assets/Cubes/purple.png" HorizontalAlignment="Center" MinHeight="100" MinWidth="100"></Image>
</NavigationViewItem>

Answer 2

对我有用。示例：
在<NavigationView.MenuItems>中写入<NavigationViewItemHeader>。喜欢

<NavigationView.MenuItems>
    <NavigationViewItemHeader Height="180">
        <Image Source="/Assets/Cubes/purple.png" Width="320" Height="180"/>
    </NavigationViewItemHeader>
</NavigationView.MenuItems>

自定义 NavigationView 面板以包含图像 UWP

Customize NavigationView panel to include image UWP

c#

xaml

uwp

uwp-xaml