WPF

WPF PreviewKeyDown Fired Multiple Times

gbstack 0 Comments

I want to implement such feature: In a barcode text box, when a "=" key (or "+" key) is pressed, the "=" (or "+") character will not append to barcode textbox, and program will use textbox text as barcode to search product item.

 

To achieve this effect, we need use handle PreviewKeyDown event. Listening for KeyDown event is not working here, because when KeyDown event is fired, the new character is already appended to the textbox. (PreviewKeyDown is a tunneling event and KeyDown is a bubbling event)

But when I pressed "=" key, the PreviewKeyDown event is triggered multiple times.

 

By debugging I found only one event's IsDown property is true, while other triggered events' IsDown property is false and their IsUp property is true. To fix this solution we can check whether e.IsDown is true.

C# WPF Generate and Display QR Code

gbstack 1 Comment

Download QrCode.Net

Download and install QrCode.Net from NuGet, there are two ways to install it.

Right click your project, select Manage NuGet Packages, in newly opened NuGet Package Manager tab, choose Browse tab and type QrCode.Net in Search text box, and install the QrCode.Net package by clicking the download icon at right side.

Or

Run following command in Package Manager Console

 

Create Container Window

Create a window with name MainWindow and add an Image control named QrCodeImage into it.

MainWindow.xaml

 

Display QR Code in Window

In MainWindow.xaml.cs MainWindow constructor function, add following code (should be located after InitializeComponent() method)

 

Running the project you will see the QR Code is displayed in the MainWindow.

 

 

WPF Set StartupUri in code

gbstack 0 Comments

Introduction

StartupUri is a property of Application class, which sets the first UI to show when application starts. By default it's set in App.xaml file, e.g.

In above code the StartupUri value is MainWindow.xaml, and using default value is OK for most of times.

 

Why Set StartupUri in Code?

But what if you want to show other windows according to different conditions? Assume our application can open .proj files, so the file name will be passed in as command line arguments.  Now we want to show a file chooser dialog at startup if user run our application directly (without double clicking .proj files), and open another window (call it Project Explorer) when user start application by double clicking .proj file.

In this case we need to check command line arguments, then set corresponding StartupUri in code.

 

How to Do it

First in App.xaml.cs, add an override method OnStartup for Application class.

This method will be called at startup of application.

Setting StartupUri in OnStartup method is just a recommended way, you can set it in constructor as well. The execution order is: Constructor -> XAML Parsing -> OnStartup, so setting StartupUri in constructor will be overridden by XAML and OnStartup, and StartupUri in XAML will be overriden by OnStartup

 

Next we set the StartupUri according to whether filename is passed in.

In above code we call System.Environment.GetCommandLineArgs method to get command line arguments. You can see the StartupUri is actually an Uri object, its UriKind is UriKind.Relative. (If we don't specify the UriKind parameter, we will get an UriFormatException)

 

 

WPF Dragablz Tutorial Part 2: Set Custom Tab Host Window

gbstack 2 Comments

Introduction

Dragablz is a WPF Tab Control which can let us to drag and drop tabs, drag tabs out as floating window and docking support, etc. It's a pretty good control, but its documentation is too few.

In Dragablz's official tutorial, we use default InterTabController for TabablzControl, and InterTabClient property is not specified for InterTabController, so tearing a tab out directly will only create a window which is same as the container window of the TabItem.

In this tutorial I will show you how to create a custom Tab Host Window.

 

Step 1 - Implement IInterTabClient

To set a custom Tab Host window, we should implement the IInterTabClient interface, which contains two method signature

Only the first method GetNewHost will be used here, so we can ignore the TabEmptiedHandler method.

Create a new class named MainInterTabClient.cs and make it implement IInterTabClient interface, then modify the GetNewHost method like following

The return value is the new host for dragged out tab, next we will create a new window for it.

 

Step 2 - Create a new Tab Host Window

Add a new window named TabHostWindow

Visual Studio add new window

Visual Studio add new window

In XAML View, add following code

 

Step 3 - Add Window into InterTabClient

Go back to MainInterTabClient.cs, update the GetNewHost method

It will create an instance of our newly created TabHostWindow as the host of dragged out TabItem.

Step 4 - Create a ViewModel for MainWindow

Next we need create a ViewModel class to bind newly created InterTabClient, name this class MainWindowViewModel.

 

Step 5 - Bind ViewModel

Now we need bind the ViewModel we created just now, add following line into your MainWindow constructor:

Then modify XAML of your MainWindow

 

Finally, we finish it! Drag a tab out you will see the tab will be inside a new clean window.

WPF ModernUI Tutorial Part 1

gbstack 0 Comments

Introduction

ModernUI is a nice WPF theme and a styling framework which let you build a modern, beautiful application easily. Are you poor in designing skill and have problem with designing GUI for your WPF applicaiotn? If so, you have to try ModernUI, it is the best choice for you. In web design, there is Bootstrap for building great UI. And for WPF, it is Modern UI.

 

Screenshots

 

Installation

The installation is really easy, just search "ModernUI" in Manage NuGet Package Window, and select "ModernUI for WPF" item and click "Install"

Install ModernUI for WPF in NuGet Package Manager

Install ModernUI for WPF in NuGet Package Manager

Or run following command in Package Manager Console

 Install-Package ModernUI.WPF

 

Create a ModernUI Window

First create a new WPF Application Project named "ModernUISample". After creating project, select MainWindow.xaml, change the XAML as following:

The ModernWindow class is defined under FirstFloor.ModernUI.Windows.Controls, so add following line to MainWindow.xaml.cs to import this namespace

Then let MainWindow inherit from class ModernWindow

 

Click "Debug" button to run the program, we will see a black rectangle with a light blue border is shown. What's wrong with it? It's because that we have not applied the theme files to our application.

Open App.xaml, and add following code:

 

 

Run the program again, you will see a modern window is shown

Modern UI blank window