如何使图像看起来像是在xamarin中选择的？

我想要的输出是，如果我点击“男性”图像，它看起来像是被点击/选中的，因此它将从“男性”变为“选中男性”

我在这里发布的上一个代码是有效的，如果我没有放置背景图像，但是如果我放置背景图像，TapGestureRecognitor似乎不起作用，但是我想为我的应用程序提供背景，请帮助

这是我尝试的代码：

我的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>

---

我用你提供的代码复制。它是由

宽度约束

和

高度约束

引起的。在图像和网格中删除它。一切都会好起来的

如果要使图像作为背景填充整个屏幕。删除用于设置为背景的图像。并使用

ContentPage

中的

BackgroundImageSource

属性设置背景图像

  <Image Source="blue_gradient1"
                   Aspect ="AspectFill" 
                   RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width}"
                   RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height}"/>

Xaml：

---

我使用您提供的代码进行复制。它是由

宽度约束

和

高度约束

引起的。在图像和网格中删除它。一切都会好起来的

如果要使图像作为背景填充整个屏幕。删除用于设置为背景的图像。并使用

ContentPage

中的

BackgroundImageSource

属性设置背景图像

  <Image Source="blue_gradient1"
                   Aspect ="AspectFill" 
                   RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width}"
                   RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height}"/>

Xaml：

---

问题出在哪里？它不起作用吗？它会抛出错误吗？它不会抛出任何错误，当我点击男性图像时，它不会更改为选中的男性图像，顺便说一句，我是xamarin的新手，所以可能我在这里遗漏了什么？点击它时，你甚至看到了任何效果吗？男性形象消失了吗？是否调用了

MaleClick\u Tapped

回调？是否能够在

MaleClick\u Tapped

和

SelectedMaleClick\u Tapped

中设置断点，并确保进入该断点？如果要使用这两种方法，可能需要将其强制到UI线程上。我的意思是你应该已经在主线上了，但这是可能的。问题是什么？它不起作用吗？它会抛出错误吗？它不会抛出任何错误，当我点击男性图像时，它不会更改为选中的男性图像，顺便说一句，我是xamarin的新手，所以可能我在这里遗漏了什么？点击它时，你甚至看到了任何效果吗？男性形象消失了吗？是否调用了

MaleClick\u Tapped

回调？是否能够在

MaleClick\u Tapped

和

SelectedMaleClick\u Tapped

中设置断点，并确保进入该断点？如果要使用这两种方法，可能需要将其强制到UI线程上。我的意思是你应该已经在主线上了，但这是可能的。这就是我需要的！谢谢：D你能解释一下为什么宽度和高度限制会导致这个问题吗？这就是我需要的！谢谢：D你能解释一下为什么宽度和高度限制会导致这个问题吗？

<?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>