Sunday, December 10, 2017

WPF Extended Toolkit. Free WPF Controls

WPF has its own controls like Label, Button, ListView etc. and you can use them in your WPF Project. But some times you have to customize some WPF controls in a way that is not already available. For example: you want some buttons in your application to have Icons(images) with the displayed text like this:



You can write Styles and control templates etc. to meet your needs.
There is a free and open source Xceed WPF Controls Toolkit wpf toolkit available that has many things already done for you.
You can download it and use it in your project as required from the following link:
https://github.com/xceedsoftware/wpftoolkit

You can also add this in your WPF project through Nuget Package also, which is pretty  simple.
1. Open Visual Studio 2015
2. Tools -> Nuget Package Manager -> Manage Nuget Packages for Solution

 Search for "WPF" in search bar.
From Search Results, Install "Extended WPF Toolkit"

It will be installed in your selected Project.

Now, you surely want to test some of its controls.
Add a new "Window" in you WPF Project.
Add this nameSpace in your XAML.
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"


We will use this namespace to use its controls in our XAML.
Code Sample:

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
       
        <xctk:IconButton Grid.Row="1" Content="Icon Button" Padding="10,0,0,0" HorizontalContentAlignment="Left" Width="150" Height="50"
                         Foreground="White"
                         Background="Orange"
                         FontWeight="Bold"
                         IconLocation="Right" BorderBrush="Yellow" BorderThickness="0,0,0,5">
            <xctk:IconButton.Icon>
                <Image Source="Images/microsoft-gray.png" Margin="4,0,0,0" Width="50" />
            </xctk:IconButton.Icon>
        </xctk:IconButton>
       
    </Grid>


This code will display the following output:





Courtesy to this link http://www.freebits.co.uk/convert-html-code-to-text.html for helping me paste my XAML code in this blog :)

Tuesday, December 5, 2017

Create Bar Code and Display it in WPF

Today i am going to show you:
1. create a Bar Code using a Open Source Library
2. Display the bar code in a Window using WPF

Step 1:

Download the Source Code for Bar Code Generation library from:
https://github.com/barnhill/barcodelib

unzip the source code.
Open up visual studio 2015 and load the solution.
A Demo Project is included in source code, which doesn't worked for me. You need to add Missing Nuget Package (AjaxControlToolkit) for it to run properly.
To add this Nuget Package. In Visual Studio:



Search for "AjaxControlToolkit" and add it to BarCodeDemo Project(Web Project).
After doing this, the projects will compile.

Add WPF Demo Project in Solution and in WPFDemo Project, add Reference to BarCodeLib Project. As we need to use it in our WPFDemo project.




So far, We have build and Added BarCode Demo Project.
Now we are going to create our UI for Demo. Here is the WPF Xaml for our MainWindow.

<Grid>

        <Border BorderThickness="0" Height="70" Width="310" BorderBrush="YellowGreen">
            <Image Name="meraControl" />
        </Border>
        <Label x:Name="label" Content="Input for BarCode" HorizontalAlignment="Left" Margin="19,74,0,0" VerticalAlignment="Top"/>
        <TextBox x:Name="textBox" MaxLength="12" HorizontalAlignment="Left" Height="23" Margin="128,77,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="295"
                 PreviewTextInput="textBox_PreviewTextInput"/>
        <Button x:Name="button" Content="Do It" Margin="433,78,10.4,0" VerticalAlignment="Top" Click="button_Click"/>
    </Grid>

In the code behind of this file.




private void CreateBarCode()
        {  //Create BarCode Image
            BarcodeLib.Barcode b = new BarcodeLib.Barcode();
            b.IncludeLabel = true;
            System.Drawing.Image img = b.Encode(BarcodeLib.TYPE.UPCA, 
                                        textBox.Text, 
                                        System.Drawing.Color.Black, 
                                        System.Drawing.Color.White, 
                                        300, 
                                        65);
            //To show image on Window
            //Create image source from Memory
            MemoryStream ms = new MemoryStream();            
            img.Save(ms, ImageFormat.Bmp);//save image in memory
            //my buffer byte
            byte[] buffer = ms.GetBuffer();
            //Create new MemoryStream that has the contents of buffer
            MemoryStream bufferPasser = new MemoryStream(buffer);
            
            //I create a new BitmapImage to work with
            BitmapImage bitmap = new BitmapImage();
            bitmap.BeginInit();
            bitmap.StreamSource = bufferPasser;
            bitmap.EndInit();            
            meraControl.Source = bitmap;//I set the source of the image control type as the new //BitmapImage created earlier.            
        }        

        private static bool IsTextAllowed(string text)
        {
            Regex regex = new Regex("[^0-9]"); //regex that matches disallowed text
            return !regex.IsMatch(text);
        }

        private void textBox_PreviewTextInput(object sender, TextCompositionEventArgs e)
        {
            if (IsTextAllowed(e.Text)){}
            else{e.Handled = true;}
        }



Last Step, Make WPFDemo Project as Startup Project and Start.

Following screen will appear:


Enter 12 Digit Number to generate BarCode for and Press "Do It" Button.


Hope it will be of some help :)
Comments are appreciated.