How To Scan QRCode For UWP (1)

本文将介绍实现一个类似于微信扫一扫功能的UI界面，后续会再实现具体的识别二维码的功能。

实例使用的Win10 SDK Version是Windows 10 Anniversary Edition(10.0;Build 14393)。

简单的介绍UI布局

UI 布局采用 3*3 的Grid，扫描Foucs部分占据最中间，其他格子的背景色都是灰色并且设置了Opacity="0.2"。

扫描的动画采用的是线性动画DoubleAnimation，需要提到的是Storyboard.TargetName - 附加属性，要进行动画处理的对象的名称，Storyboard.TargetProperty - 附加属性，要进行动画处理的对象的属性。

此外还使用了CaptureElement来预览摄像头捕获的图像，具体如何实现会在下篇文章来介绍。

UI具体实现

 <Grid Background="#FF1D1D1D">
        <Grid>
            <CaptureElement x:Name="PreviewControl" Visibility="Collapsed"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Stretch="Fill" />
            <Grid IsHitTestVisible="False">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid Opacity="0.2" Background="LightGray" Grid.ColumnSpan="3"></Grid>
                <Grid Opacity="0.2" Background="LightGray" Grid.Row="1"></Grid>
                <Grid Opacity="0.2" Background="LightGray" Grid.Row="1" Grid.Column="2"></Grid>
                <Grid Opacity="0.2" Background="LightGray" Grid.Row="2"  Grid.ColumnSpan="3"></Grid>
                <Grid x:Name="scanGrid" Grid.Row="1" Grid.Column="1" Opacity="1">
                    <Grid.Resources>
                        <Storyboard x:Name="scanStoryboard">
                            <DoubleAnimation x:Name="scanAnimation"
                                Storyboard.TargetName="scanLine"
                                Storyboard.TargetProperty="(Canvas.Top)"
                                Duration="0:0:2"
                                To="300"
                                RepeatBehavior="Forever"/>
                        </Storyboard>
                    </Grid.Resources>
                    <Border x:Name="leftTopBorder" HorizontalAlignment="Left" VerticalAlignment="Top"  BorderBrush="White" />
                    <Border x:Name="rightTopBorder" HorizontalAlignment="Right" VerticalAlignment="Top"  BorderBrush="White" />
                    <Border x:Name="leftBottomBorder" HorizontalAlignment="Left" VerticalAlignment="Bottom"  BorderBrush="White" />
                    <Border x:Name="rightBottomBorder" HorizontalAlignment="Right" VerticalAlignment="Bottom"  BorderBrush="White" />
                    <Canvas x:Name="scanCavas" Margin="10">
                        <Line Name="scanLine" X1="0" Y1="0" Y2="0" Stroke="Red" StrokeThickness="3" />
                    </Canvas>
                </Grid>
            </Grid>
        </Grid>
    </Grid>

UI自适应

由于在Win10里，App就像destop application可以随便改变窗口的大小，所以当窗口大小改变的时候我们需要重新计算Border的Width，Height，Line的宽度等等。

可以在Page的SizeChanged来实现我们的代码。

const int borderThickness = 5;

private void InitFocusRec()
        {
            leftTopBorder.BorderThickness = new Thickness(borderThickness, borderThickness, 0, 0);
            rightTopBorder.BorderThickness = new Thickness(0, borderThickness, borderThickness, 0);
            leftBottomBorder.BorderThickness = new Thickness(borderThickness, 0, 0, borderThickness);
            rightBottomBorder.BorderThickness = new Thickness(0, 0, borderThickness, borderThickness);

            var borderLength = 20;
            leftTopBorder.Width = leftTopBorder.Height = borderLength;
            rightTopBorder.Width = rightTopBorder.Height = borderLength;
            leftBottomBorder.Width = leftBottomBorder.Height = borderLength;
            rightBottomBorder.Width = rightBottomBorder.Height = borderLength;

            var focusRecLength = Math.Min(ActualWidth / 2, ActualHeight / 2);
            scanGrid.Width = scanGrid.Height = focusRecLength;
            scanCavas.Width = scanCavas.Height = focusRecLength;

            scanStoryboard.Stop();
            scanLine.X2 = scanCavas.Width - 20;
            scanAnimation.To = scanCavas.Height;

            scanStoryboard.Begin();
        }

        private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            InitFocusRec();
        }

 

预览效果图如下：

 

后续将介绍实现摄像头的预览功能。