Skip to content

[.NET] Advanced Customisation Options with Visual Studio

Ryan Walpole edited this page Feb 28, 2023 · 1 revision

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

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.

image

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.

image

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.

image

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:

image

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.

image

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.

image

Then, scroll to where you find the WebView_CoreWebView2InitializationCompleted event.

image

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.