Responsive Grid UI for WinUI 3 App

As times and technology have changed the need for web based applications has really faded away. Trying to cram all the native device functionality into the browser using the shims and hacks for all these years has been very frustrating to say the least. I’m moving into native desktop and mobile application development.

For Windows Desktop I’m using the Win UI 3 application development environment to develop the modern responsive applications for Windows 10 and Beyond.

Here is the XAML for a responsive grid for WinUI 3 Application Development

<Grid>
	<Grid.RowDefinitions>
		<RowDefinition Height="10*"/>
		<RowDefinition Height="87*"/>
		<RowDefinition Height="3*"/>
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="1*"/>
		<ColumnDefinition Width="2*"/>
	</Grid.ColumnDefinitions>

	<!-- Top Row -->
	<Border Grid.Row="0" Grid.ColumnSpan="2" Background="LightBlue">
        <TextBlock Text="Top Row" HorizontalAlignment="Center" VerticalAlignment="Center"/>


    </Border>

	<!-- Left Column of Second Row -->
	<Border Grid.Row="1" Grid.Column="0" Background="SkyBlue">
        <TextBlock Text="Second Row Left Column" HorizontalAlignment="Center" VerticalAlignment="Center"/>

    </Border>

	<!-- Right Column of Second Row -->
	<Border Grid.Row="1" Grid.Column="1" Background="DodgerBlue">
        <TextBlock Text="Second Row Right Column" HorizontalAlignment="Center" VerticalAlignment="Center"/>

    </Border>

	<!-- Bottom Row -->
	<Border Grid.Row="2" Grid.ColumnSpan="2" Background="SteelBlue">
		<TextBlock Text="Bottom Row" HorizontalAlignment="Center" VerticalAlignment="Center"/>
	</Border>
</Grid>

How to focus text box in Blazor project

If you have to spend a lot of your time in your day doing repetitive tasks such as entering data into forms then you will likely agree that it can be quite convenient to focus on a textbox in a form.

When you’re accessing a form over and over filling out the same field it can be a huge time saver to have the cursor already in the box ready for you to type and hit enter.

It can greatly reduce the stress of repetitive task by not having to use the mouse as much.

According to the Microsoft training portal, you can easily accomplish this convenient feature in a Blazor project.

All you have to do is add a reference to the input element, then a line of code to activate it. Here is a summary of the information I learned in the Microsoft Training Portal.

  1. The Blazor directive @ref="formInputName" lets the code block create an ElementReference to reference the input element. You can then use this element reference to call FocusAsync after a page has been rendered.
  2. Add code to call FocusAsync after a page has loaded
<input @ref="formInputName" @bind="MyForm.formInputName" />

Now add a variable to activate and use that reference, and the code to call FocusAsync after a page has loaded:

private ElementReference formInputName;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender) {
        await formInputName.FocusAsync();
    }
}
Form with a text box focused by the Blazor FocusAsync().
Screenshot taken from the results of taking a Microsoft Training.