带有Command的Xamarin.Forms TapGestureRecognizer导航到基于单击的图像的页面 [英] Xamarin.Forms TapGestureRecognizer with Command navigate to page based on Image clicked
问题描述
xaml页面中的代码:
Code in the xaml page:
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<CollectionView ItemsSource="{Binding MeniElementi}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame Padding="10" WidthRequest="140" HeightRequest="140">
<Frame BackgroundColor="AliceBlue" WidthRequest="120" HeightRequest="120" HasShadow="True" CornerRadius="10" Padding="10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >
<StackLayout>
<Image Source="http://www.clker.com/cliparts/l/u/5/P/D/A/arrow-50x50-md.png" WidthRequest="70" HeightRequest="70" >
<Image.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding LoadElements}"
/>
</Image.GestureRecognizers>
</Image>
<Label Text="{Binding Title}" HeightRequest="50" WidthRequest="100" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
</StackLayout>
</Frame>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
xaml.cs中的代码:
Code in xaml.cs:
[XamlCompilation(XamlCompilationOptions.Compile)] 公共局部类菜单:ContentPage {
[XamlCompilation(XamlCompilationOptions.Compile)] public partial class Menu: ContentPage {
MenuViewModel viewModel = new MenuViewModel();
public Menu()
{
InitializeComponent();
BindingContext = viewModel;
}
}
viewmodel.cs中的代码
Code in viewmodel.cs
public class MenuViewModel :BaseViewModel, INotifyPropertyChanged
{
public Command LoadElements { get; set; }
public ObservableCollection<Meni> MeniElementi { get; set; }
public MenuViewModel()
{
LoadElements= new Command(execute: async () => await ExecuteElements());
MeniElementi = new ObservableCollection<Meni>() {
new Meni(){Title="Transatcions" ,Picture="xxx"},
new Meni(){Title="Transatcions" ,Picture="xxx"},
};
}
async Task ExecuteElements()
{
try
{
await Application.Current.MainPage.Navigation.PushAsync(new InfoPage());
}
catch (Exception ex)
{
Debug.WriteLine(ex);
}
finally
{
}
}
我有一个由带有图像和文本的框架组成的菜单.还使用Xamarin.Forms.Command.我需要基于单击的图像来调用命令并导航到所选的页面
I have a menu made of Frames with Images and Texts. Also using Xamarin.Forms.Command. I need based on the image clicked to call a command and navigate to chosen Page
推荐答案
您可以使用 MessagingCenter 将消息从ViewModel发送到ContentPage.
You could use MessagingCenter to send message from ViewModel to ContentPage .
MessagingCenter.Send<Object>(this, "openNewPage");
在ContentPage(包含CollectionView)中
在构造函数中
in the ContentPage(which contains the CollectionView)
in the constructor
public xxxPage
{
InitializeComponent();
MessagingCenter.Subscribe<Object> (this, "openNewPage", async (sender) =>
{
await Navigation.PushAsync(new InfoPage());
});
}
这篇关于带有Command的Xamarin.Forms TapGestureRecognizer导航到基于单击的图像的页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!