sharee.bike-App/ShareeSharedGuiLib/View/Bike/RentalProcess/RentalProcess2StepsBar.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:TINK.View"
			 xmlns:sharedGui="clr-namespace:ShareeSharedGuiLib.View.Bike.RentalProcess"
			 xmlns:resources="clr-namespace:TINK.MultilingualResources;assembly=TINKLib"
			 xmlns:rental_process="clr-namespace:TINK.ViewModel.Bikes;assembly=TINKLib"
             x:Class="ShareeSharedGuiLib.View.Bike.RentalProcess.RentalProcess2StepsBar">

	<ContentView.Resources>
		<conv:StringNotNullOrEmptyToVisibleConverter x:Key="StringNotNullOrEmpty_Converter"/>
		<x:String x:Key="check">&#xf00c;</x:String>
		<x:String x:Key="xmark">&#xf00d;</x:String>
	</ContentView.Resources>

	<ContentView.Content>

		<Grid>
			
			<!-- Progress bar finished-->
			<Grid
				Grid.Row="0"
				IsVisible="False">

				<Grid.Triggers>
					<MultiTrigger TargetType="Grid">
						<MultiTrigger.Conditions>
							<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="2" />
							<BindingCondition Binding="{Binding RentalProcess.Result}" Value="{x:Static rental_process:CurrentStepStatus.Succeeded}" />
						</MultiTrigger.Conditions>
						<Setter Property="IsVisible" Value="True" />
					</MultiTrigger>
				</Grid.Triggers>

				<sharedGui:RentalProcessStepBarFinished/>
			
			</Grid>

			<!-- 2 Steps Progress bar -->
			<Grid
				Grid.Row="0"
				IsVisible="True"
				RowDefinitions="50,Auto,10"
				RowSpacing="0"
				ColumnDefinitions="*,*">

				<Grid.Triggers>
					<MultiTrigger TargetType="Grid">
						<MultiTrigger.Conditions>
							<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="2" />
							<BindingCondition Binding="{Binding RentalProcess.Result}" Value="{x:Static rental_process:CurrentStepStatus.Succeeded}" />
						</MultiTrigger.Conditions>
						<Setter Property="IsVisible" Value="False" />
					</MultiTrigger>
				</Grid.Triggers>

				<!--1st step-->
					<Frame
						Grid.Column="0"
						Grid.Row="0"
						Grid.RowSpan="2"
						BackgroundColor="{DynamicResource process-step-upcoming}"
						Padding="14,2,10,2"
						HasShadow="False">
						<Frame.Triggers>
							<MultiTrigger TargetType="Frame">
								<MultiTrigger.Conditions>
									<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="1" />
								</MultiTrigger.Conditions>
								<Setter Property="BackgroundColor" Value="{DynamicResource process-step-active}" />
							</MultiTrigger>
							<MultiTrigger TargetType="Frame">
								<MultiTrigger.Conditions>
									<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="1" />
									<BindingCondition Binding="{Binding RentalProcess.Result}" Value="{x:Static rental_process:CurrentStepStatus.Succeeded}" />
								</MultiTrigger.Conditions>
								<Setter Property="BackgroundColor" Value="{DynamicResource process-step-succeeded}" />
							</MultiTrigger>
							<MultiTrigger TargetType="Frame">
								<MultiTrigger.Conditions>
									<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="2" />
								</MultiTrigger.Conditions>
								<Setter Property="BackgroundColor" Value="{DynamicResource process-step-succeeded}" />
							</MultiTrigger>
							<MultiTrigger TargetType="Frame">
								<MultiTrigger.Conditions>
									<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="1" />
									<BindingCondition Binding="{Binding RentalProcess.Result}" Value="{x:Static rental_process:CurrentStepStatus.Failed}" />
								</MultiTrigger.Conditions>
								<Setter Property="BackgroundColor" Value="{DynamicResource process-step-failed}" />
							</MultiTrigger>
						</Frame.Triggers>
					<Grid
						ColumnDefinitions="*,Auto"
						RowDefinitions="Auto"
						HorizontalOptions="CenterAndExpand"
						VerticalOptions="CenterAndExpand">
						<Label
							Grid.Column="0"
							Text="{x:Static resources:AppResources.MarkingRentalProcessCloseLockFirstStep}"
							FontSize="17"
							FontAttributes="Bold"
							LineBreakMode="WordWrap"
							MaxLines="2"
							TextColor="White">
								<Label.Triggers>
									<MultiTrigger TargetType="Label">
									<MultiTrigger.Conditions>
										<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="1" />
										<BindingCondition Binding="{Binding RentalProcess.Result}" Value="{x:Static rental_process:CurrentStepStatus.Succeeded}" />
									</MultiTrigger.Conditions>
										<Setter Property="Text" Value="{x:Static resources:AppResources.MarkingRentalProcessCloseLockFirstStepFinished}"/>
								</MultiTrigger>
									<MultiTrigger TargetType="Label">
										<MultiTrigger.Conditions>
											<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="2" />
										</MultiTrigger.Conditions>
										<Setter Property="Text" Value="{x:Static resources:AppResources.MarkingRentalProcessCloseLockFirstStepFinished}"/>
									</MultiTrigger>
								</Label.Triggers>
							</Label>
							<Image
								Grid.Column="1"
								Grid.Row="0"
								IsVisible="False">
								<Image.Triggers>
									<DataTrigger TargetType="Image" Binding="{Binding RentalProcess.StepIndex}" Value="1">
										<Setter Property="IsVisible" Value="True" />
									</DataTrigger>
									<DataTrigger TargetType="Image" Binding="{Binding RentalProcess.StepIndex}" Value="2">
										<Setter Property="IsVisible" Value="True" />
									</DataTrigger>
									<MultiTrigger TargetType="Image">
										<MultiTrigger.Conditions>
											<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="1" />
											<BindingCondition Binding="{Binding RentalProcess.Result}" Value="{x:Static rental_process:CurrentStepStatus.Succeeded}" />
										</MultiTrigger.Conditions>
										<Setter Property="Source">
											<Setter.Value>
												<FontImageSource
															Glyph="{StaticResource check}"
															FontFamily="FA-S"
															Size="Default"
															Color="White"/>
											</Setter.Value>
										</Setter>
									</MultiTrigger>
									<MultiTrigger TargetType="Image">
										<MultiTrigger.Conditions>
											<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="2" />
										</MultiTrigger.Conditions>
										<Setter Property="Source">
											<Setter.Value>
												<FontImageSource
															Glyph="{StaticResource check}"
															FontFamily="FA-S"
															Size="Default"
															Color="White"/>
											</Setter.Value>
										</Setter>
									</MultiTrigger>
									<MultiTrigger TargetType="Image">
										<MultiTrigger.Conditions>
											<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="1" />
											<BindingCondition Binding="{Binding RentalProcess.Result}" Value="{x:Static rental_process:CurrentStepStatus.Failed}" />
										</MultiTrigger.Conditions>
										<Setter Property="Source">
											<Setter.Value>
												<FontImageSource
															Glyph="{StaticResource xmark}"
															FontFamily="FA-S"
															Size="Default"
															Color="White"/>
											</Setter.Value>
										</Setter>
									</MultiTrigger>
								</Image.Triggers>
							</Image>
						</Grid>
					</Frame>
					<Polygon
						Grid.Column="0"
						Grid.Row="2"
						Points="0,0 20,0 10,10"
						IsVisible="False"
						HorizontalOptions="Center">
						<Polygon.Triggers>
							<MultiTrigger TargetType="Polygon">
								<MultiTrigger.Conditions>
									<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="1" />
									<BindingCondition Binding="{Binding RentalProcess.Result}" Value="{x:Static rental_process:CurrentStepStatus.None}"/>
								</MultiTrigger.Conditions>
								<Setter Property="IsVisible" Value="True" />
								<Setter Property="Fill" Value="{DynamicResource process-step-active}" />
							</MultiTrigger>
							<MultiTrigger TargetType="Polygon">
								<MultiTrigger.Conditions>
									<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="1" />
									<BindingCondition Binding="{Binding RentalProcess.Result}" Value="{x:Static rental_process:CurrentStepStatus.Failed}"/>
								</MultiTrigger.Conditions>
								<Setter Property="IsVisible" Value="True" />
								<Setter Property="Fill" Value="{DynamicResource process-step-failed}" />
							</MultiTrigger>
							<MultiTrigger TargetType="Polygon">
								<MultiTrigger.Conditions>
									<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="1" />
									<BindingCondition Binding="{Binding RentalProcess.Result}" Value="{x:Static rental_process:CurrentStepStatus.Succeeded}"/>
								</MultiTrigger.Conditions>
								<Setter Property="IsVisible" Value="False" />
							</MultiTrigger>
						</Polygon.Triggers>
					</Polygon>

					<!--2nd step-->
					<Frame
						Grid.Column="1"
						Grid.Row="0"
						Grid.RowSpan="2"
						BackgroundColor="{DynamicResource process-step-upcoming}"
						Padding="14,2,10,2"
						HasShadow="False">
						<Frame.Triggers>
							<MultiTrigger TargetType="Frame">
								<MultiTrigger.Conditions>
									<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="1" />
								</MultiTrigger.Conditions>
								<Setter Property="BackgroundColor" Value="{DynamicResource process-step-upcoming}" />
							</MultiTrigger>
							<MultiTrigger TargetType="Frame">
								<MultiTrigger.Conditions>
									<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="2" />
								</MultiTrigger.Conditions>
								<Setter Property="BackgroundColor" Value="{DynamicResource process-step-active}" />
							</MultiTrigger>
							<MultiTrigger TargetType="Frame">
								<MultiTrigger.Conditions>
									<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="2" />
									<BindingCondition Binding="{Binding RentalProcess.Result}" Value="{x:Static rental_process:CurrentStepStatus.Succeeded}" />
								</MultiTrigger.Conditions>
								<Setter Property="BackgroundColor" Value="{DynamicResource process-step-succeeded}" />
							</MultiTrigger>
							<MultiTrigger TargetType="Frame">
								<MultiTrigger.Conditions>
									<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="2" />
									<BindingCondition Binding="{Binding RentalProcess.Result}" Value="{x:Static rental_process:CurrentStepStatus.Failed}" />
								</MultiTrigger.Conditions>
								<Setter Property="BackgroundColor" Value="{DynamicResource process-step-failed}" />
							</MultiTrigger>
						</Frame.Triggers>
					<Grid
						ColumnDefinitions="*,Auto"
						RowDefinitions="Auto"
						HorizontalOptions="CenterAndExpand"
						VerticalOptions="CenterAndExpand">
						<Label
							Grid.Column="0"
							Text="{x:Static resources:AppResources.MarkingRentalProcessCloseLockSecondStep}"
							FontSize="17"
							FontAttributes="Bold"
							LineBreakMode="WordWrap"
							MaxLines="2"
							TextColor="White"/>
							<Image
								Grid.Column="1"
								Grid.Row="0"
								IsVisible="False">
								<Image.Triggers>
									<DataTrigger TargetType="Image" Binding="{Binding RentalProcess.StepIndex}" Value="2">
										<Setter Property="IsVisible" Value="True" />
									</DataTrigger>
									<MultiTrigger TargetType="Image">
										<MultiTrigger.Conditions>
											<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="2" />
											<BindingCondition Binding="{Binding RentalProcess.Result}" Value="{x:Static rental_process:CurrentStepStatus.Succeeded}" />
										</MultiTrigger.Conditions>
										<Setter Property="Source">
											<Setter.Value>
												<FontImageSource
															Glyph="{StaticResource check}"
															FontFamily="FA-S"
															Size="Default"
															Color="White"/>
											</Setter.Value>
										</Setter>
									</MultiTrigger>
									<MultiTrigger TargetType="Image">
										<MultiTrigger.Conditions>
											<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="2" />
											<BindingCondition Binding="{Binding RentalProcess.Result}" Value="{x:Static rental_process:CurrentStepStatus.Failed}" />
										</MultiTrigger.Conditions>
										<Setter Property="Source">
											<Setter.Value>
												<FontImageSource
															Glyph="{StaticResource xmark}"
															FontFamily="FA-S"
															Size="Default"
															Color="White"/>
											</Setter.Value>
										</Setter>
									</MultiTrigger>
								</Image.Triggers>
							</Image>
						</Grid>
					</Frame>
				<Polygon
						Grid.Column="1"
						Grid.Row="2"
						Points="0,0 20,0 10,10"
						IsVisible="False"
						HorizontalOptions="Center">
					<Polygon.Triggers>
						<MultiTrigger TargetType="Polygon">
							<MultiTrigger.Conditions>
								<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="2" />
								<BindingCondition Binding="{Binding RentalProcess.Result}" Value="{x:Static rental_process:CurrentStepStatus.None}"/>
							</MultiTrigger.Conditions>
							<Setter Property="IsVisible" Value="True" />
							<Setter Property="Fill" Value="{DynamicResource process-step-active}" />
						</MultiTrigger>
						<MultiTrigger TargetType="Polygon">
							<MultiTrigger.Conditions>
								<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="2" />
								<BindingCondition Binding="{Binding RentalProcess.Result}" Value="{x:Static rental_process:CurrentStepStatus.Failed}"/>
							</MultiTrigger.Conditions>
							<Setter Property="IsVisible" Value="True" />
							<Setter Property="Fill" Value="{DynamicResource process-step-failed}" />
						</MultiTrigger>
						<MultiTrigger TargetType="Polygon">
							<MultiTrigger.Conditions>
								<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="2" />
								<BindingCondition Binding="{Binding RentalProcess.Result}" Value="{x:Static rental_process:CurrentStepStatus.Succeeded}"/>
							</MultiTrigger.Conditions>
							<Setter Property="IsVisible" Value="False" />
						</MultiTrigger>
					</Polygon.Triggers>
				</Polygon>

			</Grid>

		</Grid>

	</ContentView.Content>
	
</ContentView>