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.
Related
Tabbar is a very common navigation control on iOS and Android. But UWP doesn't seem to have.
I've seen an example XamlPivot(SHORTCUT)①, Use Pivot to make TabBar, The effect is very good, and I tried to modify it, so that the TabBar in the bottom, content in the upper.
My project is MasterDetail, Master part is TabBar(i.e TabsStyle Pivot), Detail part just a blank.
Now I found a big problem, TabBar each item does not automatically divide the width, then I try to use data binding and value converters to dynamically provide the width, the binding source is the ActuallyWidth of the MasterGrid, but the ActuallyWidth does not change with the window size, and when the Window on WideState, the Mater part will become blank.
So, How to change the width of the TabBarItem dynamically?
Various window size effect chart(Remove"()"):
(https:)//i.stack.imgur.com/3GE5t.png
(https:)//i.stack.imgur.com/FyQuX.png
(https:)//i.stack.imgur.com/pChwz.png
(https:)//i.stack.imgur.com/cib1l.png
XAML:
<Pivot x:Name="pivot"
Style="{StaticResource TabsStylePivotStyle}">
<PivotItem>
<PivotItem.Header>
<local:TabHeader Width="{Binding ActualWidth, Converter={StaticResource AutoWidthConverter}, ElementName=pivot, Mode=OneWay}"
Glyph=""
Label="item 1" />
</PivotItem.Header>
<TextBlock Text="Content content content" />
</PivotItem>
<PivotItem>
<PivotItem.Header>
<local:TabHeader Width="{Binding ActualWidth, Converter={StaticResource AutoWidthConverter}, ElementName=pivot, Mode=OneWay}"
Glyph=""
Label="item 2" />
</PivotItem.Header>
<TextBlock Text="Content content content" />
</PivotItem>
<PivotItem>
<PivotItem.Header>
<local:TabHeader Width="{Binding ActualWidth, Converter={StaticResource AutoWidthConverter}, ElementName=pivot, Mode=OneWay}"
Glyph=""
Label="item 3" />
</PivotItem.Header>
<TextBlock Text="Content content content" />
</PivotItem>
</Pivot>
Converter:
public object Convert(object value, Type targetType, object parameter, string language)
{
return (double)value / 3;
}
For the record, ActualWidth is NOT a DependencyProperty in UWP XAML model - so can't participate in bindings properly (it doesn't notify of changes).
So if you wish to do a binding like you're doing, you're going to need to expose ActualWidth in a bindable way. One of the easier ways of doing so is to a create a Behaviour explicitly for that, that attaches to the SizeChange event of the target element (in your case the pivot), and returns it's ActualWidth / ActualHeight / RenderSize as DependencyProperties on the behaviour. Your TabItems would then look to the ActualWidth on the behaviour instead.
(It's not done by default presumably because UWP XAML doesn't have read-only dependency property support, and binding too it can easily lead to circular layout cycles when layout rounding is in play if you're not careful)
I have content page in my xaml file. I have a Stacklayout with orientation vertical in it. I want to put a dialog in middle of content page above this stacklayout. Please suggest some way. Thanks in advance!
An easy way to provide dialogs that feel native to the platform your on is through using the UserDialogs plugin.
If you want to create something of your own you would probably have to come up with something like this:
<Grid>
<StackLayout>
...
</StackLayout>
<Grid IsVisible="{Binding ShowMessage}">
<Label Text="Message" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
</Grid>
The nested Grid will act as an overlay of sorts spanning your entire page.
I am attempting to make a multipage app and would like to use a common navigation toolbar across all pages. The page includes:
<Page.TopAppBar>
<AppBar >
<StackPanel Orientation="Horizontal">
<Button />
</StackPanel>
</AppBar>
</Page.TopAppBar>
In App.xaml I can define the AppBar that goes into the Page.TopAppBar:
<Application.Resources>
<AppBar x:Key="CommonAppBar" x:Name="AppBarCommon">
<StackPanel Orientation="Horizontal">
<Button />
</StackPanel>
</AppBar>
</Application.Resources>
But how can I use this AppBar defination in the Page xaml?
You can use the Frame control on one page and show another your pages inside that frame. Then you can add an AppBar to this page.
By the way, the AppBarButton is the button that is used inside an AppBar, not StackPanel and Buttons (your approach will still work, but if you expect the same behaviour and look as in other UWP apps, it's easier to use AppBarButtons).
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 am trying to add a context menu which shows menu items horizontally. My sample code:
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<StackPanel Orientation="Horizontal">
<toolkit:MenuItem Tap="CallMenuItem_tapped">
<toolkit:MenuItem.Header>
<Image Height="50"
Stretch="Uniform"
Source="Assets/icon1.png" />
</toolkit:MenuItem.Header>
</toolkit:MenuItem>
<toolkit:MenuItem Tap="ChatMenuItem_tapped">
<toolkit:MenuItem.Header>
<Image Height="50"
Stretch="Uniform"
Source="Assets/icon2.png" />
</toolkit:MenuItem.Header>
</toolkit:MenuItem>
<toolkit:MenuItem Tap="OtherMenuItem_tapped">
<toolkit:MenuItem.Header>
<Image Height="50"
Stretch="Uniform"
Source="Assets/icon3.png" />
</toolkit:MenuItem.Header>
</toolkit:MenuItem>
</StackPanel>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
I am facing some problems. First of all when I tap a menu item the specific event is called but the menu remains open. As I am showing all the menu items in one line(horizontally), I am unable to fix the height and width of context menu. Is there a better way to add a horizontal context menu using icons?
I would suggest you to use the ItemsPanel property to set the layout as horizontal stack panel. And if you still face any issues then you can manually close the context menu using the IsOpen property. Hope this helps you.