The user interface XAML file need the below declarations to support a value button. Using a style for common properties if there are more than one button is preferred to reduce the size of the XAML file.
•The user interface value button is triggering the calculation of the values for the parking ticket.
•The tariff value button contains the values to be used.
The number of buttons may or may not match the number of steps in the tariff. The tariff steps are incremental since the tariff engine will step until the amount or time match the value button that was pressed in the user interface.
There must exist a tariff with at least one value button for a user interface value button to be shown. The ’id’ property will be used for the matching between the tariff and the user interface.
If there are more buttons declared in the tariff than can be showed in the user interface, the button types Right and Left is used to scroll between sets of tariff buttons. The maxVisibleButtons property is then used as a threshold value for the Right button to be showed.
The last selected tariff button will change to a highlighted state in the user interface. Disabled, enabled and highlighted states has own image properties.
ValueButtons style
<Style def:Name="UiTariffValueButtonVisualStyle">
<StyleProperties>
<PropertyStyle Size="100,100"/>
<PropertyStyle Type="Units"/>
<PropertyStyle Image="\Storage Card\Media\pictures\tariff_fastButton.png"/>
<PropertyStyle DisableImage="\Storage Card\Media\pictures\tariff_fastButton_disabled.png"/>
<PropertyStyle SelectedImage="\Storage Card\Media\pictures\tariff_fastButton_selected.png"/>
<PropertyStyle ClickImage="\Storage Card\Media\pictures\tariff_fastButton.png"/>
<PropertyStyle Font="Arial, l8pt, style=Bold"/>
<PropertyStyle DurationTextColor="Black"/>
<PropertyStyle DurationTextColorWhenSelected="Black"/>
<PropertyStyle AmountTextColor="White"/>
<PropertyStyle AmountTextColorWhenSelected="SkyBlue"/>
<PropertyStyle Transparent="True"/>
<PropertyStyle TransparentColor="Black"/>
</StyleProperties>
</Style>
valueButtons in TFT panel
<!-- Page 1 - buttons 1 to 10 -->
<TFT:UiTariffValueButton Id="1" MxStyle="{UiTariffValueButtonVisnalStyle}" Location="100,580"/>
<TFT:UiTariffValueButton Id="2" MxStyle="{UiTariffValueButtonVisualStyle}" Location="220,580"/>
<TFT:UiTariffValueButton Id="3" MxStyle="{UiTariffValueButtonVisualStyle}" Location="340,580"/>
<TFT:UiTariffValueButton Id="4" MxStyle="{UiTariffValueButtonVisualStyle}" Location="460,580"/>
<TFT:UiTariffValueButton Id="5" MxStyle="{UiTariffValueButtonVisualStyle}" Location="580,580"/>
<TFT:UiTariffValueButton Id="6" MxStyle="{UiTariffValueButtonVisnalStyle}" Location="100,700"/>
<TFT:UiTariffValueButton Id="7" MxStyle="{UiTariffValueButtonVisualStyle}" Location="220,700"/>
<TFT:UiTariffValueButton Id="8" MxStyle="{UiTariffValueButtonVisualStyle}" Location="340,700"/>
<TFT:UiTariffValueButton Id="9" MxStyle="{UiTariffValueButtonVisualStyle}" Location="460,700"/>
<TFT:UiTariffValueButton Id="10" MxStyle="(UiTariffValueButtonVisualStyle}" Location="580,700"/>
<!-- Page 2 - button 11 -->
<TFT:UiTariffValueButton Id="11" MxStyle="{UiTariffValueButtonVisnalStyle}" Location="100,580"/>
<!-- Lefty and right arrow buttons -->
<TFT:UiTariffValueButton MxStyle="{UiTariffValueButtonVisualStyle}" Type="Left" Size="50,100" Location="10,630" Image="\Storage Card\Media\pictures\tariff_valueButton_left.png" DisableImage="\Storage Card\Media\pictures\tariff_valueButton_left_disabled.png"/>
<TFT:UiTariffValueButton MxStyle="{UiTariffValueButtonVisualStyle}" Type="Right" Size="50,100" Location="710,630" Image="\Storage Card\Media\pictures\tariff_valueButton_right.png" DisableImage="\Storage Card\Media\pictures\tariff_valueButton_right_disabled.png"/>
valueButtons page 1
valueBottons page 2
