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 = ;

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

             var borderLength = ;
             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 / , ActualHeight / );
             scanGrid.Width = scanGrid.Height = focusRecLength;
             scanCavas.Width = scanCavas.Height = focusRecLength;

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

             scanStoryboard.Begin();
         }

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

预览效果图如下：

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