XAML自定义网格边框(类似于dm77的相机取景器)
XAML Custom Grid Border (Camera Viewfinder similar to dm77)
我正在尝试为 ZXing.Mobile 制作自定义取景器。它应该类似于 dm77(Android 库)的取景器。原图如下图所示:
原始取景器图片
我有下一个 XAML 视图定义:
<Grid Name="Overlay" Visibility="Visible">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0.1*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="1" Grid.Column="1" >
<Rectangle Stroke="Green" StrokeThickness="4" StrokeDashArray="2" />
</Grid>
</Grid>
</Grid>
如何使视图的边框看起来与图片上的完全一样?
试试这些代码行。根据需要更改值。
<Grid Width="500" Height="500">
<Line Stroke="Yellow" StrokeThickness="5" X2="100" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Line Stroke="Yellow" StrokeThickness="5" Y2="100" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Line Stroke="Yellow" StrokeThickness="5" X2="100" HorizontalAlignment="Right" VerticalAlignment="Top"/>
<Line Stroke="Yellow" StrokeThickness="5" Y2="100" HorizontalAlignment="Right" VerticalAlignment="Top"/>
<Line Stroke="Yellow" StrokeThickness="5" X2="100" HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
<Line Stroke="Yellow" StrokeThickness="5" Y2="100" HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
<Line Stroke="Yellow" StrokeThickness="5" X2="100" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
<Line Stroke="Yellow" StrokeThickness="5" Y2="100" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
<Line Stroke="Red" StrokeThickness="5" X2="500" VerticalAlignment="Center"/>
</Grid>
我正在尝试为 ZXing.Mobile 制作自定义取景器。它应该类似于 dm77(Android 库)的取景器。原图如下图所示:
原始取景器图片
我有下一个 XAML 视图定义:
<Grid Name="Overlay" Visibility="Visible">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0.1*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="1" Grid.Column="1" >
<Rectangle Stroke="Green" StrokeThickness="4" StrokeDashArray="2" />
</Grid>
</Grid>
</Grid>
如何使视图的边框看起来与图片上的完全一样?
试试这些代码行。根据需要更改值。
<Grid Width="500" Height="500">
<Line Stroke="Yellow" StrokeThickness="5" X2="100" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Line Stroke="Yellow" StrokeThickness="5" Y2="100" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Line Stroke="Yellow" StrokeThickness="5" X2="100" HorizontalAlignment="Right" VerticalAlignment="Top"/>
<Line Stroke="Yellow" StrokeThickness="5" Y2="100" HorizontalAlignment="Right" VerticalAlignment="Top"/>
<Line Stroke="Yellow" StrokeThickness="5" X2="100" HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
<Line Stroke="Yellow" StrokeThickness="5" Y2="100" HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
<Line Stroke="Yellow" StrokeThickness="5" X2="100" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
<Line Stroke="Yellow" StrokeThickness="5" Y2="100" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
<Line Stroke="Red" StrokeThickness="5" X2="500" VerticalAlignment="Center"/>
</Grid>