Rock Mobile Docs

Scan Code

Inherits from Xamarin.Forms.ContentView

This is a special control that allows you to initiate a scan of a barcode.

Properties

PropertyTypeDescription
ButtonTextstringThe text to display in the scan button that is automatically provided. Defaults to Scan.
ButtonStyleClassIListThe CSS style classes to apply to the scan button. Defaults to btn, btn-default.
CommandICommandThe command to be executed when a barcode has been detected and scanned.
CommandParameterobjectThe parameter to be given to the Command when it is executed.
ModeCameraModeThe mode to be used with the camera. Defaults to Manual.
ScanICommandThis command can be used with a custom button to trigger the camera to be shown. (read-only)
TemplateViewIf supplied, allows you to override the default template built by the control. When this is set then the default Scan button is not generated.
ValuestringThe code that was scanned from the barcode. (read-only)

Camera Mode

ValueDescription
ManualThe camera will not start until manually triggered.
AutomaticThe camera will automatically start as soon as possible.
PassiveThe camera will start automatically but have no visual presence. The user can still manually trigger the camera so that it shows up. This mode is most useful when users are knowledgeable and know that they can scan a code but you want to still show a UI for manual entry.

Example

<Rock:ScanCode x:Name="scanner"
               Command="{Binding PushPage}"
               Mode="Automatic">
    <Rock:ScanCode.CommandParameter>
        <Rock:PushPageParameters PageGuid="d6260c47-7364-405b-883c-f533b244a175">
            <Rock:Parameter Name="code"
                            Value="{Binding Source={x:Reference scanner}, Path=Value}" />
        </Rock:PushPageParameters>
    </Rock:ScanCode.CommandParameter>
</Rock:ScanCode>

The above example will create a barcode scanner and give it a name of scanner that is used later to reference it. It's configured for Automatic mode so as soon as the page loads, it will show a full-screen camera scanner interface. If the user closes that then they will return to the page and see the normal content as well as a Scan button that they can use to enter scan mode again.

When a code is detected, we have configured the Scan Code control to execute the Push Page command. We specify the Page Guid to transition to and then a parameter called code that takes its value from the Scan Code control's Value property. So when a code is scanned, the user will be redirected to a new page and that page will receive a query string parameter of code that contains the scanned code.

<Rock:ScanCode x:Name="scanner"
               Command="{Binding PushPage}">
    <Rock:ScanCode.Template>
        <Button Text="Custom Button"
                StyleClass="btn,btn-default"
                Command="{Binding Source={x:Reference scanner}, Path=Scan}" />
    </Rock:ScanCode.Template>
    <Rock:ScanCode.CommandParameter>
        <Rock:PushPageParameters PageGuid="d6260c47-7364-405b-883c-f533b244a175">
            <Rock:Parameter Name="code"
                            Value="{Binding Source={x:Reference scanner}, Path=Value}" />
        </Rock:PushPageParameters>
    </Rock:ScanCode.CommandParameter>
</Rock:ScanCode>

The above will generate a Scan Code control that runs in manual mode, meaning the user must do something to initiate the scan. In this case, we are providing a template so the default button isn't rendered. To be honest, our template is rather pointless because we could achieve the same by just modifying the existing properties. But the important part of the example is how we bind the button's command to the Scan command of the Scan Code control. From this, you can imagine the possibilities of using an Image control with a tap gesture recognizer that triggers the Scan command. Or any other custom interface you want to make.