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.

XR Fusebox Project

AI generated art representing my multimedia production studios.

I’m very proud of my completion of the augmented reality fuse box challenge project.  This was a very exciting course in which I learned  how to program A/R image target recognition applications without an external third party engine.  Using only Unity built-in functionality I was able to define an image target and spawn a 3D object onto that target through the user’s camera. 

Continue reading XR Fusebox Project

AI development tools

Artificial intelligence: more commonly known as AI.  It’s a hot topic these days and there are many wild rumors going around of what AI can actually do. To help clear up the questions about this topic I’ve compiled a list of some of my favorite AI resources for artists and creators.  Using these tools you can do so many things. From writing a letter to creating and generating unique artwork. Even music and animations are able to be generated using AI.

Continue reading AI development tools

Space Maids

A space maid is a person who works as a maid in a space station, a spaceship, or a planet. A space maid wears a uniform that is similar to a traditional maid outfit, but with some modifications to suit the environment and the tasks. For example, a space maid may wear a helmet, a jetpack, or a spacesuit, depending on the situation. A space maid may also have some cybernetic enhancements or gadgets to help with cleaning, cooking, or fighting.

https://soundraw.io/edit_music?m=648ca15aa435a800126e4242

Continue reading Space Maids

Visual Scripting In Unity : Rotate an object

Here are variations on how to rotate an object using visual scripting. For this demonstration I made two cubes rotate automatically as well as via user input. One will rotate using the XBox controller and the other one is controlled using keyboard.

Continue reading Visual Scripting In Unity : Rotate an object

Unity Rotate Object

A simple script to rotate object in Unity

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Rotate : MonoBehaviour
{
    Vector3 movement;
    public int xi, yi, zi;

   
    void Start()
    {
        movement = new Vector3(xi, yi, zi);
    }

    
    void Update()
    {
        transform.Rotate(movement * Time.deltaTime);
    }
}


Add values to the public variables xi, yi, zi depending on the speed and direction you would like the object to rotate.

A/R Enhanced Comic Books

With this fun project I set out to enhance comic books using augmented reality technology. I chose a few covers from some of my favorites and tried to follow the theme of the comic book cover while adding augmented reality enhancements. The 3D objects and animations that enhance the scene when viewed through a camera seem to be a perfect combination.

Building on what I learned in my first project, I made five different AR targets and programmed each one with a different augmented reality effect. Some of them are quite complex such as smoke coming out of the chimney of a house and even characters that attempt to attack an enemy.

The first one is the cover of one of my beloved childhood comic book characters: Garfield. What could be better than looking at the cover through a camera and seeing Garfield trying to devour a steaming cheeseburger.

Continue reading A/R Enhanced Comic Books