WPF employee card Barcode

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