Как сделать изображение похожим на выделенное в xamarin? - PullRequest
0 голосов
/ 17 января 2020

Мой желаемый вывод - если я нажму на «мужское» изображение, оно будет выглядеть так, как будто оно щелкнуло / выбрано, поэтому оно изменится с «мужского» на «selected_male».

Последний код, который я разместил здесь, работал, если я не размещаю, но если я размещаю фоновое изображение, то TapGestureRecognizer, кажется, не работает, но я хочу иметь фон для своего приложения, пожалуйста, помогите .

Это код, который я пробовал:

У меня есть это перекрывающееся изображение на моей странице1.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>

У меня есть этот код на моей странице1.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;
            }
        }

1 Ответ

2 голосов
/ 18 января 2020

Я воспроизводлю с кодом, который вы предоставили. Это вызвано WidthConstraint и HeightConstraint. Удалите это в изображении и сетке. Все будет хорошо.

enter image description here

Если вы хотите, чтобы изображение заполняло весь экран в качестве фона. Удалите изображение, которое вы использовали в качестве фона. И установите фоновое изображение со свойством BackgroundImageSource в 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>

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...