TGIMBA Windows Presentation Foundation (WPF) Client – Basic User Interface (UI) Components with Basic Navigation

Git  Code

Welcome to another post!

I am going to shift topics yet again. I will definitely be continuing the Artificial Intelligence (AI) and The Globe In My BucketList Application (TGIMBA) .Net Core 2 upgrade posts, but I am going to move (temporarily) to another topic – Windows Presentation Foundation (WPF). Most of my ‘Desktop’ applications have either been WinForms or Universal Store Applications. In an article on my code project daily email, it talked about WPF and I thought it would be nice to do a small client WPF TGIMBA client.

I originally picked TGIMBA as a concept because I got tired trying to continually think up new types of applications to try out with different technologies. Currently, I have a TGIMBA .NET 4.6 Model View Controller (MVC) JQuery and Android client. I am in the process of updating the MVC site to .NET Core 2 with an Angular 2 JavaScript front end.

For any new technology, I just plan on adding a new client (if that is the technology I wish to explore…for example, I plan to add a TGIMBA IOS client in the future) or another back end like I have with the TGIMBA Node JS TypeScript API.  Even though I have not yet replaced the .NET Windows Communication Foundation (WCF) Application Programmatic Inteface (API) with the Node JS API, I will.

With any new UI client, I take stock of what the technology can do and plan accordingly. My last post showed placeholders for each of the TGIMBA components I need for the Angular 2 site. I am going to do the same thing here. I am not sure how far I will implement the WPF client, so I will start simple. For this effort, I will add the following views – Login, Registration, Bucket List, Menu, Add/Edit, Search Entry and Seach Results

With WPF (it seems), the predominant pattern is the Model View View Model (MVVM). Very similar to the Model View Controller (MVC), it drops the controller and puts an abstraction called the view model between the model and the view. As I understand it, the model is the data stored by the system. The view is what the user sees (most likely markup…and in this case, Extensible Application Markup Language (XAML)). The view model ties them together.

I was a little disappointed to learn that WPF is not supported in .NET Core.  I am creating this from the .NET 4.6 TGIMBA Code.

So, based on a number of articles, I create my ‘View’ and ‘ViewModel’ directories and placed the views with their view models I would need to complete a Minimum Viable Product (MVP) TGIMBA WPF client as well as added the user control views to the WPF main window:

mainwindowviewviewmodels

 

Next, I add a basic navigation system to allow the different views to be shown as needed.  This is done by togging the visibility of each user control.  Inside the main window’s code behind, I added a hide all and set visibility methods:

mainwindowcodebehind

The user controls then access these methods by the static main window instance:

loginnavsample

Generally, it is not a good thing to do by exposing the main window in this manner.  But, I read a number of articles on the subject and it seems overly complicated (my opinion) to do something as simple as this.  If this client is actually used or I quickly discover a way to inject the main window reference into the constructor if each user control, I will do so.  This is enough to get me started.

Then, I added a basic place holder for each UI element with button click navigation:

  • Login

one

  • Registration

two

  • Bucket List

three

  • Menu

four

  • Add/Edit

five

  • Search Entry

six

  • Search Results

seven

Next, I will tie each of these elements to the back end system so we have a usable client.

Stay tuned!

References

1) https://stackoverflow.com/questions/29976262/how-to-display-different-views-on-mainwindow
2) https://stackoverflow.com/questions/17025601/the-name-viewmodel-does-not-exist-in-the-namespace-clr-namespaceproject-viewmo
3) http://www.technical-recipes.com/2016/switching-between-wpf-xaml-views-using-mvvm-datatriggers/
4) https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel

 

 

 

<Window x:Class=”TgimbaWpfClient.MainWindow”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;
xmlns:v=”clr-namespace:TgimbaWpfClient.Views”
xmlns:vm=”clr-namespace:TgimbaWpfClient.ViewModels”
xmlns:local=”clr-namespace:TgimbaWpfClient”
Title=”MainWindow” Height=”350″ Width=”525″>

<Window.Resources>
<DataTemplate x:Key=”LoginTemplate” DataType=”{x:Type vm:LoginModel}”>
<v:LoginView />
</DataTemplate>
<DataTemplate x:Key=”BucketListTemplate” DataType=”{x:Type vm:BucketListModel}”>
<v:BucketListView />
</DataTemplate>
</Window.Resources>
<Window.DataContext>
<vm:MainWindowViewModel />
</Window.DataContext>

<Grid>
<ContentControl Content=”{Binding }”>
<ContentControl.Style>
<Style TargetType=”{x:Type ContentControl}”>
<Setter Property=”ContentTemplate” Value=”{StaticResource LoginTemplate}” />
<Style.Triggers>
<DataTrigger Binding=”{Binding SwitchView}” Value=”1″>
<Setter Property=”ContentTemplate” Value=”{StaticResource BucketListTemplate}” />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</Grid>
</Window>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s