Page Navigation In WPF Using a Frame Control in C#

hi guys welcome to tactic devs in today's video i'll be showing you guys how to navigate between pages in wpf with the help of a frame control now a frame control is simply a content control that supports navigation so that means you can actually set its content to any type however pages are the preferred way of packaging content that's intended for navigation so without further delay let's get to the coding so the first thing i'm going to do is i'm going to create a landing page this will be kind of like the home page of the application and this will contain some clickable controls and once these controls are clicked some logic will be executed to navigate to a specified page now the controls will be clickable but their visual appearance will contain an image and some text something similar to what you see when browsing through folders that's an icon and some text and they will also contain some extra information about the page that we intend to navigate to now because wpf doesn't have such a control that means i'll have to create a custom control to suit what i need so that's the first step i'm going to be taking i'll create a custom control and then we can go to the implementing of the navigation okay so here in my project i'll go to the project and then i'll add new item under the wpf tab i'll select custom control and i'll just give the name nav button okay so visual studio added in a class which is the nav button class that inherits from the control class i'll go ahead and get rid of this summary now because i want this control to be clickable i'll inherit from the button base class and i'll import the namespace windows controls primitives now because this button is going to contain an image and some text as well as some extra information i'm going to define properties that are going to store that information so i'll define a dependency property and this property will be of the type image source and i'll give it a name image source i'll set its owner class to nav button because it belongs to this class and i'll set its default property to no let me get rid of this comment there and place this field at the top i'll define another property and this will have the type of string and i'll give it a name text i also set its default data to now get rid of this comment as well and set the field at the top now i also want to hold extra information about the page that i intend to navigate to and i'll store this information in form of a uri object this will be very useful when it comes to navigating so i'll create a dependency property and this would be of the type uri and i'll give it a name nav uri or set its default data to know and place the field at the top here so at this point this is what this nav button ui control is going to need for now and now when visual studio creates a custom control it also includes a folder and this folder is called the themes folder and it contains a file called generic which is which is simply a resource dictionary that contains a style to this nav button here so if i open up this file you can see it's a resource dictionary and it contains a style and this style targets the nav button and it also sets a con control template so simply this would define the appearance of the control that we just created so i'm going to add in a couple of things now i'm going to leave this border as is now i'm going to add in a grid and i'll split this grid into two rows now the first row is going to have a height of 50 pixels and the second rows height will be set to auto so by actually placing the star character that sets that to autumn now inside this grid i'm going to define an image and i'll place this image inside the first row of the grid so by defining the grid row property i'll set that to zero which means it'll be placed in the first grid and i'll set the source of this image to the source to the image source that was defined in this class so i can do that by actually using a template binding and access that property which is image source here so the image that will appear here will actually come from the class which is the button class okay i'll set its stretch to uniform and i'll set its margin to two i'm pixels going to add in a text block i'll place it in the second row it's text property i'll create a template binding and i'll bind it to the property that we created which is the text property here i'll set its text alignment to center and wrapping text wrapping property will be set to that will be set to wrap i'll also give it a margin of two pixels okay so let me see okay that's great now i would like that whenever this control is whenever the mouse enters this control a line is drawn around the control a dotted line so i can do that by adding in a rectangle because a rectangle allows us to create a dotted stroke which is the line around the the rectangle so i use a rectangle control so by adding that to the grid i'll set its fill to transparent because at the moment we only want to use the the stroke and i'll set its stroke property to royal blue now for me to define a dotted line i need to define to to assign the property which is the stroke dash array so just do one stroke one comma two and also set its thickness i'll set that to zero so initially when the control is in its normal state without mouse cursor over it this rectangle which will be around it will actually have no stroke so it won't appear because it's fill is also set to transparent and the stroke will be zero so it should only appear whenever the mouse hovers over it now i'm going to place this rectangle in both rows and i can do that by setting the grid row span to 2 so it just simply means this rectangle won't be confined to one row it will actually fill both rows of the rectangle so it will actually take the size of the rectangle and i also give it a name i'll give it a name line now for me to get the behavior of whenever the mouse cursor hovers the control the the line appears i need to define some triggers here so i'm going to define some triggers for the control template so that's ctrl so this trigger will actually target a property and that property will be his mouse over so it will be listening for this value and whenever this mouse hover property is set to true it's going to actually set some property here so i'm going to place in a setter inside so this setup will actually target a property of stroke thickness and i'll specify which which element i want to set the stroke thickness so i'll just specify the name the target name and that's the line so i want to set the line's thickness to one whenever the mouse hover is true so that will actually cause the dotted line to appear around control so apparently the control has been created i'll just define another setter here so this set is going to target the whole control it's going to set a margin around the control so target the margin property and set the value to two pixels all right so apparently this is the control so just go ahead and build the solution all right so the solution was built successfully so i'll just go to the main window here now earlier on in my project i added in a folder called images and i'll be using these images for setting the image icon on the control i just created now it's important that when you use images in your application that you set the build action to resource and the copy to output directory property set that to always copy so remember to do that on all of the images here that is very important because at some point at runtime the application is going to look for the images and if you haven't specified where the images will be found by copying them to the output directory it might cause a runtime glitch where the images don't appear okay so i'll just go ahead and test the control i created so i'll just type in nav button as you can see it appears here under the local namespace okay now i'll just set the text okay what i'll do is i'll resize it just here in the properties i'll go to layout i'll set it to center okay now it's here so i'm going to define a text property which we created earlier on now just try jamie and we can see it appears here jamie now what i'm going to do is i'm also going to define the the image by setting the image source property so right here in the properties panel i'll just navigate to the bottom tab here and we can see there's a property here it's called image source so i just click on an image so i just go for accounts okay so we can see that the control has an image and a text okay all right now i also set the his mouse over property i'll set that to okay i'll just leave that for now okay so i'll just go ahead and delete this control now what i'm going to do here is i created um a folder called pages so i'm going to create some pages as well as the landing page so just go to add page so i'm going to create a page based on the images here so i'm going to create a page called accounts okay so the accounts page was added i'll just set grid's background color to black sorry i'll set it to white actually okay now i'm going to place a label in the grid and i'll define some content or just adding some text i'll give it a font size of 50 pixels now i'm going to place this label just at the center of the grid by setting the horizontal alignment and the vertical alignment to center okay great now this would define the page accounts now what i'm going to do is i'm going to add in a button and this button will be placed at the corner here now this button is going to allow us to navigate backwards so just define a button or set its height 25 and horizontal alignment to left and vertical alignment to top okay so here's our button in fact just get rid of that height i'll set its content to some text back i'm going to give it a margin on the left of 5 pixels 10 pixels and on the top 10 pixels okay so that's the back button and i also give it a padding of five pixels i'll set its border thickness to zero so this button will be responsible for navigating us backwards now there's something interesting about wpf and the way it's actually designed so there's a class called the navigations command class this class contains some commands that will be very useful so let me go to the main window xaml.cs file here and i'll just type in navigation commands so i'll press f12 to navigate to the class definition so this navigations command class has got a couple of commands that we can use and one of them is browse back here so this command is responsible for browsing back now let's go to the accounts page here that we created now because this is a page and this page will be hosted inside a frame which is actually a navigation host now when we use the browse back command it's going to notify the host to browse backwards based on the history so if we browse to the accounts page from the landing page and we click this button that's actually going to execute the browse back command it's going to alert the hosting um which is the hosting control which is actually the frame to browse back to the landing page so i'll just define the command for this button here and i'll just say navigation commands browse back now apparently we see an error here so if i build the solution this error is going to disappear so just go ahead and do that okay so the solution was built successfully and the error went away so what i'm going to do at this stage is i'm going to add a couple extra pages and i'm also going to add the landing page all right so i added in a couple more pages here i also added in a landings page so just go ahead and close this accounts page and this class okay now what i'll do is i'll open up this landings page and i'll just give it a background of white so i'm going to place in the control that i just created which is the navbar control i'll place in a couple of them here so i'll first define a wrap panel now at this point we can't see the nav button control appearing here because this page exists in a different namespace it exists in the pages folder here so it actually exists in the page navigations pages namespace but our control here exists in the page navigation namespace so i need to define a namespace here so just start by copying i'll change this name i'll just give it any random thing i'll just give it n and i'll get rid of these pages here so our control exists inside this page navigation namespace and that's because it's in the root of the project okay so now i'm adding a navigation button and you see here namespace n then uh the namespace we just defined so i'll set its property text property i'll set that to accounts okay so here we see accounts now i'm going to place i'm going to set a padding of five pixels sorry imagine five pixels around this wrap panel so that the controls move slightly inwards so on this nav button right in the properties panel i'm going to set the image source to images accounts here so we have the controller there now if you remember earlier on i defined the property which is the nav uri so that's a property that holds information about the page that we intend to navigate to so i'm going to set that property as well here now i can set it just by you know typing the path to a page or i can actually use the buttons panel here and the thing about visual studio is when you create a custom control and you define certain properties that it can recognize it's going to help you in terms of productivity by making it easier for you to just set that property so here you can see nav nav uri the properties appear in here and it actually sets a combo box here and just by clicking this drop down we can select so i'll just select the pages accounts page here so it's going to store that information in form of a in form of a uri object so based on this text is going to create a uri object and store it in that variable now i'm going to do this for the rest of the pages and we'll continue from there all right so i went ahead and added in a couple more nav button controls and i also assigned them properties now because the nav button inherits from the button-based class it also inherits an event called the click event now i can set event handlers on each individual nav button control here but that won't be good practice instead i'm going to set the handler on the parent which in this case is the grid so just type in button base click and i'll add in a new handler so basically what happens here is the nav button technically inherits from the button base class so it's actually a button base so if an event is raised when i click this nav button it's going to look for an event handler but since i haven't defined one on the button it's going to move up to the wrap panel and the wrap panel doesn't have it will now move to the grid and if it finds the button base click event handler defined it's going to execute the code that's going to be implemented in that event handler this is called event routing now if i go to the landing page here the code behind you can see an event handler as has been added here now this page which is landing inherits from the page class let's just go to this class so there's an interesting property called the navigation service property here so it gets the navigation service that the host is using to manage navigation okay so if we go to the code behind him so there's a property called navigation service so it will get the navigation service that the frame is using because this page will be hosted in the frame so we can actually access the navigation service of the frame using this property now when this event is raised i can actually get the element that was clicked by using this argument here now that element can be any element inside the grid that is a button-based type so that's the navigation button so what i'll do is i'll create a variable here and i'll just give it a name clicked button so using this e that's returned so e then i'll type in original source so i can actually get the object where the click event originated from now i need to cast this object now in my case i know it's enough button so i just type in or cast it to a nav button okay now using the navigation service property here it contains a method called navigate here and this navigation navigate method can take in some arguments and one of the arguments is it can take in a uri object now we know that we stored a uri inside the nav button here so we can use that property now if we go back to the landing page here you can see that each nav button has got nav uri and we saved the page that we intend to go to so we'll be using this property so using that property we can just type in clicked button then nav uri okay so this will navigate us to the uri that's that's saved in this property okay so that's it for the landing page so that's the landing page and the code behind now i'll go to the main window here and i'll add in a frame now i want the frames default page or the initial page to be set to the landing page so i'm going to define a source here so source will simply the page that i want to navigate to but i'll choose that source in the properties panel here so under source i'll just click and i'll look for the landing page okay and i also set the navigation uri ui visibility sorry so that's i'll set that visibility to hidden so it prevents a toolbar from appearing at the top of the frame and that toolbar contains some buttons so that we we just see the page that's been hosted okay so i'll go ahead and test the program all right so the application is up and running so just go ahead and click the accounts button here and it navigates me to the accounts page i'll click back here and i go back i'll click on employees and here we are back or click on settings and we go to the settings page and i'll go back so that's it guys and i hope you learned something like navigation and creating a custom control so thanks for watching and remember to like share and subscribe it really helps me in bringing out this content see you in the next one you

Channel: Tactic Devs

Views: 3,767

Keywords: WPF, programming, desktop, .net6, visual studio, page navigation, mvvm

Id: 1PD4H35ETGw

Length: 33min 14sec (1994 seconds)

Published: Thu Sep 16 2021