Scan Code
​
​
Inherits from Xamarin.Forms.ContentView​
This is a special control that allows you to initiate a scan of a barcode.

Properties

Property
Type
Description
ButtonText
string
The text to display in the scan button that is automatically provided. Defaults to Scan.
ButtonStyleClass
IList<string>
The CSS style classes to apply to the scan button. Defaults to btn, btn-default.
Command
ICommand
The command to be executed when a barcode has been detected and scanned.
CommandParameter
object
The parameter to be given to the Command when it is executed.
Mode
​CameraMode​
The mode to be used with the camera. Defaults to Manual.
Scan
ICommand
This command can be used with a custom button to trigger the camera to be shown. (read-only)
Template
View
If supplied, allows you to override the default template built by the control. When this is set then the default Scan button is not generated.
Value
string
The code that was scanned from the barcode. (read-only)

Camera Mode

Value
Description
Manual
The camera will not start until manually triggered.
Automatic
The camera will automatically start as soon as possible.
Passive
The 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 it's 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.
Last modified 4mo ago
Copy link
On this page
Properties
Camera Mode
Example