WPF employee card Barcode

Source: Internet
Author: User

As we all know, Barcode is a special code that can be recognized by machines. It is often seen and used in production and life. For more information about the types and types of bar codes, see. Code 39 can be said to be the most common and widely used character and digit encoding type. This article will also use it to create a staff card application with a bar Code.

In the company, employee badges are the only identification tool for employee identities, and are also the main source of information for attendance and access control systems. First, design a simple employee card style in WPF with employee card ID, employee photo, employee name, etc.

<Border CornerRadius="3" BorderBrush="Gray" BorderThickness="2" Background="White"        MouseLeftButtonDown="Border_MouseLeftButtonDown">    <Canvas x:Name="mainCanvas">        <Grid x:Name="closeBtn" Canvas.Left="330" Canvas.Top="0"               MouseLeftButtonDown="Close_MouseLeftButtonDown">            <Ellipse Height="15" Width="15" HorizontalAlignment="Center">                <Ellipse.Fill>                    <SolidColorBrush x:Name="ellipseColor"/>                </Ellipse.Fill>            </Ellipse>            <TextBlock Text="x" Margin="2,-2,2,2" HorizontalAlignment="Center">                <TextBlock.Foreground>                    <SolidColorBrush x:Name="textColor" Color="Gray"/>                </TextBlock.Foreground>            </TextBlock>        </Grid>        <Border BorderBrush="#FF54545C" Canvas.Top="25" CornerRadius="5"                Height="49" Width="339" Background="#FF2192C4" Canvas.Left="5">            <TextBlock Text="EMPLOYEE   CARD" Foreground="White" FontSize="20"                       VerticalAlignment="Center" HorizontalAlignment="Center"                       FontWeight="Black" FontFamily="Microsoft Sans Serif"/>        </Border>        <Grid Canvas.Left="96" Canvas.Top="78">            <Grid.RowDefinitions>                <RowDefinition />                <RowDefinition />            </Grid.RowDefinitions>            <Image Source="Images/cardpic.png" Grid.Row="0"/>            <TextBlock Text="Li Jing Ran" FontSize="30" FontWeight="Black"                        Grid.Row="1" HorizontalAlignment="Center"/>        </Grid>    </Canvas></Border>

The Code content is relatively simple. You need to mention the <Grid> of x: Name closeBtn. You can see that it contains <Ellipse> and <Textblock>, their color filling method looks complicated. To achieve a dynamic effect, the <Ellipse> and <Textblock> changes the color (such as comparison) when the mouse moves to the close icon ).

The code for this effect is as follows. Set a ColorAnimation Storyboard through Window. Resources, and trigger the Storyboard animation effect through MouseEnter and MouseLeave.

<Window.Resources>    <Storyboard x:Key="flashClose">        <ColorAnimation Storyboard.TargetName="ellipseColor"                         Storyboard.TargetProperty="Color"                        From="White" To="Gray" Duration="0:0:0.1"/>        <ColorAnimation Storyboard.TargetName="textColor"                         Storyboard.TargetProperty="Color"                        From="Gray" To="White" Duration="0:0:0.1"/>    </Storyboard></Window.Resources><Window.Triggers>    <EventTrigger SourceName="closeBtn" RoutedEvent="Grid.MouseEnter">        <BeginStoryboard x:Name="showClosBtn" Storyboard="{StaticResource flashClose}"/>    </EventTrigger>    <EventTrigger SourceName="closeBtn" RoutedEvent="Grid.MouseLeave">        <StopStoryboard BeginStoryboardName="showClosBtn"/>    </EventTrigger></Window.Triggers>

To complete the above interface design, you only need to add the employee ID bar code in the blank area under the employee card. First, add the Barcode and Code39 classes to the project. We need to use these two classes to draw the bar code. Open the C # program and write the following code.

Define Encoding

Create a new barcode using the Barcodes class, define BarcodeType as "Code39", and encode Data as "10001". If verification is required, set CheckDigit to "Yes ". ThinWidth and thickWidth are used to define the width and width of the black/white barcode.

Barcodes bb = new Barcodes();bb.BarcodeType = Barcodes.BarcodeEnum.Code39;bb.Data = "10001";bb.CheckDigit = Barcodes.YesNoEnum.Yes;bb.encode();int thinWidth;int thickWidth;            thinWidth = 2;thickWidth = 3 * thinWidth;string outputString = bb.EncodedData;string humanText = bb.HumanText;
Draw a barcode

Based on the length of the encoding (EncodedData), use the Rectangle class to draw black and white code one by one. t indicates a narrow code, and w indicates a wide code.

int len = outputString.Length;int currentPos = 50;int currentTop = 340;int currentColor = 0;            for (int i = 0; i < len; i++){    Rectangle rect = new Rectangle();    rect.Height = 80;    if (currentColor == 0)    {        currentColor =  1;        rect.Fill = new SolidColorBrush(Colors.Black);    }    else    {        currentColor = 0;        rect.Fill = new SolidColorBrush(Colors.White);    }    Canvas.SetLeft(rect, currentPos);    Canvas.SetTop(rect, currentTop);    if (outputString[i] == 't')    {        rect.Width = thinWidth;        currentPos += thinWidth;    }    else if (outputString[i] == 'w')    {        rect.Width = thickWidth;        currentPos += thickWidth;    }                 mainCanvas.Children.Add(rect);}
Add readable code

At last, add a line of readable code below the bar code to facilitate the staff to read the bar code content, that is, display the employee number "10001.

TextBlock tb = new TextBlock();tb.Text = humanText;tb.FontSize = 25;tb.FontFamily = new FontFamily("Consolas");Rect rx = new Rect(0, 0, 0, 0);tb.Arrange(rx);Canvas.SetLeft(tb, 120);Canvas.SetTop(tb, currentTop + 80);mainCanvas.Children.Add(tb);

Finally, run the program to see how it works. Of course, you can add any characters or numbers as needed in the bar code content.

Source code download

WPFBarcode.zip

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.