DevExpress Tutorial - Fluent Design Form | FoxLearn

welcome to foxlearn in this video i'll show you how to create a fluent design form in c-sharp using devexpress control after you finish creating a new windows forms project you can right-click on your project then select add devexpress item [Music] to create a new project with a fluent design form you can use the devexpress template galleries fluent design application project template the fluent design form is a windows 10 inspired form with features like embedded hamburger menu adaptive layout mode for the hamburger menu acrylic material effect reveal highlight visual effect [Music] next open your program class then replace your main form to fluent design form a fluent design is a ui type developed by microsoft and released with the 2017 fall creators update for windows 10. this design type mixes plastic light translucency with 3d effects advanced lighting and new transitions between different application states and don't forget to add devexpress tutorial library to your project you can easily find it in the installation directory next open your form designer then select the accordion control the accordion control is a side navigation control whose items can be organized into groups to add accordion control groups and items click the run designer link on the control surface and switch to the designers elements tab you can easily drag and draw elements in the accordion control elements panel to rearrange and categorize them [Music] the fluent design form container allows you to add custom controls to this container to display them in the forms client region [Music] next open your fluent design forms code behind then add a load module a sync method that allows you to load the user control into your form [Music] you need to check your fluent design form container to make sure it does not contain the user control that you want to add if it already exists just open it again by calling the bring to front method [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] you can create user controls to practice demo then you can also dynamically load user controls based on the elements you click on [Music] after you finish creating the user control you should change the inheritance from extra user control to tutorial control base class [Music] next open your user control designer then drag layout control grid control and bar manager from your visual studio toolbox into your user control designer you can design a simple ui that allows you to display data in grid control [Music] do [Music] next right click on your project then add an ado.net entity data model to your project we will use entity framework to retrieve data from the sql database in this tutorial i will use the northwind database to practice the demo if you don't have the northwind database in your sql server yet you can watch the video i uploaded on how to download and install the northwind database into sql server [Music] next open the category user control then add a formload event handler that allows you to retrieve category data from the northwind database then populate data to the grid control you can do the same for other forms [Music] [Music] [Music] [Music] [Music] do [Music] [Music] next open your fluent design form then add the formload event handler that lets you load the default user controls you want [Music] you can also use bar static item to describe the navigation [Music] [Music] do [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] so [Music] [Music] [Music] [Music] adaptive layout is the final important component of fluent design and our new form implements this using two threshold values for its width when a user resizes the form the accordion control automatically changes display mode depending on the width it automatically switches the hamburger menu's display mode between inline overlay and minimal when you expand or shrink the form thank you for watching this video and don't forget to subscribe to my channel

Channel: Fox Learn

Views: 43,555

Keywords: foxlearn, c#, .net, devexpress tutorial, c# fluent design form, devexpress fluent design form, fluent design, devexpress, devexpress fluent design form container, devexpress fluent example, devexpress fluent design form tutorial, devexpress fluent ui, devexpress fluent form, fluent design theme for windows 10, fluent design form devexpress, fluent design form container example, developer express, c# accordion control, c# accordion control winforms, c# accordion menu

Id: tBJ6PqUAvQM

Length: 20min 37sec (1237 seconds)

Published: Fri Nov 13 2020