Xamarin 更改 2 单击时的图像源
Posted
技术标签:
【中文标题】Xamarin 更改 2 单击时的图像源【英文标题】：Xamarin Change 2 Image sources on click 【发布时间】：2019-11-21 10:54:05 【问题描述】：我有问题。我创建了一个 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>
【问题讨论】：
您是否尝试在单击图像时更改图像源？ 是的，还有另一张图片，但我需要我的名字 x:name: DislikeImage 控件是否在 Lisview 控件中？然后你不能直接在后面的代码中访问它 那我怎样才能访问它？ 你将不得不使用模型属性来改变 source 的值我会告诉你等待 【参考方案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";
希望这能解决您的问题。
【讨论】：
【参考方案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;
【讨论】：
@A.Vreeswijk，如果我的回复有帮助，请记得将我的回复标记为答案，谢谢。以上是关于Xamarin 更改 2 单击时的图像源的主要内容，如果未能解决你的问题，请参考以下文章
在android和ios xamarin表单中单击或点击图像时如何显示数字（1,2,3）