How To: Barcode WPF DataBinding to XML Source

Product Barcode Professional for WPF Published 12/11/2007 Updated 12/11/2007

Overview

This walkthrough illustrates how easily you can bind Barcode Professional to XML data in WPF Applications Barcode Professional for WPF supports both DataBinding model i.e. XAML declarative DataBinding syntax as well as binding in code. In this walkthrough we'll use XAML DataBinding syntax.

Requirements

  Neodynamic Barcode Professional for WPF (any version)
  Microsoft .NET Framework 3.0 or greater
  Microsoft Visual Studio 2008
  Microsoft Visual Basic 2008 Express Edition
  Microsoft Visual C# 2008 Express Edition

The data source for our data binding sample will be a simple XML file storing Tech Books info such as Title, Summary, ISBN (International Standard Book Number) code and Cover Image.

During the course of this walkthrough, you will accomplish the following activities:

  • Create a WPF Application using Visual Studio 2008 or Express Editions.
  • Create a simple WPF Window which will display info about Books stored in an XML file. The info will be displayed by a WPF ListBox control with custom DataTemplate for each book.
  • Convert the ISBN code to a Barcode representation by leveraging Barcode Professional for WPF

Please follow these steps:

  • Ensure you have installed Barcode Professional for WPF
  • Launch Visual Studio and create a new WPF Application
  • Create a new folder in your project and name it "data" (without quotes)
  • Create a new XML File inside Data folder and name it BookData.XML. After that paste the following content: 
    
<Books xmlns="">
  <Book ISBN="0-7356-0562-9" Stock="in">
    <Title>XML in Action</Title>
    <Summary>XML Web Technology</Summary>
    <Cover>http://www.microsoft.com/library/images/worldwide/mspress/2461.gif </Cover>
  </Book>
  <Book ISBN="0-7356-1377-X" Stock="in">
    <Title>Introducing Microsoft .NET</Title>
    <Summary>Overview of .NET Technology</Summary>
    <Cover>http://www.microsoft.com/library/images/worldwide/mspress/5201.gif </Cover>
  </Book>
  <Book ISBN="0-7356-1288-9" Stock="out">
    <Title>Inside C#</Title>
    <Summary>C# Language Programming</Summary>
    <Cover>http://www.microsoft.com/MSPress/books/imgt/5027.gif </Cover>
  </Book>
  <Book ISBN="0-7356-1370-2" Stock="in">
    <Title>Programming Microsoft Windows With C#</Title>
    <Summary>C# Programming using the .NET Framework</Summary>
    <Cover>http://www.microsoft.com/MSPress/books/imgt/5188.gif </Cover>
  </Book>    
  <Book ISBN="0-7356-1448-2" Stock="out">
    <Title>Microsoft C# Language Specifications</Title>
    <Summary>The C# language definition</Summary>
    <Cover>http://www.microsoft.com/MSPress/books/imgt/5490.gif </Cover>
  </Book>
</Books>
  • Add a reference to Barcode Professional for WPF assembly Neodynamic.WPF.Barcode.dll)
  • Open Window.XAML file at design time, resize it to Height="350" and Width="445". Finally, in the XAML View paste the following content: 
    
<Window.Resources>
    <XmlDataProvider x:Key="BookData" Source="data\bookdata.xml" XPath="Books"/>
    <DataTemplate x:Key="BookDataTemplate">
        <Border SnapsToDevicePixels="True" Padding="10" Margin="5" CornerRadius="5" BorderThickness="2" BorderBrush="SteelBlue" >
            <StackPanel>
                <TextBlock Text="{Binding XPath=Title}" FontSize="14" FontWeight="Bold" Margin="0,0,0,5"></TextBlock>
                <StackPanel Orientation="Horizontal" Margin="5">
                    <Image Source="{Binding XPath=Cover}" Width="100"></Image>
                    <StackPanel Orientation="Vertical">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="ISBN: " FontWeight="Bold"></TextBlock>
                            <TextBlock Text="{Binding XPath=@ISBN}" Foreground="OrangeRed"></TextBlock>
                        </StackPanel>
                        <TextBlock Text="{Binding XPath=Summary}" Margin="0,5,0,0"></TextBlock>
                        <my:BarcodeProfessional Symbology="Isbn" Code="{Binding XPath=@ISBN}" EanUpcSupplement="Digits5" EanUpcSupplementCode="90000" Width="170" Height="90" Margin="0" xmlns:my="clr-namespace:Neodynamic.WPF;assembly=Neodynamic.WPF.Barcode" />
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </Border>
    </DataTemplate>
    <Style x:Key="StretchedContainerStyle" TargetType="{x:Type ListBoxItem}">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
</Window.Resources>
 
<Grid >
    <TextBlock Text="MyBooks - Barcode WPF DataBinding Sample" Padding="5" Height="18" VerticalAlignment="Top" Margin="12,9,171,0"></TextBlock>      
    <ListBox
        ItemsSource="{Binding Source={StaticResource BookData}, XPath=Book}"
        ItemTemplate="{StaticResource BookDataTemplate}"
        ItemContainerStyle="{StaticResource StretchedContainerStyle}" Margin="12,35,13,12">            
    </ListBox>        
</Grid>

The XAML code is very simple and straightforward. In short, we've coded the following:

  • In the Windows.Resource section, we defined:
    • The data source XmlDataProvider which points out to data\bookdata.xml file.
    • The DataTemplate which features a BarcodeProfessional control for displaying the ISBN code in barcode format instead of a simple string. The main BarcodeProfessional properties to set up in this specific case are Symbology property which was set up to Isbn (because we want to barcode ISBN numbers) and Code property which was set up to a XAML Declarative DataBinding Expression binding to ISBN attribute of Book XML Element through a XPath command.
  • In the main Grid control onto the Window, a ListBox control is data bound to the static resource and template for items is set up as well.

    That XAML code should look like the following figure when viewing it at design time mode of Visual Studio 2008 or Express Editions:

    WPF Barcode DataBinding at design time in Visual Studio 2008
    WPF Barcode DataBinding at design time in Visual Studio 2008

  • That's it. Run your project from VS. You'll get something like the following figure:

    The WPF DataBinding sample featuring Barcodes
    The WPF DataBinding sample featuring Barcodes



Useful? Share it!

Need help? Contact Support

We provide best-in-class customer service and support directly from members of our dev team! If we are available when you contact us, you will get a response in few minutes; otherwise the maximum turnaround is 24hs in most cases.