CODEWITHSUNDEEP
c#xamlcamerauwpzxing.net
denisyfrolov
denisyfrolov

Reputation: 23

XAML Custom Grid Border (Camera Viewfinder similar to dm77)

I'm trying to make a custom viewfinder for ZXing.Mobile. It should be similar to viewfinder for dm77 (Android library). In original it looks like the picture below:

Original ViewFinder picture original viewfinder picture

I have next XAML definition for the view:

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

How can I make the border of view looks exactly like it does on the picture?

Upvotes: 1

Views: 1075

Answers (1)

Vijay Nirmal
Vijay Nirmal

Reputation: 5837

Try these lines of code. Change the values as you want.

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

Upvotes: 1

Related Questions