Prerequisites

Before starting, ensure that you have installed the necessary prerequisites listed in the CVB.NET Getting Started Guide.

Creating the application

Using Visual Studio, create a new application using the WPF Application project template.

Next, add a reference to the following two dlls, located in your CVB installation directory under %CVB%\Lib\net:

Stemmer.Cvb.dll
Stemmer.Cvb.Wpf.dll

Using the Display Control

CVB.NET provides a native WPF Display Control, found in the Stemmer.Cvb.Wpf namespace. To use this control in xaml code, you will need to add a xaml using: xmlns:cvb="http://www.commonvisionblox.com/wpf"

xaml

<Window x:Class="WpfExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfExample"
        xmlns:cvb="http://www.commonvisionblox.com/wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
 
    <Grid>
        <cvb:Display x:Name="myDisplay"/>
    </Grid>
</Window>

You can then assign an image to the display in the code-behind (MainWindow.xaml.cs) of the xaml file:

C#

using Stemmer.Cvb;
using System.Windows;
 
namespace WpfExample
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
 
            myDisplay.Image = Image.FromFile("C:\\path\\to\\your\\image.bmp");
        }
    }
}

Using the Display Control with MVVM

WPF is able to strongly leverage the Model-View-ViewModel (MVVM) design approach, which helps to seperate UI- and business logic. MVVM also makes it easy to communicate data changes to the UI to automatically redraw it. For that, Bindings and the INotifyPropertyChanged interface are used. In this example the CVB Display uses a Binding to connect its Image property to the DisplayImage property of the MainViewModel.

xaml

<Window x:Class="WpfExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfExample"
        xmlns:cvb="http://www.commonvisionblox.com/wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
 
    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>
 
    <Grid>
        <cvb:Display Image="{Binding DisplayImage}"/>
    </Grid>
</Window>

You then create a ViewModel for the View which acts as a bridge between your UI and business logic.

C#

using Stemmer.Cvb;
using System.ComponentModel;
using System.Runtime.CompilerServices;
 
namespace WpfExample
{
    internal class MainViewModel : INotifyPropertyChanged
    {
        #region INotifyPropertyChanged Implementation
 
        // default implementation of the INotifyPropertyChanged interface
        // used to notify the UI of state and data changes
        public event PropertyChangedEventHandler PropertyChanged;
        protected void NotifyOfPropertyChange([CallerMemberName] string propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
 
        #endregion INotifyPropertyChanged Implementation
 
        public Image DisplayImage
        {
            get => _displayImage;
            set
            {
                if (_displayImage != value)
                {
                    _displayImage = value;
                    // notify the UI that the image to display has changed
                    NotifyOfPropertyChange();
                }
            }
        }
        private Image _displayImage;
 
        public MainViewModel()
        {
            DisplayImage = Image.FromFile("C:\\path\\to\\your\\image.bmp");
        }
    }
}

Example Programs

Your CVB installation includes several example programs demonstrating the integration of CVB.NET with WPF. They are located under %CVB%\Tutorial. Look for examples that contain .xaml files.

Table of Contents

Prerequisites

Creating the application

Using the Display Control

Using the Display Control with MVVM

Example Programs