sharee.bike-App/SharedGui/View/Bike/RentalProcess/RentalProcessBookedOpenCloseLock.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
			 xmlns:conv="clr-namespace:ShareeBike.View;assembly=SharedBusinessLogic"
			 xmlns:rental_process="clr-namespace:ShareeBike.ViewModel.Bikes;assembly=SharedBusinessLogic"
			 xmlns:resources="clr-namespace:ShareeBike.MultilingualResources;assembly=SharedBusinessLogic"
			  xmlns:sharedGui="clr-namespace:SharedGui.View.Bike.RentalProcess"
			 x:Class="SharedGui.View.Bike.RentalProcess.RentalProcessBookedOpenCloseLock"
			 IsVisible="False">

	<ContentView.Triggers>
		<DataTrigger TargetType="ContentView"
				Binding="{Binding RentalProcess.State}"
				Value="{x:Static rental_process:CurrentRentalProcess.CloseLock}">
			<Setter Property="IsVisible" Value="True" />
		</DataTrigger>
		<DataTrigger TargetType="ContentView"
				Binding="{Binding RentalProcess.State}"
				Value="{x:Static rental_process:CurrentRentalProcess.CloseLockAndCancelReservation}">
			<Setter Property="IsVisible" Value="True" />
		</DataTrigger>
		<DataTrigger TargetType="ContentView"
							Binding="{Binding RentalProcess.State}"
							Value="{x:Static rental_process:CurrentRentalProcess.EndRental}">
			<Setter Property="IsVisible" Value="False" />
			<Setter Property="HeightRequest" Value="0"/>
		</DataTrigger>
	</ContentView.Triggers>

	<ContentView.Resources>
		<conv:StringNotNullOrEmptyToVisibleConverter x:Key="StringNotNullOrEmpty_Converter"/>
		<x:String x:Key="Glasses">&#xf530;</x:String>
		<x:String x:Key="Bluetooth">&#xf293;</x:String>
		<x:String x:Key="Upload">&#xf382;</x:String>
	</ContentView.Resources>

	<ContentView.Content>

		<Frame
			Grid.Row="0"
			HorizontalOptions="FillAndExpand"
			VerticalOptions="FillAndExpand"
			BackgroundColor="White"
			Padding="0"
			Margin="0">

			<Grid RowDefinitions="60,Auto,Auto,1*"
				RowSpacing="0">

				<!-- Title of rental process -->
				<Frame Grid.Row="0"
					HorizontalOptions="FillAndExpand"
					VerticalOptions="FillAndExpand"
					BackgroundColor="{DynamicResource primary-back-title-color}"
					Padding="0"
					Margin="0">
					<Label
						Text="{x:Static resources:AppResources.ActionCloseLock}"
						FontSize="Large"
						TextColor="White"
						HorizontalOptions="Center"
						VerticalOptions="Center"/>
				</Frame>

				<!--Bike info-->
				<sharedGui:RentalProcessBikeInfo Grid.Row="1"/>

				<!-- Progress bar -->
				<sharedGui:RentalProcess2StepsBar Grid.Row="2"/>

				<!--CloseLock Content-->
				<Grid Grid.Row="3"
					RowSpacing="10"
					RowDefinitions="Auto,1*,Auto"
					Margin="0,40,0,20">
					<Grid.Triggers>
						<MultiTrigger TargetType="Grid">
							<MultiTrigger.Conditions>
								<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="2" />
								<BindingCondition Binding="{Binding RentalProcess.State}" Value="{x:Static rental_process:CurrentRentalProcess.CloseLock}" />
							</MultiTrigger.Conditions>
							<Setter Property="IsVisible" Value="False"/>
							<Setter Property="HeightRequest" Value="0"/>
						</MultiTrigger>
					</Grid.Triggers>

					<!--Step-->
					<Grid Grid.Row="0"
						Padding="30,0,0,0"
						ColumnDefinitions="20,Auto,1*,20"
						ColumnSpacing="10"
						HorizontalOptions="CenterAndExpand">

						<!--Step icon-->
						<Image
							Grid.Column="1"
							HorizontalOptions="End">
							<Image.Triggers>
								<MultiTrigger TargetType="Image">
									<MultiTrigger.Conditions>
										<BindingCondition Binding="{Binding RentalProcess.StepInfoText}" Value="{x:Static resources:AppResources.MarkingRentalProcessCloseLockStepCloseLock}"/>

									</MultiTrigger.Conditions>
									<Setter Property="Source">
										<Setter.Value>
											<FontImageSource
														Glyph="{StaticResource Bluetooth}"
														FontFamily="FA-B"
														Size="40"
														Color="Black"/>
										</Setter.Value>
									</Setter>
								</MultiTrigger>
								<MultiTrigger TargetType="Image">
									<MultiTrigger.Conditions>
										<BindingCondition Binding="{Binding RentalProcess.StepInfoText}" Value="{x:Static resources:AppResources.MarkingRentalProcessCloseLockStepUpload}"/>
									</MultiTrigger.Conditions>
									<Setter Property="Source">
										<Setter.Value>
											<FontImageSource
														Glyph="{StaticResource Upload}"
														FontFamily="FA-S"
														Size="40"
														Color="Black"/>
										</Setter.Value>
									</Setter>
								</MultiTrigger>
								<MultiTrigger TargetType="Image">
									<MultiTrigger.Conditions>
										<BindingCondition Binding="{Binding RentalProcess.StepInfoText}" Value="{x:Static resources:AppResources.MarkingRentalProcessCloseLockSecondStepCancelReservation}"/>
									</MultiTrigger.Conditions>
									<Setter Property="Source">
										<Setter.Value>
											<FontImageSource
														Glyph="{StaticResource Upload}"
														FontFamily="FA-S"
														Size="40"
														Color="Black"/>
										</Setter.Value>
									</Setter>
								</MultiTrigger>
								<MultiTrigger TargetType="Image">
									<MultiTrigger.Conditions>
										<BindingCondition Binding="{Binding RentalProcess.StepInfoText}" Value="{x:Static resources:AppResources.MarkingRentalProcessCloseLockSecondStepDisconnect}"/>
									</MultiTrigger.Conditions>
									<Setter Property="Source">
										<Setter.Value>
											<FontImageSource
														Glyph="{StaticResource Bluetooth}"
														FontFamily="FA-S"
														Size="40"
														Color="Black"/>
										</Setter.Value>
									</Setter>
								</MultiTrigger>
							</Image.Triggers>
						</Image>

						<!--Step text-->
						<Label
							Grid.Column="2"
							TextType="Html"
							Text="{Binding RentalProcess.StepInfoText}"
							FontSize="Large"
							HorizontalOptions="Start"
							VerticalOptions="Center"
							TextColor="Black"
							Padding="0">
						</Label>

					</Grid>

					<!--Spinner & Info text-->
					<Grid Grid.Row="1"
						Margin="30,30,30,0"
						RowDefinitions="Auto,1*"
						RowSpacing="30"
						IsVisible="True">

						<!--Spinner-->
						<ActivityIndicator Grid.Row="0"
							IsRunning="{Binding IsProcessWithRunningProcessView}"
							Scale="2"
							HorizontalOptions="Center"
							VerticalOptions="StartAndExpand"
							Color="{x:DynamicResource primary-back-title-color}"/>

						<!--Info text-->
						<Label Grid.Row="1"
							TextType="Html"
							Text="{Binding StatusInfoText}"
							FontSize="Medium"
							TextColor="DimGray"
							HorizontalOptions="CenterAndExpand"
							HorizontalTextAlignment="Center"/>

					</Grid>

					<!--Attention: Important info-->
					<Frame Grid.Row="2"
						Margin="0,20,0,20"
						Padding="10"
						HorizontalOptions="FillAndExpand"
						HasShadow="False"
						IsVisible="{Binding RentalProcess.ImportantStepInfoText, Converter={StaticResource StringNotNullOrEmpty_Converter}}"
						BackgroundColor="{DynamicResource important-text-color}">

						<Grid
							ColumnDefinitions="20,*,Auto,20"
							RowDefinitions="Auto">

							<Label
								Grid.Column="1"
								HorizontalOptions="End"
								IsVisible="True"
								TextColor="White"
								FontSize="Large"
								Text="{Binding RentalProcess.ImportantStepInfoText}"
								FontAttributes="Bold">
							</Label>

							<Image
								Grid.Column="2"
								HorizontalOptions="Start">
								<Image.Source>
									<FontImageSource
										Glyph="{StaticResource Glasses}"
										FontFamily="FA-S"
										Size="40"
										Color="White"/>
								</Image.Source>
							</Image>

						</Grid>

					</Frame>

				</Grid>

			</Grid>

		</Frame>

	</ContentView.Content>

</ContentView>