Home > Back-end >  How to hid scrollbar in navigationview
How to hid scrollbar in navigationview

Time:03-31

i'm using navigationview and want to hide scrollbar. but ScrollViewer.VerticalScrollBarVisibility="Hidden" is useless. Operation results

 <NavigationView x:Name="ConrtolList"
                        IsSettingsVisible="False"
                        IsBackButtonVisible="Collapsed"
                        IsBackEnabled="True"
                        AlwaysShowHeader="True"
                        PaneTitle="后台管理"
                        PaneDisplayMode="Left"
                        ExpandedModeThresholdWidth="500"
                        SelectionFollowsFocus="Disabled"
                        IsTabStop="False"
                        Loaded="nvSample_Loaded"
                        SelectionChanged="ConrtolList_SelectionChanged"
                        ScrollViewer.VerticalScrollBarVisibility="Hidden"
                       >
            <NavigationView.MenuItems>
                <NavigationViewItem Content="主页" Tag="Home" x:Name="SamplePage1Item">
                    <NavigationViewItem.Icon>
                        <SymbolIcon  Symbol="home"/>
                    </NavigationViewItem.Icon>
                </NavigationViewItem>
                <NavigationViewItemHeader Content="批发商管理"/>
                <NavigationViewItem Content="批发商账户" Tag="MerchantsAccount" x:Name="MerchantsAccount">
                    <NavigationViewItem.Icon>
                        <SymbolIcon Symbol="People" />
                    </NavigationViewItem.Icon>
                </NavigationViewItem>
                <NavigationViewItem Content="商品审核" Tag="CommodityJustice" x:Name="CommodityJustice" SelectsOnInvoked="True">
                    <NavigationViewItem.Icon>
                        <SymbolIcon Symbol="BrowsePhotos" />
                    </NavigationViewItem.Icon>
                </NavigationViewItem>
                <NavigationViewItem Content="违禁商户" Tag="MerchantsBan" x:Name="MerchantsBan">
                    <NavigationViewItem.Icon>
                        <SymbolIcon Symbol="Dislike" />
                    </NavigationViewItem.Icon>
                </NavigationViewItem>
                <NavigationViewItem Content="商户申诉" Tag="MerchantsAppel" x:Name="MerchantsAppel">
                    <NavigationViewItem.Icon>
                        <SymbolIcon Symbol="Help" />
                    </NavigationViewItem.Icon>
                </NavigationViewItem>
                <NavigationViewItemHeader Content="零售商管理"/>
                <NavigationViewItem Content="零售商账户" Tag="DealerAccount" x:Name="DealerAccount">
                    <NavigationViewItem.Icon>
                        <SymbolIcon Symbol="People" />
                    </NavigationViewItem.Icon>
                </NavigationViewItem>
                <NavigationViewItem Content="违禁零售商" Tag="DealerBan" x:Name="DealerBan">
                    <NavigationViewItem.Icon>
                        <SymbolIcon Symbol="Dislike" />
                    </NavigationViewItem.Icon>
                </NavigationViewItem>
                <NavigationViewItem Content="零售商申诉" Tag="DealerAppel" x:Name="DealerAppel">
                    <NavigationViewItem.Icon>
                        <SymbolIcon Symbol="Help" />
                    </NavigationViewItem.Icon>
                </NavigationViewItem>
                <NavigationViewItemHeader Content="商品管理"/>
                <NavigationViewItem Content="商品一览" Tag="CommodityCheck" x:Name="CommodityCheck">
                    <NavigationViewItem.Icon>
                        <SymbolIcon Symbol="Paste" />
                    </NavigationViewItem.Icon>
                </NavigationViewItem>
                <NavigationViewItem Content="商品修改" Tag="CommodityUpdate" x:Name="CommodityUpdate">
                    <NavigationViewItem.Icon>
                        <SymbolIcon Symbol="Edit" />
                    </NavigationViewItem.Icon>
                </NavigationViewItem>
                <NavigationViewItem Content="违禁商品" Tag="CommodityBan" x:Name="CommodityBan">
                    <NavigationViewItem.Icon>
                        <SymbolIcon Symbol="Dislike" />
                    </NavigationViewItem.Icon>
                </NavigationViewItem>
                <NavigationViewItemHeader Content="订单管理"/>
                <NavigationViewItem Content="订单一览" Tag="BullCheck" x:Name="BullCheck">
                    <NavigationViewItem.Icon>
                        <SymbolIcon Symbol="Page2" />
                    </NavigationViewItem.Icon>
                </NavigationViewItem>
            </NavigationView.MenuItems>
            <NavigationView.PaneFooter>
                <StackPanel x:Name="FooterStackPanel" Orientation="Vertical" Visibility="Visible">
                    <NavigationViewItem Content="信息下载" Icon="Download" AutomationProperties.Name="download" />
                    <NavigationViewItem Content="信息导入" Icon="Add" AutomationProperties.Name="favorite" />
                </StackPanel>
            </NavigationView.PaneFooter>
            <Frame x:Name="contentFrame" />
        </NavigationView>

So how to hide the scroll bar pointed by the arrow. I add <NavigationView ScrollViewer.VerticalScrollBarVisibility="Hidden"> to hidding scrollbar,but it useless. The scrollbar still visible. I didn't find this solution in the official documents

CodePudding user response:

How to hid scrollbar in navigationview

You need to create a default style of NavigationView. Then find the NavigationViewList which is named as MenuItemsHost. Set the ScrollViewer.VerticalScrollBarVisibility property of the NavigationViewList to Hidden.

Like this:

            <NavigationViewList x:Name="MenuItemsHost"
                            HorizontalAlignment="Stretch"
                            ItemTemplate="{TemplateBinding MenuItemTemplate}" 
                            ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}"
                            ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}"
                            IsItemClickEnabled="True"
                            ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}" 
                            Margin="0,0,0,20" Grid.Row="6" SelectionMode="Single" 
                            ScrollViewer.VerticalScrollBarVisibility="Hidden"
                            SingleSelectionFollowsFocus="{Binding TemplateSettings.SingleSelectionFollowsFocus, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                            SelectedItem="{TemplateBinding SelectedItem}"/>

To create a default style of the NavigationView, please open the Document Outline window in Visual Studio. Then find the NavigationView control, right-click on it, choose Edit Template->Edit a Copy. The Visual Studio will automatically generate a default style of the NavigationView.

  • Related