Xamarin 更改 2 单击时的图像源

Question

我有问题。我创建了一个 Image_OnClick 事件，但在该事件中我想更改 2 个图像。我给了 1 张图片 x:Name="DislikeImage"。现在我的代码无法识别 x:Name。这是我的代码：

protected void imgLike_Clicked(object sender, EventArgs args)
{
    var i = (Image)sender;
    string CurrentImageSource = i.Source.ToString();

    if (CurrentImageSource.Contains("Like.png") == true)
    {
        i.Source = "Like_Selected.png";
        DislikeImage.Source = "Dislike.png";
    }
    else if (CurrentImageSource.Contains("Like_Selected.png") == true)
    {
        i.Source = "Like.png";
    }
}

错误出现在这一行：

DislikeImage.Source = "Dislike.png";

我该如何解决这个问题？

编辑

这里是 xaml：

<ContentPage.Content>
    <StackLayout>
        <ListView x:Name="ListViewMain" VerticalOptions="FillAndExpand" BackgroundColor="#212121" SelectionMode="None">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
                            <Label HeightRequest="1" BackgroundColor="#E3E3E3" />
                            <Grid x:Name="GridMain">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="40"/>
                                    <RowDefinition Height="160"/>
                                    <RowDefinition Height="40"/>
                                    <RowDefinition Height="160"/>
                                    <RowDefinition Height="40"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="5" x:Name="Column0_Width" />
                                    <ColumnDefinition Width="*" x:Name="Column1_Width" />
                                    <ColumnDefinition Width="5" x:Name="Column2_Width" />
                                </Grid.ColumnDefinitions>
                                <Label Text="{Binding Creator}" TextColor="White" FontSize="Body" FontAttributes="Bold" Grid.Column="1" Grid.Row="0" VerticalOptions="Center" HorizontalOptions="Start"/>
                                <Label Text="Subscribe" TextColor="#3897F0" FontSize="Body" Margin="0, 0, 10, 0" Grid.ColumnSpan="2" FontAttributes="Bold" Grid.Column="1" Grid.Row="0" VerticalOptions="Center" HorizontalOptions="End"/>
                                <Image Source="{Binding ImageLocation}" Margin="0, 0, 10, 0" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="3" BackgroundColor="AliceBlue" VerticalOptions="Fill" HorizontalOptions="Fill"/>


                                <Grid Grid.Row="4" Grid.Column="1">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="40" />
                                    </Grid.RowDefinitions>

                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="38" />
                                        <ColumnDefinition Width="38" />
                                        <ColumnDefinition Width="38" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="38" />
                                        <ColumnDefinition Width="38" />
                                    </Grid.ColumnDefinitions>

                                    <Image Source="Favorite.png" Grid.Row="0" HeightRequest="37" Grid.Column="2" HorizontalOptions="Start" VerticalOptions="Center">
                                        <Image.GestureRecognizers>
                                            <TapGestureRecognizer Tapped="imgFavorite_Clicked" />
                                        </Image.GestureRecognizers>
                                    </Image>

                                    <Image Source="Like.png" HeightRequest="37" VerticalOptions="Center" HorizontalOptions="Center" Grid.Row="0" Grid.Column="0" x:Name="LikeImage">
                                        <Image.GestureRecognizers>
                                            <TapGestureRecognizer Tapped="imgLike_Clicked" />
                                        </Image.GestureRecognizers>
                                    </Image>
                                    <Image Source="Dislike.png" HeightRequest="37" VerticalOptions="Start" Grid.Row="0" Grid.Column="1" x:Name="DislikeImage">
                                        <Image.GestureRecognizers>
                                            <TapGestureRecognizer Tapped="imgDislike_Clicked" />
                                        </Image.GestureRecognizers>
                                    </Image>

                                    <Image Source="Send_Dark.png" HeightRequest="40" Grid.Row="0" Grid.Column="4" HorizontalOptions="Center" VerticalOptions="Center"/>
                                    <Image Source="Save_Dark.png" HeightRequest="40" Grid.Row="0" Grid.Column="5" HorizontalOptions="Center" VerticalOptions="Center"/>

                                </Grid>
                            </Grid>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage.Content>

Answer 1

您可以像这样访问图像控件：

protected void imgLike_Clicked(object sender, EventArgs args)
{
            var i = (Image)sender;
            var parentGrid = i.Parent as Grid;
            var dislikeImage = parentGrid.Children[2] as Image;

            string CurrentImageSource = i.Source.ToString();

            if (CurrentImageSource.Contains("Like.png") == true)
            {
                i.Source = "Like_Selected.png";
                dislikeImage.Source = "Dislike.png";
            }
            else if (CurrentImageSource.Contains("Like_Selected.png") == true)
            {
                i.Source = "Like.png";
            }
}

希望这能解决您的问题。

Answer 2

根据您的描述，您想通过检查一个图像源来更改两个图像源，我建议您可以使用绑定，我做一个示例您可以看看：

<StackLayout>
    <!-- Place new controls here -->
    <ListView ItemsSource="{Binding models}" HasUnevenRows="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell  >
                    <StackLayout >
                        <Label Text="{Binding name}"/>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Image Source="{Binding url}" Grid.Row="0" HeightRequest="60">
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer
            Tapped="OnTapGestureRecognizerTapped"
            NumberOfTapsRequired="2" />
                                </Image.GestureRecognizers>
                            </Image>
                            <Image Source="{Binding url1}" Grid.Row="1" HeightRequest="60"/>
                        </Grid>

                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

public partial class MainPage : ContentPage
{
    public ObservableCollection<model1> models { get; set; }
    public MainPage()
    {
        InitializeComponent();
        models = new ObservableCollection<model1>()
        {
            new model1(){name="image 1",url="image1.png",},
            new model1(){name="image 2",url="image2.png"},
            new model1(){name="image 3",url="image1.png"},
            new model1(){name="image 4",url="image2.png"},
            new model1(){name="image 5",url="image1.png"}
        };
        this.BindingContext = this;
    }



    private void OnTapGestureRecognizerTapped(object sender, EventArgs e)
    {
        var imageSender = (Image)sender;



        var grid= (Grid)imageSender.Parent;
        var stacklayout = (StackLayout)grid.Parent;



        var label = (Label)stacklayout.Children[0];

        model1 m = models.Where(o => o.name == label.Text).FirstOrDefault();
        string url = imageSender.Source.ToString();
        if(url.Contains("image1.png"))
        {
            m.url = "image2.png";
            m.url1 = "image3.png";
        }
        else if(url.Contains("image2.png"))
        {
            m.url = "image1.png";
        }

    }
}



public class model1:BaseViewModel
{
    public string name { get; set; }
    private string _url;
    public string url
    {
        get { return _url; }
        set
        {
            _url = value;
            OnPropertyChanged("url");
        }
    }
    private string _url1;
    public string url1
    {
        get { return _url1; }
        set
        {
            _url1 = value;
            OnPropertyChanged("url1");
        }
    }
}

你需要实现inotifyproperty来通知。

public class BaseViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;



    protected virtual void OnPropertyChanged([CallerMemberName]string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs((propertyName)));
    }



    protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName]string propertyName = null)
    {
        if (EqualityComparer<T>.Default.Equals(storage, value))
        {
            return false;
        }
        storage = value;
        OnPropertyChanged(propertyName);



        return true;
    }
}