Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

NavigationView's default min width is too wide to align horizontally to right. #4627

Closed
gaoyulei1983 opened this issue Mar 23, 2021 · 13 comments
Closed

NavigationView's default min width is too wide to align horizontally to right. #4627

gaoyulei1983 opened this issue Mar 23, 2021 · 13 comments
Labels
area-NavigationView NavView control team-Controls Issue for the Controls team

Comments

@gaoyulei1983
Copy link

gaoyulei1983 commented Mar 23, 2021 •
edited
Loading

Describe the bug
I want to put two font Icons on NavigationView and hide the setting button and align it to the right horizontally. However, it can't be aligned to right because its default min width is 635px. I hope you can reduce its default min width.

Steps to reproduce the bug
I add the code below in my UWP program, and want to show two font Icon button on the NavigationView. I am using PaneDisplayMode="Top" and want to make it align horizontally to right.

<Page
  x:Class="App1.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:local="using:App1"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
  mc:Ignorable="d">
  <Grid>
      <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="*" />
      </Grid.RowDefinitions>
      <muxc:NavigationView
          HorizontalAlignment="Right"
          IsBackButtonVisible="Collapsed"
          IsSettingsVisible="False"
          PaneDisplayMode="Top">
          <muxc:NavigationView.MenuItems>
              <muxc:NavigationViewItem>
                  <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xEA37;" />
              </muxc:NavigationViewItem>
              <muxc:NavigationViewItem IsSelected="True">
                  <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE74C;" />
              </muxc:NavigationViewItem>
          </muxc:NavigationView.MenuItems>
      </muxc:NavigationView>
  </Grid>
</Page>

However, you can see the screen shot here, its width is too wide, and seems not to be aligned to right.
image

I also try to set Width="100" for muxc:NavigationView but it can't resolve my problem, because the More button will be shown. I don't want to show More button.
image

I also try to set Width="145" which is the min width that doesn't show the More button. It is still not aligned to the right.
However, I don't want to set Width for it because the width will change when I change text scale in the windows settings page as below. I also try to set MinWidth = "0" for it, but it doesn't work.
image

Expected behavior
Hope the two Navigation View font icon align to the right top.

Screenshots
I hope it can show like below that the Navigation View can align to the right when PaneDisplayMode="Top"
image
@ghost ghost added the needs-triage Issue needs to be triaged by the area owners label Mar 23, 2021
@ranjeshj ranjeshj added area-NavigationView NavView control team-Controls Issue for the Controls team and removed needs-triage Issue needs to be triaged by the area owners labels Mar 23, 2021
@ranjeshj
Copy link
Contributor

@gaoyulei1983 Can you provide details on what you are trying to achieve. I'm curious if NavigationView is the correct control for this. Would CommandBar serve better for this ? @YuliKl as FYI

@gaoyulei1983
Copy link
Author

gaoyulei1983 commented Mar 24, 2021 •
edited
Loading

@ranjeshj I use it for the tab header to switch tab page. In WPF, I usually use Tabcontrol. Now in UWP I hope it can be placed to right and top of the page. I also considered to use Pivot, but I was told it will be deprecated in WinUI next version, and CommandBar doesn't support to switch highlight bottom line between its children items naturally, I need to add another control and event to implement so. It is not as good as NavigationView.

@YuliKl
Copy link

YuliKl commented Mar 24, 2021

@gaoyulei1983 Thank you for the additional information. As you have noticed, NavigationView was not designed to have its items be right aligned, but you may be able to achieve your scenario by placing your NavigationViewItems into the FooterMenuItems list instead of MenuItems.

A word of caution: Based on your row definitions, you may be misunderstanding NavigationView's behavior. As described in the NavigationView design docs, the control is both headers and content. NavigationView will attempt to take up as much available height as possible, so your second row will most likely have a height of 0. For similar reasons, I would not recommend a very narrow NavigationView to avoid showing just a narrow strip as the control's Content.

Lastly, regarding this comment:

I don't want to set Width for it because the width will change when I change text scale in the windows settings page as below.

Icons are not effected by that setting, it only changes the size of text.

Please close this issue if FooterMenuItems does what you expect. What you're reporting isn't actually a bug, and FooterMenuItems is the feature we added to support this scenario.

@YuliKl YuliKl added the needs-author-feedback Asked author to supply more information. label Mar 24, 2021
@mdtauk
Copy link
Contributor

mdtauk commented Mar 24, 2021

It looks like you want to use a customised Pivot, but as that control is being deprecated, you may have to wait for progress with this proposal #2310 and then tie that to a frame for navigating pages

@YuliKl
Copy link

YuliKl commented Mar 24, 2021

It looks like you want to use a customised Pivot, but as that control is being deprecated, you may have to wait for progress with this proposal #2310 and then tie that to a frame for navigating pages

Or just use NavigationView. No need to wait for a new control :)

@mdtauk
Copy link
Contributor

mdtauk commented Mar 24, 2021

It looks like you want to use a customised Pivot, but as that control is being deprecated, you may have to wait for progress with this proposal #2310 and then tie that to a frame for navigating pages

Or just use NavigationView. No need to wait for a new control :)

Sure if the person is happy to change his layout to match what the NavigationView's layout :)

@gaoyulei1983
Copy link
Author

I will give you feedback tomorrow.

@ghost ghost added needs-triage Issue needs to be triaged by the area owners and removed needs-author-feedback Asked author to supply more information. labels Mar 24, 2021
@mdtauk
Copy link
Contributor

mdtauk commented Mar 24, 2021

NavigationView is designed to take up the whole window space. I think it supports LtR and RtL document flow, but with LtR the sidebar is on the left or the top orientation is at the top, and designed to be full width.

The control acts as a frame for handling page navigation IIRC.

image

image

@mdtauk
Copy link
Contributor

mdtauk commented Mar 24, 2021 •
edited
Loading

You should try populating the FooterMenuItems area

image

        <muxc:NavigationView PaneDisplayMode="Top" IsSettingsVisible="False" IsBackButtonVisible="Collapsed">

            <muxc:NavigationView.FooterMenuItems>

                <muxc:NavigationViewItem IsSelected="True">
                    <muxc:NavigationViewItem.Icon>
                        <FontIcon Glyph="&#xEA37;" />
                    </muxc:NavigationViewItem.Icon>
                </muxc:NavigationViewItem>

                <muxc:NavigationViewItem>
                    <muxc:NavigationViewItem.Icon>
                        <FontIcon Glyph="&#xE74C;" />
                    </muxc:NavigationViewItem.Icon>
                </muxc:NavigationViewItem>

            </muxc:NavigationView.FooterMenuItems>
            
        </muxc:NavigationView>

@StephenLPeters StephenLPeters removed the needs-triage Issue needs to be triaged by the area owners label Mar 24, 2021
@gaoyulei1983
Copy link
Author

gaoyulei1983 commented Mar 25, 2021 •
edited
Loading

There is still an bug, although I use FooterMenuItems. I put a button besides the navigationView, and the button can't align to the right besides the two font Icons. The navigationView's default width is still too wide.

image

<Page x:Class="App1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:muxc="using:Microsoft.UI.Xaml.Controls" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" mc:Ignorable="d"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <StackPanel HorizontalAlignment="Right" Orientation="Horizontal"> <Button HorizontalAlignment="Right" /> <muxc:NavigationView HorizontalAlignment="Right" IsBackButtonVisible="Collapsed" IsSettingsVisible="False" PaneDisplayMode="Top"> <muxc:NavigationView.FooterMenuItems> <muxc:NavigationViewItem> <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xEA37;" /> </muxc:NavigationViewItem> <muxc:NavigationViewItem IsSelected="True"> <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE74C;" /> </muxc:NavigationViewItem> </muxc:NavigationView.FooterMenuItems> </muxc:NavigationView> </StackPanel> </Grid> </Page>

@YuliKl
Copy link

YuliKl commented Mar 30, 2021

Chatted with @gaoyulei1983 offline, and NavigationView is not the correct control to use in this scenario. Closing issue.

@YuliKl YuliKl closed this as completed Mar 30, 2021
@gaoyulei1983
Copy link
Author

@YuliKl you haven't told me what's the correct control I should use.

@ghost ghost added the needs-triage Issue needs to be triaged by the area owners label Mar 31, 2021
@gaoyulei1983
Copy link
Author

gaoyulei1983 commented Mar 31, 2021 via email

@StephenLPeters StephenLPeters removed the needs-triage Issue needs to be triaged by the area owners label Mar 31, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area-NavigationView NavView control team-Controls Issue for the Controls team
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@mdtauk @StephenLPeters @YuliKl @ranjeshj @gaoyulei1983