What is a Xbox Game Bar Widget?
On Windows 10 and 11 you can press the Windows-Key + G. You will see an overlay where you can find some nice little useful programs like a screen-recorder. In my opinion, these tools are not only for gaming, often you can use them for productive tasks as well. For example, to make tutorials like this. There is a Spotify widget and a calculator widget, and you can install even more in the Game Bar app store. But that is not the only possibility to use this great feature. You can develop your own widgets. Everything you need is an idea, a bit of time, a bit of interest in coding, and maybe some C# and XAML experience. But even if you don’t have C# experience, it could be the perfect opportunity to work on a project like that to learn C# and XAML.
The first step…
Download and install Visual Studio
Visual Studio has 3 different versions, a Community, a Professional, and an Enterprise version. But i am using the Community version, because it is free. The only restriction is you have to create a Microsoft account.
After you have downloaded the installer, you have to choose the packages you need for development. For this project, we need only these packages.
Before we start coding…
In my opinion, creating a git repository is the most important step in every project. It is a backup for your project. Nothing is worse than lost code. But it isn't only for that reason, you will try some things on your projects and it is really superb to have different states of your project where you can jump around.
My repository of this little experiment is right here…
Create a new UWP project in Visual Studio
One last thing…
We have to follow this guide from Microsoft.
So add the NuGet package
Modify the App.xaml.cs File
Next, we need to open the Package.appxmanifest as code
As it is written in the guide from Microsoft, we have to add some lines of XML
After these modifications, we can start with the interesting part…
Make a sketch
Every time I plan a project, I have an image of the app in my head, so I first make a sketch to see if the image in my head fits on a screen. Mostly it looks like that…
That's the reason why I'm not an artist. But it helps a lot to have something like that for the development of an app.
From sketch to screen…
I personally don't like the standard UI components, so we are adding Windows UI for a better-looking user interface.
To use those Windows UI components globally, we have to insert this code (Line 7–9).
Now we are ready to build the UI
In XAML are some basic elements like a grid or a stack panel, if you need a better understanding of what those elements are, maybe this helps…
But for the counter widget, we need a stack panel that is stacked vertically and one more inside the vertically stacked one which is horizontally stacked.
Inside of the horizontally stacked stack panel has to be a button, a textbox, and another two buttons.
The first button should decrement the counter by one.
The textbox should be for the counter value. It has to be a textbox because we want to click inside to change the number.
The second button should increment the counter by one.
And last but not least, the last button should reset the counter to zero.
Let us write some code…
DataContext="{Binding RelativeSource={RelativeSource Self}}"Is for the Bindings of the Textboxes
Loaded="LoadState"Triggers an event after the app has finished loading.
For the two-way binding, we need to implement the INotifyPropertyChanged interface.
I am using the localSettings to save and load the state of the app.
First look
Simple and beautiful…
The Github Repository
