Data Binding to CLR Objects: Simple Text To Speech

by kirupa   | filed under .NET and C#

One of the nice features in Windows Presentation Foundation (WPF) is data binding. In a nutshell, data binding is about binding various .NET objects together. To be more precise, you are creating a relationship between a source and a target object. When the source is updated, your target is informed and reacts accordingly. Likewise, depending on how you setup your binding, your source can be notified of any changes by your target.

The words source and target are pretty generic, so let's get more specific. In the context of GUI applications, the source of a binding is some data, and the target is a UI element that updates based on a change to your source. In this tutorial, we are going to explore a very basic scenario of data binding where you have a collection of data that needs to be represented in our UI. Beyond that, we'll take some scenic detours that explain some other features of data binding.

The following is the application you will have created by the end of this tutorial:

[ the Font Preview application ]

To run the above application, click here or on the above screenshot. You'll need the .NET Framework 3.0 installed, and if you are using Firefox, be sure to download the FFClickOnce extension to easily run ClickOnce applications.

The Font Previewer Application

Before we begin, let me first describe the application you will be creating. In the above application, you select a font from a list of fonts, and the preview text updates itself to display in the font you selected. Beyond that, each font name in the combobox is styled in the very font it is describing. Those are the important UI/functionality details.

Under the hood, the list of fonts is generated from a CLR source, and your combobox binds itself to the CLR source to display those fonts. Data binding, as you'll find out towards the end of this tutorial, can also exist between elements. Both the styled text in your combobox and textbox rely on you data binding the FontFamily value with the text displayed in your combobox. By the end of this tutorial, you should have enough practice with data binding between CLR objects and UI elements.

Let's Get Started - Creating the Interface

In the following sections, you'll learn how to create the above application with all of its neat features. Let's first start by creating the interface:

1. Launch Blend and create a new Standard EXE called Font Previewer. Make sure your language is set to Visual C# and press the OK button to close the Create New Project window:

[ create a new Standard Application (.exe) called FontPreviewer ]

2. I don't want you to spend too much time fiddling with the interface, for that isn't an important goal of this tutorial. To save you some time, I'll provide all of the XAML you need for your application's UI. Don't worry - you'll have the opportunity to add all of the data binding stuff yourself. Click on the XAML tab to view your current application's XAML:

[ click on the XAML tab to leave the Design view ]

3. Once you clicked on the XAML tab, you'll see a few lines of markup defining your application:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="FontPreviewer.Window1" x:Name="Window" Title="Font Previewer" Width="300" Height="199"> <Grid x:Name="LayoutRoot"/> </Window>  

Let's replace all of the above code with some code I'll provide. Select all of your code and replace it with the following XAML:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="FontPreviewer.Window1" x:Name="Window" Title="Font Previewer" Width="300" Height="199"> <Window.Resources> </Window.Resources> <Window.Background> <LinearGradientBrush EndPoint="0.363,0.191" StartPoint="0.948,0.913"> <GradientStop Color="#FFCFEEFF" Offset="0"/> <GradientStop Color="#FF353535" Offset="1"/> </LinearGradientBrush> </Window.Background> <Grid x:Name="LayoutRoot"> <Grid.ColumnDefinitions> <ColumnDefinition MinWidth="284" Width="Auto"/> </Grid.ColumnDefinitions> <Grid Margin="0,48,-8,0"> <Rectangle Fill="#FF02161C" Stroke="#FF000000" Margin="0,44,0,0"/> </Grid> <ComboBox HorizontalAlignment="Left" Margin="13,45,0,0" VerticalAlignment="Top" Width="150" MaxDropDownHeight="100" SelectedIndex="0" x:Name="ComboBox" Height="26"/> <TextBox HorizontalAlignment="Left" Margin="3,0,0,4" VerticalAlignment="Bottom" Width="278" Height="64" BorderBrush="#FF10384B" BorderThickness="5,5,5,5" FontSize="14" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Text="The quick brown fox jumped over the lazy dog." TextWrapping="Wrap"/> <Label HorizontalAlignment="Left" Margin="3,12,0,0" VerticalAlignment="Top" Content="Select a font:" Background="#00535353" Foreground="#FFFFFFFF"/> </Grid> </Window>

4. After you have copied and pasted the above code, click on the Design tab to go back to your Design view. Your Artboard should now look like the following image:

[ what your interface looks like right now ]

Your interface is now complete, but the important under-the-hood functionality still remains to be implemented. We'll tackle that in the next and following sections.

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇