Problem
I'm using a NavigationView in my UWP application with the the PaneDisplayMode property set to Top. I've added a few menu items, but I'm having trouble adjusting the top pane's height to fit the menu items. At the moment, the pane items are getting cropped.
What Have I Tried?
I've tried to adjust the NavigationView's Height property, but it has no effect on the height of the top bar, only changing the height of the entire NavigationView (as one would expect).
Code
Here is my current XAML code:
<NavigationView
x:Name="navMain"
IsBackButtonVisible="Collapsed"
IsSettingsVisible="False"
IsTabStop="False"
PaneDisplayMode="Top">
<NavigationView.MenuItems>
<NavigationViewItem
Content="ITEM 1"
FontSize="60"
Tag="Page1" />
<NavigationViewItem
Content="ITEM2"
FontSize="60"
Tag="Page2" />
<NavigationViewItem
Content="ITEM 3"
FontSize="60"
Tag="Page3" />
</NavigationView.MenuItems>
</NavigationView>
Desired Result
I would like to adjust the top pane's height, preferably using only XAML, so that the menu items can fit and not be cropped.
All you need to do is override NavigationViewTopPaneHeight using lightweight styling, like this (you don't need to re-template the control):
<muxc:NavigationView.Resources>
<x:Double x:Key="NavigationViewTopPaneHeight">100</x:Double>
</muxc:NavigationView.Resources>
This issue is due to the default height of NavigationViewTopPane is 40. You set the FontSize="60" for the NavigationViewItem is too larger.
To solve this issue, you need to edit the ControlTemplate of NavigationView. An easy way is to follow the Use tools to work with themes easily document to edit a copy NavigationView style.
Then, you need to find a Grid named 'TopNavGrid' in the ControlTemplate. The default looks like this <Grid x:Name="TopNavGrid" Height="{ThemeResource NavigationViewTopPaneHeight}" ..., you need to change the height to an appropriate value. For example, <Grid x:Name="TopNavGrid" Height="100" .... Then, the menu items will not be cropped.
Related
When I edit properties of the Expander control, the effects seem to only apply to the content of the Expander, rather than the header.
E.g. if I set the BorderBrush as black and the Background as aquamarine, those properties only apply to the content:
<Expander Header="Expander" BorderBrush="Black" Background="Aquamarine">
<TextBlock Text="Here is some text"/>
</Expander>
See what the above code looks like
I know I can use this syntax:
<Expander>
<Expander.Header>
<!--XAML content here-->
</Expander.Header>
</Expander>
and put XAML content inside the header. So I tried putting a StackPanel in there, and editing the border and background on that—but it only applied to a small portion of the Expander header, and didn't cover the drop down caret, for example.
How do I change properties of the header?
You can edit the default style but this might be easier:
<Border
HorizontalAlignment="Left"
VerticalAlignment="Center"
Background="SkyBlue"
BorderBrush="HotPink"
BorderThickness="1"
CornerRadius="{StaticResource ControlCornerRadius}">
<Expander
Content="CONTENT"
Header="HEADER" />
</Border>
You just need to set the Border's properties.
I'm trying to accomplish something similar to the image below where in compact mode you have the icon and the text displayed under it.
I'm not that familiar with modifying the underlying template for the NavigationView to make this work. Can you give me an advice on how to do this?
The code for the NavigationView is pretty much the default one:
<winui:NavigationView
x:Name="navigationView"
Background="{ThemeResource SystemControlBackgroundAltHighBrush}"
IsBackButtonVisible="Collapsed"
IsBackEnabled="False"
IsPaneToggleButtonVisible="False"
IsSettingsVisible="False"
PaneDisplayMode="LeftCompact"
SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}">
<winui:NavigationView.MenuItems>
<winui:NavigationViewItem x:Uid="Shell_Main" helpers:NavHelper.NavigateTo="views:MainPage">
<winui:NavigationViewItem.Icon>
<FontIcon Glyph="" />
</winui:NavigationViewItem.Icon>
</winui:NavigationViewItem>
<winui:NavigationViewItem x:Uid="Shell_WorkOrders" helpers:NavHelper.NavigateTo="views:WorkOrdersPage">
<winui:NavigationViewItem.Icon>
<FontIcon Glyph="" />
</winui:NavigationViewItem.Icon>
</winui:NavigationViewItem>
<winui:NavigationViewItem x:Uid="Shell_Materials" helpers:NavHelper.NavigateTo="views:MaterialsPage">
<winui:NavigationViewItem.Icon>
<FontIcon Glyph="" />
</winui:NavigationViewItem.Icon>
</winui:NavigationViewItem>
<winui:NavigationViewItem x:Uid="Shell_Documentation" helpers:NavHelper.NavigateTo="views:DocumentationPage">
<winui:NavigationViewItem.Icon>
<FontIcon Glyph="" />
</winui:NavigationViewItem.Icon>
</winui:NavigationViewItem>
</winui:NavigationView.MenuItems>
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="ItemInvoked">
<ic:InvokeCommandAction Command="{x:Bind ViewModel.ItemInvokedCommand}" />
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
<Grid>
<Frame x:Name="shellFrame" />
</Grid>
</winui:NavigationView>
NavigationView icons + text in compact mode
it's hard to make interface like the screenshot that you mentioned above, you need to edit the default NavigationViewItemPresenter style, and set icon above and content bottom.
For making navigation like above, we suggest you custom side navigation with SplitView to replace default NavigationView. and set ListView as pane content. Then you could design the nav item flexibly by customizing ItemTemplate .
For more detail please refer to Xaml-Controls-Gallery here.
I want to enable user to resize the NavigationView in my UWP app. Couldn't find any resources how I could do that.
I see some of the apps have "Resizable splitView" but for SplitView also, I cannot see any such resize property exposed to set by default.
Pls help.
Thanks in Advance
There are no such property can resize SplitView and NavigationView, you need to custom layout to implement a similar effect. You could use Slider control and bind the OpenPaneLength Property of SplitView to Slider.Value to do this. Please refer to the following code.
<Grid>
<SplitView Name="CoreSplitView"
DisplayMode="Inline"
IsPaneOpen="True"
OpenPaneLength="{Binding Value, ElementName=MasterSlider, Mode=OneWay}">
<SplitView.Pane>
<Grid Name="PaneGrid" Background="Gray">
<Slider Name="MasterSlider"
MinWidth="480"
VerticalAlignment="Stretch"
Maximum="480"
Minimum="10"
Opacity="0"
Value="150"
/>
<StackPanel Name="PaneStackPanel"
Margin="0,0,10,0" Background="LightGray">
<TextBlock TextWrapping="Wrap" Text="Use a slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).A slider is a good choice when you know that users think of the value as a relative quantity" />
</StackPanel>
</Grid>
</SplitView.Pane>
<Grid Name="ContentGrid" Background="LightSteelBlue">
</Grid>
</SplitView>
</Grid>
The StackPanel that is directly under our slider, acts like a cover for our Slider. Notice the StackPanel has Margin="0,0,10,0", this translates to a 10px distance from the right wall, which allows the Slider area to be exposed as a gray strip that is used to drag the Pane, again the 10px is arbitrary but it has to match the Minimum of the Slider.
The basic hamburger menu using SplitView found in many examples is cool but I like the way Microsoft implemented it in some of their apps in Windows 10 such as News and Sports. The way they implemented it is when the SplitView.Pane is open, its height is not the same as the root frame's height. In other word, the Pane's height and Content's height is not the same. The benefit of this style is that full content of the pageheader of the SplitView.Content is visible. Can somebody help me out on how to achieve that effect since I am new to xaml. I hope my question is pretty clear to understand.
Thanks,
AB
On the official "sport"/"news" page, there are several elements: toggle button, SplitView and etc. In the SplitView, there are also several sub-items, such as panel and frame. There are lots of approaches to help you to get your own desired effect: you can use layout panel, such as StackPanel or Grid, to arrange those UI elements on the page; you can modify the splitview's default template; and you can also just customize frame and panel' height by setting their related properties, such as: height or Margin. For more instructions of UWP design please go here.
Below is a simple example by using Grid layout and adjusting "margin" property of splitview's frame. In this example, I put the toggled button and a back button on the page header (you can change the back button to a navigation bar later). Then adjust the "margin" property of the frame, so that it doesn't has the same height as the panel. You can get a complete sample of SplitView here.
<!-- Put the whole page content in a grid of 2*2 -->
<Grid>
<Grid.RowDefinitions >
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="BackButton"
Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Center"
TabIndex="2"
IsEnabled="{Binding AppFrame.CanGoBack, ElementName=Root}"
Width="{Binding ItemsPanelRoot.Width, ElementName=NavMenuList}"
Click="BackButton_Click"/>
<!-- Top-level navigation menu + app content
and put the SplitView in another row to leave space for page header -->
<SplitView x:Name="RootSplitView"
DisplayMode="Inline"
OpenPaneLength="256"
IsTabStop="False" Grid.Row="1" Grid.ColumnSpan="2">
<SplitView.Pane >
<!-- A custom ListView to display the items in the pane. The automation Name is set in the ContainerContentChanging event. -->
<controls:NavMenuListView x:Name="NavMenuList"
TabIndex="3"
ContainerContentChanging="NavMenuItemContainerContentChanging"
ItemContainerStyle="{StaticResource NavMenuItemContainerStyle}"
ItemTemplate="{StaticResource NavMenuItemTemplate}"
ItemInvoked="NavMenuList_ItemInvoked">
</controls:NavMenuListView>
</SplitView.Pane>
<!-- Set Frame's margin property to differ from panel -->
<!-- OnNavigatingToPage we synchronize the selected item in the nav menu with the current page.
OnNavigatedToPage we move keyboard focus to the first item on the page after it's loaded. -->
<Frame x:Name="frame"
Navigating="OnNavigatingToPage"
Navigated="OnNavigatedToPage"
Margin="0,100,0,0" >
<Frame.ContentTransitions>
<TransitionCollection>
<NavigationThemeTransition>
<NavigationThemeTransition.DefaultNavigationTransitionInfo>
<EntranceNavigationTransitionInfo/>
</NavigationThemeTransition.DefaultNavigationTransitionInfo>
</NavigationThemeTransition>
</TransitionCollection>
</Frame.ContentTransitions>
</Frame>
</SplitView>
<!-- Declared last to have it rendered above everything else, but it needs to be the first item in the tab sequence. -->
<ToggleButton x:Name="TogglePaneButton"
TabIndex="1"
Style="{StaticResource SplitViewTogglePaneButtonStyle}"
IsChecked="{Binding IsPaneOpen, ElementName=RootSplitView, Mode=TwoWay}"
Unchecked="TogglePaneButton_Checked"
AutomationProperties.Name="Menu"
ToolTipService.ToolTip="Menu" Grid.Row="0" Grid.Column="0" />
</Grid>
I have a question on Windows Phone 7 XAML programming.
<StackPanel Orientation="Vertical" Width="110">
<Canvas Margin="0">
<TextBlock Text="{Binding Menesis}" Foreground="{Binding MyColor}"></TextBlock>
</Canvas>
<Canvas Margin="0,12,0,0">
<TextBlock Text="{Binding Datums}" Foreground="{Binding MyColor}" FontSize="85" HorizontalAlignment="Center" TextAlignment="Center" />
</Canvas>
<Canvas Margin="0,105,0,0">
<TextBlock Text="{Binding Nedelas_diena}" Foreground="{Binding MyColor}" />
</Canvas>
</StackPanel>
How to make TextBlock (Binding Datums) text centered? Currently it is aligned at right side and
HorizontalAlignment="Center"
or
TextAlignment="Center"
doesn't work.
If you have your TextBlock in a Canvas you will have problems with the alignment as the TextBlack will be placed at 0,0 (top left) inside the canvas control and (unless you set the width explicitly) will be stretched to fit the text contained. This basically means your text will always be left aligned.
The Canvas control should only be used when you need to set the exact position of the contained elements. If this is not the case then use another container such as a Grid, StackPanel or even just a ContentControl.
Remove the Canvas from your xaml and it should work.
To clarify HorizontalAlignment vs. TextAlignment:
If you have a ContentControl that is 400px wide and you add a TextBlock to it that is set to be 200px wide with text content that is 100px wide, then the following is true:
Setting the HorizontalAlignment to Center will align the TextBlock (200px wide) to the middle of the ContentControl but the text will still be left aligned within the TextBlock. This means the text will be offset 100px from the left.
If just the TextAlignment is set to Center then the TextBlock will be left-aligned but the text inside will be centered. This means that the text will be offset 50px from the left.
In my opinion the best practise here is not to set any widths and just set the TextAlignment property. This will mean (for most containers) the TextBlock will be stretched the entire width of the container and the text within aligned appropriately.
Instead of using stack panel and canvas . either u can use Grid. If you are using grid you can point out the exact position where you need to place the control.
for eg,
<----- Height -->
like this. More over there is no need to use canvas. The canvas container is using mainly in case of game design purpose.