How to add custom icons in NavigationViewMenuItems in UWP - c#

I am trying to use NavigationView with custom icons as Menu Items in my UWP app. However, it seems NavigationView don't accept custom icons or BitmapIcon. The sample application I have seen in android is below;
Sample Code of NavigationView Menu Items
<NavigationView.MenuItems>
<NavigationViewItem Name="SalahNavItem" Icon="CustomIcon" Content="Apps" Tag="Salah"/>
<NavigationViewItem Name="AppsNavItem" Icon="CustomIcon1" Content="Apps" Tag="apps"/>
</NavigationView.MenuItems>
What I am trying to achieve is to add custom Icon / Image in Menu Items, any clue about it in UWP?

You can add custom Icon Use
<NavigationView.MenuItems>
<NavigationViewItem Name="SalahNavItem" Icon="CustomIcon" Content="Apps" Tag="Salah">
<NavigationViewItem.Icon>
<!-- Use Custom icon <FontIcon Glyph=""/>
Or <BitmapIco UriSource="Path"/> -->
</NavigationViewItem.Icon>
<NavigationViewItem Name="AppsNavItem" Icon="CustomIcon1" Content="Apps" Tag="apps"/>
</NavigationView.MenuItems>
See this link

Expanding a bit on the above answer:
<BitmapIcon UriSource="ms-appx:///Assets/globe.png"/>
https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.bitmapicon?view=winrt-22000

Related

WinUI 3 Desktop Navigation View Page

I started using WinUI 3 to build a desktop program to replace the old WinForm program. I use NavigationView in the main Window to manage the pages in the program. The first page (frame) displayed will be a login screen. I want to disable the navigation menu and enabled when user login successful. My problem is how can I access the navigation menu in the frame (the page in the frame FMMain)?
<NavigationView x:Name="NVMenu" PaneDisplayMode="LeftCompact" IsSettingsVisible="False" IsPaneOpen="False">
<NavigationView.MenuItems>
<NavigationViewItem x:Uid="NVIHome" x:Name="NVIHome">
<NavigationViewItem.Icon>
<FontIcon x:Uid="FIHome"/>
</NavigationViewItem.Icon>
</NavigationViewItem>
</NavigationView.MenuItems>
<Frame x:Name="FMMain" />
</NavigationView>
Thank you.
You can have a global static property, which your login frame can access. Then, bind the 'Enabled' property of your Navigation view item to it.
Add a folder under the project: "Views"
Then add an empty page (C# - WinUI - Blank Page) and rename it.
Now the project folder looks like this:
Project Name
Properties
Assets
Views
BlankPage1.xaml
BlankPage1.xaml.cs
BlankPage2.xaml
BlankPage2.xaml.cs
App.xaml
App.xaml.cs
MainWindow.xaml
MainWindow.xaml.cs
MainWindow.xaml
<NavigationView IsBackButtonVisible="Collapsed" IsSettingsVisible="False" ItemInvoked="nav_iteminvoked">
<NavigationView.MenuItems>
<NavigationViewItem Icon="Play" Content="Page1" Tag="WinUI3.Views.BlankPage1"/>
<NavigationViewItem Icon="Play" Content="Page2" Tag="WinUI3.Views.BlankPage1"/>
</NavigationView.MenuItems>
<Frame x:Name="contentFrame"/>
</NavigationView>
Change the "WinUI3" in navigation view item tags to your project name.
MainWindow.xaml.cs
using System;
private void nav_iteminvoked(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewItemInvokedEventArgs args)
{
Type newPage = Type.GetType(args.InvokedItemContainer.Tag.ToString());
contentFrame.Navigate(newPage, null, args.RecommendedNavigationTransitionInfo);
}
Don't do that, winui3 is not production ready. I am strugling with many issues.
To name a few - scrollview does not work properly (does not work at all, to be specific), badges are not implemented yet, window icon must be set with win32, if you need data table, community toolkit is only free way, but it does not support net6 yet...

How can I change the Right-Click menu of a RichTextBlock in UWP

I want to override the right-click menu in a RichTextBlock or a TextBlock, I have been searching for the solution and tried using RightTappedEvent, but it did not fire when right tapped a chosen text, but it fired when I right tapped in elsewhere in the control.
Yes, you can use ContextFlyout to change it.
You can add the ContextFlyout to custom your menu.
The code shows how to add the custom menu.
<RichTextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
<RichTextBlock.ContextFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="1" />
<MenuFlyoutItem Text="2" />
</MenuFlyout>
</RichTextBlock.ContextFlyout>
<Paragraph>Welcome to my blog http://blog.lindexi.com I write some UWP blogs</Paragraph>
</RichTextBlock>
See UWP How to custom RichTextBlock right click menu
All code is in github

How do I add a background image to LayoutDocumentPane?

I have created a Resource for the ImageBrush, see below, but I do not know how I would add it to the AvalonDock LayoutDocumentPane. I want to add it to the pane because I want to have a logo in the background, but LayoutDocumentPane covers the Window background.
<BitmapImage x:Key="LogoBitmap" UriSource="pack://application:,,,/myLibrary;component/myImages/myBigLogo.PNG"/>
<ImageBrush x:Key="LogoImage" ImageSource="{StaticResource LogoBitmap}"/>
Right now, I have the following:
<ad:DockingManager x:Name="dockManager" >
<ad:LayoutRoot>
<ad:LayoutPanel x:Name="myLayoutPanel" Orientation="Horizontal">
<ad:LayoutAnchorablePane x:Name="myLayoutAnchorablePane" DockWidth="400"/>
<ad:LayoutDocumentPane x:Name="myDocumentPane"/>
</ad:LayoutPanel>
</ad:LayoutRoot>
</ad:DockingManager>
I was able to find a method of setting a background image that works for my use case, but I am using a very simple AvalonDock configuration so I'm not sure if it will work for you.
This will set the image for the entire dock control, I was not able to find any way to set a background at any level lower than this.
<xcad:DockingManager x:Name="dockingManager">
<xcad:DockingManager.Background>
<ImageBrush ImageSource="/Resources/Images/MDIBACKGROUNDIMAGE.png"/>
</xcad:DockingManager.Background>
<xcad:LayoutRoot>
<xcad:LayoutPanel Orientation="Horizontal">
<xcad:LayoutDocumentPaneGroup>
<xcad:LayoutDocumentPane >
<xcad:LayoutDocument>
<views:MyForm></views:MyForm>
</xcad:LayoutDocument>
</xcad:LayoutDocumentPane>
</xcad:LayoutDocumentPaneGroup>
</xcad:LayoutPanel>
</xcad:LayoutRoot>
</xcad:DockingManager>

Silverlight PathListBox Selecteditem

ı tryed all the ways ı know but its not work I want image Show pictures when ı click item of pathListBox in silverlight here is my website you can see what ı am trying Click to PhotoGalley than left lower corner Picture click on it than storyboard will Show pictures ı want click on images of PathListbox And bind it to image source than ı can see big Picture here tutorial of create carosel & PathListbox But When I do lıke they do sample data create in expression blend xap getting bigger ı didnt create sample data ı load images from images folder in client bin folder here my website Http://forum.websayfaci.net
thx for your hellp
<ec:PathListBox x:Name="pathListBox1" Height="57.388" Canvas.Left="79" Canvas.Top="34" Width="280.248" ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Collection}">
<ec:PathListBox.LayoutPaths>
<ec:LayoutPath SourceElement="{Binding ElementName=path}" Distribution="Even" FillBehavior="NoOverlap"/>
</ec:PathListBox.LayoutPaths>
</ec:PathListBox>
<!--image sources coming from sample collection and this collection created in expreeion blend 4 -->
<Grid DataContext="{Binding SelectedItem, ElementName=pathListBox1}" Height="409" Canvas.Left="79" Canvas.Top="184" Width="247" d:DataContext="{Binding Collection[0]}">
<Image Source="{Binding Property1}" Margin="0,0,0,8" Stretch="Fill">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<ei:HyperlinkAction TargetWindow="_tab" NavigateUri="http://websayfaci.net"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
</Grid>
this xaml code work well but make your xap bigger. now ı try not create collection directly load images from my pictures folder to PathListbox source till here ok but when ı click any Picture on pathlistbox its not work how to bind or how is work selected item things

How to add sub menus to the ContextMenu control in Silverlight 4?

I have the following piece of XAML code:
<controlsInputToolkit:ContextMenuService.ContextMenu>
<controlsInputToolkit:ContextMenu
Height="75"
Width="200"
IsOpen="False"
Visibility="Collapsed"
Closed="mnuPopup_Closed"
x:Name="mnuPopup">
<controlsInputToolkit:MenuItem
x:Name="mnuAnswer911Call"
Header="Answer Call"
Click="mnuAnswer911Call_Click"
IsEnabled="True"/>
<controlsInputToolkit:MenuItem
x:Name="mnuHangup911Call"
Header="Hangup call"
Click="mnuHangup911Call_Click"
IsEnabled="True"/>
</controlsInputToolkit:ContextMenu>
</controlsInputToolkit:ContextMenuService.ContextMenu>
Let's say, based on context, I wanted to add a submenu to the mnuAnswer911Call menu item. How would I go about it?
The Silverlight Context Menu does not support submenus yet. But there are open source alternatives to help you achieve this. Here is one:
www.sl4popupmenu.codeplex.com

Categories

Resources