[.NET] Advanced Customisation Options with Visual Studio

Advanced Customisation Options with Visual Studio

Moxo QuickWeb Studio's .NET development leaves the user with a Visual Studio project, rather than a built and finished application. This means that the building and deployment of the application is up to the developer. Because of the nature of this development method, the application can be further customised using C# and .NET from within Visual Studio, before - or after - being built and deployed.

For example, you can use Visual Studio to add additional buttons to the menu, or delete buttons from the menu. We do encourage you to familiarise yourself with the license agreement, as some UI elements and disclaimers must not be removed from your project.

Contents Quick jump to parts of this document:

• Editing, Adding and Removing Menu Items
• Editing Existing Menu Items
• Creating new Menu Items
• Changing the Web-App URL

---

Editing, Adding and Removing Menu Items

Once you have opened your project in Visual Studio, use the _Solution Explorer_ to locate _Startup.cs_. Double click on it, to open it in a tab.

From the tab, you should see a preview of your application. This will include the WebView2, which is where your web-app will be displayed along with the menu bar and menu items, such as Refresh, Back and Forward.

Editing the Menu Items

To edit a menu item, simply click on it in the visual designer. Once it is highlighted, you should be able to access the item's properties. The _Properties_ panel should be in the bottom right, underneath the _Solution Explorer_. For the purpose of this exercise, we recommend sorting the Properties panel in alphabetical order using the A-to-Z filter button.

There are many properties for an item, but some of the ones you may want to adjust include:

Property	Description	Example value
BackColor	The background colour for the button	Control
DisplayStyle	Specifies whether the button includes an image or just text.	ImageAndText
Enabled	Specifies whether the button is enabled and accepts the user clicking on it.	True
Font	The font used on the button	Segoe UI, 9pt
ForeColor	The colour used for the text of the button	ControlText
Image	The image that will be displayed on the item	[Resource]
Margin	Specifies the spacing between this item and adjacent items and UI elements.	15,1,0,2 (Left, Top, Right, Bottom)
Text	The text that appears on the bottom.	Click Me!
TextAlign	Specifies where the text is aligned to, on the button	MiddleCenter
TextImageRelation	Specifies where the text appears in relation to the image (if any)	ImageBeforeText

To edit the text of a button to "Go Back" instead of "Back", simply click the "Back" button and chance the "Text" property to "Go Back".

In addition, you can also specify actions with code for when the button is interacted with. To do this, click on the Events button, which appears as a lightning bolt. You can then double click in the text box to auto generate an event, or type a name for it and hit enter. This will take you to the code file, where you can write custom code for the event. By default, the included buttons should have an "Click" Event.

The code for a click event on a "Back" button is as follows:

private void UI_Button_Back_Click(object sender, EventArgs e)
        {
            //If the WebView is capable of going Back, Execute GoBack();
            if(UI_WebView.CanGoBack == true)
            {
                UI_WebView.GoBack();
            }
        }

Creating new Menu Items

To create a new menu item, simply click on the menu bar itself - or click on the "ToolStrip1" button at the bottom of the designer. This will highlight the menu itself, as well as show a button that allows you to create new buttons. Click on the new button that shows up when you highlight the menu bar, and you will be presented with a series of options:

To create a basic button, click "Button" - but you may want to familiarise yourself with Windows Forms and the .NET Framework, to learn about other buttons and how you might use them. Once you have created a button, you can click on it to view and edit its properties using the Properties panel.

Refer to the article above, "Editing Existing Menu Items" for instructions on how to edit different properties and creating and editing events for buttons.

Changing the Web-App URL

If you've moved your web-app to a new URL and don't want to regenerate the entire project in the event you have custom code and modifications, you're in luck - it is incredibly easy to change your web-app URL with just a few clicks.

Recommended Method

From within the Solution Explorer, expand "Properties" and double click on "Settings.settings". This will open your settings file.

From the settings file, you will have a table that will offer you a few quick and easy settings to change.

Setting	Description	Example value
Developer	The name of the developer.	Ryan Walpole Enterprises
Publisher	The name of the publisher.	Ryan Walpole Enterprises
Version	The version of the application.	1.0.2
ApplicationName	The name of the application.	My Awesome Web-App
WebViewSource	The URL of your web-app, to be shown.	https://ryanwalpole.com/webapp
MainWindowHeight	The height (in px) of the main window.	800
MainWindowWidth	The width (in px) of the main window.	800

To change the URL of your web-app, simply adjust the "WebViewSource" property and set the value to your new URL.

Advanced Method

Additionally, you can use a more advanced method in which you will manually set the URL to a static URL, instead of referring to the settings file. This just means in the future, you'll be required to manually change the URL through code again if the need arises.

From the Solution Explorer, right click on Startup.cs and click View Code to open the Code File.

Then, scroll to where you find the WebView_CoreWebView2InitializationCompleted event.

You'll want to change the line that says: UI_WebView.Source = new Uri(Properties.Settings.Default.WebViewSource); and replace it, with something like the following:

UI WebView.Source = new Uri("https://my-web-app.com/");

Be sure to build and run your application to test that the new URL is working correctly.