sharee.bike-App/ShareeSharedGuiLib/View/Bike/RentalProcess/RentalProcess3StepsBar.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.RentalProcess3StepsBar">

	<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="3" />
							<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>

			<!-- 3 Steps Progress bar -->
			<Grid
				Grid.Row="0"
				IsVisible="True"
				ColumnDefinitions="*,*,*">

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

				<!--1st step-->
				<Grid
					Grid.Column="0"
					RowDefinitions="40,10"
					RowSpacing="0">
					<Frame
						Grid.Row="0"
						BackgroundColor="{DynamicResource process-step-upcoming}"
						Padding="0">
						<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="3" />
								</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>
						<StackLayout
							Orientation="Horizontal"
							HorizontalOptions="Center"
							VerticalOptions="Center">
							<Label
								Text="{x:Static resources:AppResources.MarkingRentalProcessEndRentalFirstStep}"
								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.MarkingRentalProcessEndRentalFirstStepFinished}"/>
									</MultiTrigger>
									<MultiTrigger TargetType="Label">
										<MultiTrigger.Conditions>
											<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="2" />
										</MultiTrigger.Conditions>
										<Setter Property="Text" Value="{x:Static resources:AppResources.MarkingRentalProcessEndRentalFirstStepFinished}"/>
									</MultiTrigger>
									<MultiTrigger TargetType="Label">
										<MultiTrigger.Conditions>
											<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="3" />
										</MultiTrigger.Conditions>
										<Setter Property="Text" Value="{x:Static resources:AppResources.MarkingRentalProcessEndRentalFirstStepFinished}"/>
									</MultiTrigger>
								</Label.Triggers>
							</Label>
							<Image
								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>
									<DataTrigger TargetType="Image" Binding="{Binding RentalProcess.StepIndex}" Value="3">
										<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="Small"
															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="Small"
															Color="White"/>
											</Setter.Value>
										</Setter>
									</MultiTrigger>
									<MultiTrigger TargetType="Image">
										<MultiTrigger.Conditions>
											<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="3" />
										</MultiTrigger.Conditions>
										<Setter Property="Source">
											<Setter.Value>
												<FontImageSource
															Glyph="{StaticResource check}"
															FontFamily="FA-S"
															Size="Small"
															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="Small"
															Color="White"/>
											</Setter.Value>
										</Setter>
									</MultiTrigger>
								</Image.Triggers>
							</Image>
						</StackLayout>
					</Frame>
					<Polygon
						Grid.Row="1"
						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>
				</Grid>

				<!--2nd step-->
				<Grid
					Grid.Column="1"
					RowDefinitions="40,10"
					RowSpacing="0">
					<Frame
						Grid.Row="0"
						BackgroundColor="{DynamicResource process-step-upcoming}"
						Padding="0">
						<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="3" />
								</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>
						<StackLayout
							Orientation="Horizontal"
							HorizontalOptions="Center"
							VerticalOptions="Center">
							<Label
								Text="{x:Static resources:AppResources.MarkingRentalProcessEndRentalSecondStep}"
								TextColor="White">
								<Label.Triggers>
									<MultiTrigger TargetType="Label">
										<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="Text" Value="{x:Static resources:AppResources.MarkingRentalProcessEndRentalSecondStepFinished}"/>
									</MultiTrigger>
									<MultiTrigger TargetType="Label">
										<MultiTrigger.Conditions>
											<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="3" />
										</MultiTrigger.Conditions>
										<Setter Property="Text" Value="{x:Static resources:AppResources.MarkingRentalProcessEndRentalSecondStepFinished}"/>
									</MultiTrigger>
								</Label.Triggers>
							</Label>
							<Image
								IsVisible="False">
								<Image.Triggers>
									<DataTrigger TargetType="Image" Binding="{Binding RentalProcess.StepIndex}" Value="2">
										<Setter Property="IsVisible" Value="True" />
									</DataTrigger>
									<DataTrigger TargetType="Image" Binding="{Binding RentalProcess.StepIndex}" Value="3">
										<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="Small"
															Color="White"/>
											</Setter.Value>
										</Setter>
									</MultiTrigger>
									<MultiTrigger TargetType="Image">
										<MultiTrigger.Conditions>
											<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="3" />
										</MultiTrigger.Conditions>
										<Setter Property="Source">
											<Setter.Value>
												<FontImageSource
															Glyph="{StaticResource check}"
															FontFamily="FA-S"
															Size="Small"
															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="Small"
															Color="White"/>
											</Setter.Value>
										</Setter>
									</MultiTrigger>
								</Image.Triggers>
							</Image>
						</StackLayout>
					</Frame>
					<Polygon
						Grid.Row="1"
						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>

				<!--3rd step-->
				<Grid
					Grid.Column="2"
					RowDefinitions="40,10"
					RowSpacing="0">
					<Frame
						Grid.Row="0"
						BackgroundColor="{DynamicResource process-step-upcoming}"
						Padding="0">
						<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-upcoming}" />
							</MultiTrigger>
							<MultiTrigger TargetType="Frame">
								<MultiTrigger.Conditions>
									<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="3" />
								</MultiTrigger.Conditions>
								<Setter Property="BackgroundColor" Value="{DynamicResource process-step-active}" />
							</MultiTrigger>
							<MultiTrigger TargetType="Frame">
								<MultiTrigger.Conditions>
									<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="3" />
									<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="3" />
									<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>
						<StackLayout
							Orientation="Horizontal"
							HorizontalOptions="Center"
							VerticalOptions="Center">
							<Label
								Text="{x:Static resources:AppResources.MarkingRentalProcessEndRentalThirdStep}"
								TextColor="White"/>
							<Image
								IsVisible="False">
								<Image.Triggers>
									<DataTrigger TargetType="Image" Binding="{Binding RentalProcess.StepIndex}" Value="3">
										<Setter Property="IsVisible" Value="True" />
									</DataTrigger>
									<MultiTrigger TargetType="Image">
										<MultiTrigger.Conditions>
											<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="3" />
											<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="Small"
															Color="White"/>
											</Setter.Value>
										</Setter>
									</MultiTrigger>
									<MultiTrigger TargetType="Image">
										<MultiTrigger.Conditions>
											<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="3" />
											<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="Small"
															Color="White"/>
											</Setter.Value>
										</Setter>
									</MultiTrigger>
								</Image.Triggers>
							</Image>
						</StackLayout>
					</Frame>
					<Polygon
						Grid.Row="1"
						Points="0,0 20,0 10,10"
						IsVisible="False"
						HorizontalOptions="Center">
						<Polygon.Triggers>
							<MultiTrigger TargetType="Polygon">
								<MultiTrigger.Conditions>
									<BindingCondition Binding="{Binding RentalProcess.StepIndex}" Value="3" />
									<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="3" />
									<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="3" />
									<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>

		</Grid>

	</ContentView.Content>
	
</ContentView>