Question

我想在我的uwp应用程序的导航栏中添加Expander控件。

我想像这样在导航视图中添加扩展器控件

谢谢。

Answer 1

这可以使用Microsoft工具箱控件来实现。该工具箱中有一个支持UWP的扩展程序控件。

从Nuget软件包中安装Microsoft.Toolkit.Uwp.UI.Controls。

如下所示在XAML标头中定义工具包，并按以下代码在设计中使用它。

xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"

<controls:Expander Header="Header" Background="White">
        <controls:Expander.HeaderTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" Background="White">
                    <Button Foreground="Black" Background="White" Padding="0">
                        <Button.Content>
                            <SymbolIcon Symbol="Setting"/>
                        </Button.Content>
                    </Button>
                    <Button Content="credentials"/>
                </StackPanel>
            </DataTemplate>
        </controls:Expander.HeaderTemplate>
            <Grid>
            <TextBlock Text="Expanded content" />
        </Grid>
    </controls:Expander>

这将是以上代码的输出。

您可以根据需要对其进行修改。

Follow this link for more details

Answer 2

根据您的要求，您可以自定义NavigationViewItem样式，并将LayoutRoot和ContentGrid的高度都设置为auto，如下所示。

<Style x:Key="NavigationViewItemStyle1" TargetType="NavigationViewItem">
    <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" Background="{TemplateBinding Background}" Height="auto" 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>
                    <Grid HorizontalAlignment="Left" VerticalAlignment="Center">
                        <Rectangle x:Name="SelectionIndicator" Fill="{ThemeResource NavigationViewSelectionIndicatorForeground}" Height="24" Opacity="0.0" Width="6"/>
                    </Grid>
                    <Border x:Name="RevealBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"/>
                    <Grid x:Name="ContentGrid" HorizontalAlignment="Left" Height="auto">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="IconColumn" Width="48"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <ToolTipService.ToolTip>
                            <ToolTip x:Name="ToolTip"/>
                        </ToolTipService.ToolTip>
                        <Viewbox x:Name="IconBox" Child="{TemplateBinding Icon}" Margin="16,12"/>
                        <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后自定义NavigationViewItem ContentTemplate并在其中添加Microsoft Toolkit Expander控件。

<NavigationViewItem Style="{StaticResource NavigationViewItemStyle1}" Content="placeholder" >
 <NavigationViewItem.ContentTemplate>
        <DataTemplate>
            <Grid Height="auto">
                <controls:Expander x:Name="Expander2" VerticalAlignment="Top" Margin="0" 
                           Background="{ThemeResource NavigationViewItemBackground}"
                           Header="This is the header"       
                           HorizontalContentAlignment="Stretch"
                           IsExpanded="False"
                           ExpandDirection="Down">
                    <Grid Height="auto"
                       Background="{ThemeResource NavigationViewItemBackground}">
                        <ListView>
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel>
                                        <TextBlock Text="{Binding}"/>
                                    </StackPanel>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                            <x:String>Item1</x:String>
                            <x:String>Item2</x:String>
                            <x:String>Item3</x:String>
                        </ListView>
                    </Grid>
                </controls:Expander>
            </Grid>
        </DataTemplate>
    </NavigationViewItem.ContentTemplate>
</NavigationViewItem>

是否可以在uwp的导航栏中添加扩展器控件？

2 个答案: