sharee.bike-App/Meinkonrad/TINK/View/Bike/ILockItBike.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:conv="clr-namespace:TINK.View;assembly=TINKLib"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:d="http://xamarin.com/schemas/2014/forms/design"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:resources="clr-namespace:TINK.MultilingualResources;assembly=TINKLib"
        xmlns:sharedGui="clr-namespace:ShareeSharedGuiLib.View"
        mc:Ignorable="d"
        x:Class="TINK.View.Bike.ILockItBike">
    <ContentView>
		
        <ContentView.Resources>
			<conv:StringNotNullOrEmptyToVisibleConverter x:Key="Label_Converter"/>
			<conv:BoolInverterConverter x:Key="BoolInverterConverter"/>
			<x:String x:Key="InfoCircle">&#xf05a;</x:String>
			<x:String x:Key="LocationPin">&#xf3c5;</x:String>
			<x:String x:Key="CityPin">&#xf64f;</x:String>
			<x:String x:Key="ArrowReturnBack">&#xf0e2;</x:String>
		</ContentView.Resources>

		<Frame
			Padding="10"
			Margin="0,10,0,5"
			HasShadow="False"
			HorizontalOptions="FillAndExpand"
			VerticalOptions="FillAndExpand"
			BackgroundColor="White">

			<StackLayout
					Orientation="Vertical"
					Padding="10">

				<!-- Icons, Name, ID, ... -->
				<Grid
					Padding="0"
					RowSpacing="15"
					ColumnSpacing="5"
					ColumnDefinitions="Auto,*,Auto"
					RowDefinitions="Auto,Auto,Auto">

					<!-- Bike image -->
					<Image
							Grid.Column="0"
							Grid.Row="0"
							Grid.RowSpan="2"
							VerticalOptions="End"
							HorizontalOptions="Start"
							Source="{Binding DisplayedBikeImageSourceString}"
							HeightRequest="60"
							Aspect="AspectFit"/>

					<!-- Battery level image -->
					<sharedGui:BarLevelView
							Grid.Column="1"
							Grid.Row="0"
							Grid.RowSpan="2"
							VerticalOptions="End"
							HorizontalOptions="Start"
							Current="{Binding CurrentChargeBars}"
							Maximum="{Binding MaxChargeBars}"
							IsVisible="{Binding IsBatteryChargeVisible}"/>

					<!-- Rental state and error -->
					<StackLayout
						Grid.Column="0"
						Grid.ColumnSpan="2"
						Grid.Row="2"
						Spacing="0"
						Orientation="Vertical"
						HorizontalOptions="Start"
						VerticalOptions="End">

						<!-- Rental state -->
						<Label
							Text="{Binding StateText}"
							FontSize="Small"
							LineBreakMode="WordWrap"
							TextColor="{Binding StateColor}"/>

						<!-- Rental state error info -->
						<Label
							Text="{Binding ErrorText}"
							FontSize="Small"
							LineBreakMode="WordWrap"
							IsVisible="{Binding ErrorText, Converter={StaticResource Label_Converter}}"
							TextColor="Red"/>

					</StackLayout>

					<!-- Name and Id of the bike -->
					<StackLayout
						Grid.Column="1"
						Grid.ColumnSpan="2"
						Grid.Row="0"
						Orientation="Vertical"
						VerticalOptions="Start"
						HorizontalOptions="End"
						Spacing="0">

						<!-- Name -->
						<Label
							FontAttributes="Bold"
							FontSize="Large"
							TextColor="Black"
							HorizontalTextAlignment="Right"
							Text="{Binding Name}"/>

						<!-- Id -->
						<Label
							TextColor="DimGray"
							FontAttributes="Bold"
							HorizontalTextAlignment="Right"
							IsVisible="{Binding DisplayId, Converter={StaticResource Label_Converter}}"
							Text="{Binding DisplayId}"/>

					</StackLayout>

					<!-- AaAbRideType -->
					<StackLayout
						Grid.Column="2"
						Grid.Row="1"
						Grid.RowSpan="2"
						Spacing="0"
						HorizontalOptions="End"
						VerticalOptions="End">
						<StackLayout
							Spacing="0"
							IsVisible="{Binding AaRideType}">
							<StackLayout.Triggers>
								<DataTrigger TargetType="StackLayout"
								 Binding="{Binding Path=IsVisible}"
								 Value="false">
									<Setter Property="HeightRequest" Value="0" />
								</DataTrigger>
							</StackLayout.Triggers>
							<StackLayout
								Orientation="Horizontal"
								HorizontalOptions="End">
								<Image>
									<Image.Source>
										<FontImageSource
										Glyph="{StaticResource LocationPin}"
										Color="Black"
										FontFamily="FA-S"
										Size="20"/>
									</Image.Source>
								</Image>
								<Image>
									<Image.Source>
										<FontImageSource
										Glyph="{StaticResource ArrowReturnBack}"
										Color="Black"
										FontFamily="FA-S"
										Size="20"/>
									</Image.Source>
								</Image>
								<Button
									Command="{Binding ShowRideTypeInfoCommand}"
									WidthRequest="24"
									HeightRequest="24"
									BackgroundColor="Transparent"
									BorderWidth="0"
									Padding="0"
									Margin="5,0,0,0">
									<Button.ImageSource>
										<FontImageSource
										Glyph="{StaticResource InfoCircle}"
										Color="DimGray"
										FontFamily="FA-S"
										Size="20"/>
									</Button.ImageSource>
								</Button>
							</StackLayout>
							<Label 
								Text= "{Binding StationId}"
								FontSize="Small"
								HorizontalOptions="End"/>
						</StackLayout>
						<!-- BikeIsBoundToCityArea -->
						<!-- later, when value comes from backend: IsVisible="{Binding CityAreaType}"-->
						<StackLayout
							Spacing="0"
							IsVisible="{Binding IsBikeBoundToCity}">
							<StackLayout.Triggers>
								<DataTrigger TargetType="StackLayout"
									 Binding="{Binding Path=IsVisible}"
									 Value="false">
									<Setter Property="HeightRequest" Value="0" />
								</DataTrigger>
							</StackLayout.Triggers>
							<StackLayout
								Orientation="Horizontal"
								HorizontalOptions="End">
								<Image>
									<Image.Source>
										<FontImageSource
										Glyph="{StaticResource CityPin}"
										Color="Black"
										FontFamily="FA-S"
										Size="20"/>
									</Image.Source>
								</Image>
								<Image>
									<Image.Source>
										<FontImageSource
										Glyph="{StaticResource ArrowReturnBack}"
										Color="Black"
										FontFamily="FA-S"
										Size="20"/>
									</Image.Source>
								</Image>
								<Button
									Command="{Binding ShowBikeIsBoundToCityInfoCommand}"
									WidthRequest="24"
									HeightRequest="24"
									BackgroundColor="Transparent"
									BorderWidth="0"
									Padding="0"
									Margin="5,0,0,0">
									<Button.ImageSource>
										<FontImageSource
										Glyph="{StaticResource InfoCircle}"
										Color="DimGray"
										FontFamily="FA-S"
										Size="20"/>
									</Button.ImageSource>
								</Button>
							</StackLayout>
							<Label 
								Text="{x:Static resources:AppResources.MarkingBikeIsBoundToCity}"
								FontSize="Small"
								HorizontalOptions="End"/>
						</StackLayout>
					</StackLayout>

				</Grid>

				<!-- Buttons -->
				<Button 
					Text="{Binding ButtonText}"
					IsVisible="{Binding IsButtonVisible}"
					Command="{Binding OnButtonClicked}"/>
				<Button
					Style="{StaticResource SecondaryButton}"
					Text="{Binding LockitButtonText}"
					IsVisible="{Binding IsLockitButtonVisible}"
					Command="{Binding OnLockitButtonClicked}"/>

				<!-- Rental description (tarif name, options and rental info -->
				<Grid
					RowSpacing="0" 
					IsVisible="{Binding TariffDescription.Header, Converter={StaticResource Label_Converter}}">
					<Grid.RowDefinitions>
						<!-- start tarif- entries -->
						<RowDefinition Height="Auto" />
						<RowDefinition Height="Auto" />
						<RowDefinition Height="Auto" />
						<RowDefinition Height="Auto" />
						<RowDefinition Height="Auto" />
						<RowDefinition Height="Auto" />
						<RowDefinition Height="Auto" />
						<RowDefinition Height="Auto" />
						<RowDefinition Height="Auto" />
						<RowDefinition Height="Auto" />
						<!-- start rental info -->
						<RowDefinition Height="Auto" />
						<RowDefinition Height="Auto" />
						<RowDefinition Height="Auto" />
						<RowDefinition Height="Auto" />
						<RowDefinition Height="Auto" />
					</Grid.RowDefinitions>

					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="Auto" />
						<ColumnDefinition Width="*" />
						<ColumnDefinition Width="Auto" />
					</Grid.ColumnDefinitions>

					<!-- start tarif- entries (should be a CollectionView) -->
					<Label 
						Text= "{x:Static resources:AppResources.MessageBikesManagementTariffDescriptionTariffHeader}"
						IsVisible="{Binding TariffDescription.Header, Converter={StaticResource Label_Converter}}"
						Grid.Row="0" 
						FontAttributes="Bold"/>
					<Label 
						Text="{Binding TariffDescription.Header}"
						IsVisible="{Binding TariffDescription.Header, Converter={StaticResource Label_Converter}}"
						Grid.Row="0" 
						Grid.Column="1"
						FontAttributes="Bold"/>

					<!--Tracking-->
					<Grid
						Grid.Row="0"
						Grid.Column="1"
						Grid.ColumnSpan="2"
						ColumnDefinitions="*,Auto"
						IsVisible="{Binding TariffDescription.TrackingInfoText, Converter={StaticResource Label_Converter}}">
						<Label 
							Text= "Tracking"
							Grid.Column="0"
							HorizontalOptions="End"/>
						<Button
							Command="{Binding ShowTrackingInfoCommand}"
							WidthRequest="24"
							HeightRequest="24"
							BackgroundColor="Transparent"
							BorderWidth="0"
							Grid.Column="1"
							Padding="0"
							Margin="0">
							<Button.ImageSource>
								<FontImageSource
									Glyph="{StaticResource InfoCircle}"
									Color="DimGray"
									FontFamily="FA-S"
									Size="20"/>
							</Button.ImageSource>
						</Button>
					</Grid>

					<Label 
                    Text= "{Binding TariffDescription.TarifEntry1.Description}"
                    IsVisible="{Binding TariffDescription.TarifEntry1.Description, Converter={StaticResource Label_Converter}}"
                    Grid.Row="1"/>
					<Label 
                    Text="{Binding TariffDescription.TarifEntry1.Value}"
                    IsVisible="{Binding TariffDescription.TarifEntry1.Value, Converter={StaticResource Label_Converter}}"
                    Grid.Row="1" 
                    Grid.Column="1"
					Grid.ColumnSpan="2"/>
					<Label 
                    Text= "{Binding TariffDescription.TarifEntry2.Description}"
                    IsVisible="{Binding TariffDescription.TarifEntry2.Description, Converter={StaticResource Label_Converter}}"
                    Grid.Row="2"/>
					<Label 
                    Text="{Binding TariffDescription.TarifEntry2.Value}"
                    IsVisible="{Binding TariffDescription.TarifEntry2.Value, Converter={StaticResource Label_Converter}}"
                    Grid.Row="2" 
                    Grid.Column="1"
					Grid.ColumnSpan="2"/>
					<Label 
                    Text= "{Binding TariffDescription.TarifEntry3.Description}"
                    IsVisible="{Binding TariffDescription.TarifEntry3.Description, Converter={StaticResource Label_Converter}}"
                    Grid.Row="3"/>
					<Label 
                    Text="{Binding TariffDescription.TarifEntry3.Value}"
                    IsVisible="{Binding TariffDescription.TarifEntry3.Value, Converter={StaticResource Label_Converter}}"
                    Grid.Row="3" 
                    Grid.Column="1"
					Grid.ColumnSpan="2"/>
					<Label 
                    Text= "{Binding TariffDescription.TarifEntry4.Description}"
                    IsVisible="{Binding TariffDescription.TarifEntry4.Description, Converter={StaticResource Label_Converter}}"
                    Grid.Row="4"/>
					<Label 
                    Text="{Binding TariffDescription.TarifEntry4.Value}"
                    IsVisible="{Binding TariffDescription.TarifEntry4.Value, Converter={StaticResource Label_Converter}}"
                    Grid.Row="4" 
                    Grid.Column="1"
					Grid.ColumnSpan="2"/>
					<Label 
                    Text= "{Binding TariffDescription.TarifEntry5.Description}"
                    IsVisible="{Binding TariffDescription.TarifEntry5.Description, Converter={StaticResource Label_Converter}}"
                    Grid.Row="5"/>
					<Label 
                    Text="{Binding TariffDescription.TarifEntry5.Value}"
                    IsVisible="{Binding TariffDescription.TarifEntry5.Value, Converter={StaticResource Label_Converter}}"
                    Grid.Row="5" 
                    Grid.Column="1"
					Grid.ColumnSpan="2"/>
					<Label 
                    Text= "{Binding TariffDescription.TarifEntry6.Description}"
                    IsVisible="{Binding TariffDescription.TarifEntry6.Description, Converter={StaticResource Label_Converter}}"
                    Grid.Row="6"/>
					<Label 
                    Text="{Binding TariffDescription.TarifEntry6.Value}"
                    IsVisible="{Binding TariffDescription.TarifEntry6.Value, Converter={StaticResource Label_Converter}}"
                    Grid.Row="6" 
                    Grid.Column="1"
					Grid.ColumnSpan="2"/>
					<Label 
                    Text= "{Binding TariffDescription.TarifEntry7.Description}"
                    IsVisible="{Binding TariffDescription.TarifEntry7.Description, Converter={StaticResource Label_Converter}}"
                    Grid.Row="7"/>
					<Label 
                    Text="{Binding TariffDescription.TarifEntry7.Value}"
                    IsVisible="{Binding TariffDescription.TarifEntry7.Value, Converter={StaticResource Label_Converter}}"
                    Grid.Row="7" 
                    Grid.Column="1"
					Grid.ColumnSpan="2"/>
					<Label 
                    Text= "{Binding TariffDescription.TarifEntry8.Description}"
                    IsVisible="{Binding TariffDescription.TarifEntry8.Description, Converter={StaticResource Label_Converter}}"
                    Grid.Row="8"/>
					<Label 
                    Text="{Binding TariffDescription.TarifEntry8.Value}"
                    IsVisible="{Binding TariffDescription.TarifEntry8.Value, Converter={StaticResource Label_Converter}}"
                    Grid.Row="8" 
                    Grid.Column="1"
					Grid.ColumnSpan="2"/>
					<Label 
                    Text= "{Binding TariffDescription.TarifEntry9.Description}"
                    IsVisible="{Binding TariffDescription.TarifEntry9.Description, Converter={StaticResource Label_Converter}}"
                    Grid.Row="9"/>
					<Label 
                    Text="{Binding TariffDescription.TarifEntry9.Value}"
                    IsVisible="{Binding TariffDescription.TarifEntry9.Value, Converter={StaticResource Label_Converter}}"
                    Grid.Row="9" 
                    Grid.Column="1"
					Grid.ColumnSpan="2"/>
					<!-- start tarif- entries (should be a CollectionView) -->
					<Label 
                    Text= "{Binding TariffDescription.InfoEntry1}"
                    IsVisible="{Binding TariffDescription.InfoEntry1, Converter={StaticResource Label_Converter}}"
                    Grid.Row="10"
                    Grid.ColumnSpan="3"/>
					<Label 
                    Text= "{Binding TariffDescription.InfoEntry2}"
                    IsVisible="{Binding TariffDescription.InfoEntry2, Converter={StaticResource Label_Converter}}"
                    Grid.Row="11"
                    Grid.ColumnSpan="3"/>
					<Label 
                    Text= "{Binding TariffDescription.InfoEntry3}"
                    IsVisible="{Binding TariffDescription.InfoEntry3, Converter={StaticResource Label_Converter}}"
                    Grid.Row="12"
                    Grid.ColumnSpan="3"/>
					<Label 
                    Text= "{Binding TariffDescription.InfoEntry4}"
                    IsVisible="{Binding TariffDescription.InfoEntry4, Converter={StaticResource Label_Converter}}"
                    Grid.Row="13"
                    Grid.ColumnSpan="3"/>
				</Grid>
			</StackLayout>
		</Frame>
	</ContentView>
</ViewCell>