How to make an image look like it is selected in xamarin? - xamarin

Question

My desired output is that if I click on the "male" image it will look like it is CLICKED/SELECTED so it will change from "male" to "selected_male".
I last code that I posted here was working if I don't place the but If I place a background image the TapGestureRecognizer seems to be not working, but I want to have a background for my application, please help.
This is the code that I tried:
I have this overlapping Image in my page1.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
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:local="clr-namespace:App1.Renderers"
mc:Ignorable="d"
x:Class="App1.SignUpPage">
<ContentPage.Content>
<StackLayout>
<RelativeLayout>
<Image Source="blue_gradient1"
Aspect ="AspectFill"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height}"/>
<Grid Margin="0,10,0,0" VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Source="male"
WidthRequest="200"
HeightRequest="165"
x:Name="ImgSrcMale"
Grid.Row="0"
Grid.Column="0">
<Image.GestureRecognizers>
<TapGestureRecognizer x:Name="MaleClick"
NumberOfTapsRequired="1"
Tapped="MaleClick_Tapped"/>
</Image.GestureRecognizers>
</Image>
<Image Source="Record"
WidthRequest="200"
HeightRequest="165"
x:Name="ImgSrcMaleSelected"
Grid.Row="0"
Grid.Column="0"
IsVisible="False">
<Image.GestureRecognizers>
<TapGestureRecognizer x:Name="SelectedMaleClick"
NumberOfTapsRequired="1"
Tapped="SelectedMaleClick_Tapped"/>
</Image.GestureRecognizers>
</Image>
<Image Source="female1"
WidthRequest ="200"
HeightRequest="165"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Aspect="AspectFit"
Grid.Row="0"
Grid.Column="1"/>
</Grid>
<Grid RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height}">
<ScrollView>
<StackLayout>
<Grid Margin="20,0,20,0" VerticalOptions="CenterAndExpand" RowSpacing="20">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Text="Gender"
FontSize="Title"
TextColor="WhiteSmoke"
HorizontalOptions="Center"
FontAttributes = "Bold"
Grid.Row="0"/>
</Grid>
</StackLayout>
</ScrollView>
</Grid>
</RelativeLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
I have this code in my page1.xaml.cs:
public void MaleClick_Tapped(object sender, EventArgs e)
{
if (ImgSrcMale.IsVisible == true)
{
ImgSrcMaleSelected.IsVisible = true;
ImgSrcMale.IsVisible = false;
}
else if (ImgSrcMaleSelected.IsVisible == true)
{
ImgSrcMale.IsVisible = true;
ImgSrcMaleSelected.IsVisible = false;
}
}
private void SelectedMaleClick_Tapped(object sender, EventArgs e)
{
if (ImgSrcMale.IsVisible == true)
{
ImgSrcMaleSelected.IsVisible = true;
ImgSrcMale.IsVisible = false;
}
else if (ImgSrcMaleSelected.IsVisible == true)
{
ImgSrcMale.IsVisible = true;
ImgSrcMaleSelected.IsVisible = false;
}
}

Answer 1

I reproduce with the code you provided. It caused by the WidthConstraint and HeightConstraint. Delete it in image and grid. Everything would be okay.
If you want to make the image fill all the screen as background. Delete the image which you used to set as background. And set the background image with BackgroundImageSource property in ContentPage.
<Image Source="blue_gradient1"
Aspect ="AspectFill"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height}"/>
Xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="ImageDemo.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
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"
BackgroundImageSource="pink.jpg"
mc:Ignorable="d">
<ContentPage.Content>
<StackLayout>
<RelativeLayout>
<!--<Image
Aspect="AspectFill"
Source="pink.jpg" />-->
<Grid Margin="0,10,0,0" VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image
x:Name="ImgSrcMale"
Grid.Row="0"
Grid.Column="0"
HeightRequest="165"
Source="dog.jpg"
WidthRequest="200">
<Image.GestureRecognizers>
<TapGestureRecognizer
x:Name="MaleClick"
NumberOfTapsRequired="1"
Tapped="MaleClick_Tapped" />
</Image.GestureRecognizers>
</Image>
<Image
x:Name="ImgSrcMaleSelected"
Grid.Row="0"
Grid.Column="0"
HeightRequest="165"
IsVisible="False"
Source="walrus.jpg"
WidthRequest="200">
<Image.GestureRecognizers>
<TapGestureRecognizer
x:Name="SelectedMaleClick"
NumberOfTapsRequired="1"
Tapped="SelectedMaleClick_Tapped" />
</Image.GestureRecognizers>
</Image>
<Image
Grid.Row="0"
Grid.Column="1"
Aspect="AspectFit"
HeightRequest="165"
HorizontalOptions="CenterAndExpand"
Source="lighthouse.jpg"
VerticalOptions="CenterAndExpand"
WidthRequest="200" />
</Grid>
<Grid>
<ScrollView>
<StackLayout>
<Grid
Margin="20,0,20,0"
RowSpacing="20"
VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label
Grid.Row="0"
FontAttributes="Bold"
FontSize="Title"
HorizontalOptions="Center"
Text="Gender"
TextColor="WhiteSmoke" />
</Grid>
</StackLayout>
</ScrollView>
</Grid>
</RelativeLayout>
</StackLayout>
</ContentPage.Content>