Xaml 表单:单击ListView中的项目时如何显示模式?

Xaml 表单:单击ListView中的项目时如何显示模式?,xaml,xamarin,xamarin.forms,Xaml,Xamarin,Xamarin.forms,大家好。我目前正在用Xamarin.Forms做一个简单的应用程序,它允许我对员工的记录进行CRUD。创建的记录显示在列表视图中。这是我的截图 我想做的是,每当我单击ListView上的某个项目时,它都会显示一个模式,其中包含员工的更详细信息,例如(生日、地址、性别、工作经历)。我该怎么做?这可能吗?你能告诉我怎么做吗 这是我显示ListView的代码 <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="ht

大家好。我目前正在用Xamarin.Forms做一个简单的应用程序,它允许我对员工的记录进行CRUD。创建的记录显示在列表视图中。这是我的截图

我想做的是,每当我单击ListView上的某个项目时,它都会显示一个模式,其中包含员工的更详细信息,例如(生日、地址、性别、工作经历)。我该怎么做?这可能吗?你能告诉我怎么做吗

这是我显示ListView的代码

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="XamarinFormsDemo.EmployeeRecordsPage"
         xmlns:ViewModels="clr-namespace:XamarinFormsDemo.ViewModels;assembly=XamarinFormsDemo"
         xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
         BackgroundImage="bg3.jpg"
         Title="List of Employees">


  <ContentPage.BindingContext>
    <ViewModels:MainViewModel/>
  </ContentPage.BindingContext>

  <StackLayout Orientation="Vertical">



  <ListView ItemsSource="{Binding EmployeesList, Mode=TwoWay}"
        HasUnevenRows="True">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <Grid Padding="10" RowSpacing="10" ColumnSpacing="5">
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto"/>
              <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

        <controls:CircleImage Source="icon.png"
               HeightRequest="66"
               HorizontalOptions="CenterAndExpand"
               Aspect="AspectFill"
               WidthRequest="66"
               Grid.RowSpan="2"
               />


        <Label Grid.Column="1"
          Text="{Binding Name}"
               TextColor="#24e97d"
               FontSize="24"/>

        <Label Grid.Column="1"
               Grid.Row="1"
              Text="{Binding Department}"
               TextColor="White"
               FontSize="18"
               Opacity="0.6"/>


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

  </ListView>


   <StackLayout Orientation="Vertical"
         Padding="30,10,30,10"
         HeightRequest="20"
         BackgroundColor="#24e97d"
         VerticalOptions="Center"
         Opacity="0.5">
  <Label Text="© Copyright 2015   smesoft.com.ph   All Rights Reserved "
         HorizontalTextAlignment="Center"
         VerticalOptions="Center"
         HorizontalOptions="Center" />
    </StackLayout>
  </StackLayout>

</ContentPage>

注意:显示的记录是在ASP.NET Web应用程序中创建的,仅显示在UWP的列表视图中。如果您需要查看更多代码,请告诉我


非常感谢各位。

要将命令绑定到item selected属性,请参见下面的示例,否则ItemSelected将仅绑定到模型属性

有关完整示例,请参见

现在可以绑定一个Icommand,它可以有

 private Command login;
        public ICommand Login
        {
            get
            {
                login = login ?? new Command(DoLogin);
                return login;
            }
        }

private async void DoLogin()
        {

            await Navigation.PopModalAsync(new MySampXamlPage());
            //await DisplayAlert("Hai", "thats r8", "ok");

        }
和视图:

[Navigation.RegisterViewModel(typeof(RssTest.ViewModel.Pages.MainPageViewModel))]
    public partial class MainPage : ContentPage
    {
        public const string ItemSelectedCommandPropertyName = "ItemSelectedCommand"; 
        public static BindableProperty ItemSelectedCommandProperty = BindableProperty.Create(
            propertyName: "ItemSelectedCommand",
            returnType: typeof(ICommand),
            declaringType: typeof(MainPage),
            defaultValue: null);

        public ICommand ItemSelectedCommand
        {
            get { return (ICommand)GetValue(ItemSelectedCommandProperty); }
            set { SetValue(ItemSelectedCommandProperty, value); }
        }

        public MainPage ()
        {
            InitializeComponent();
        }

        protected override void OnBindingContextChanged()
        {
            base.OnBindingContextChanged();

            RemoveBinding(ItemSelectedCommandProperty);
            SetBinding(ItemSelectedCommandProperty, new Binding(ItemSelectedCommandPropertyName));
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();

            _listView.SelectedItem = null;
        }

        private void HandleItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            if (e.SelectedItem == null)
            {
                return;
            }

            var command = ItemSelectedCommand;
            if (command != null && command.CanExecute(e.SelectedItem))
            {
                command.Execute(e.SelectedItem);
            }
        }
    }
XAML:



查看官方指南:如果仍然存在问题,请更新问题。您可以使用ItemSelected事件和此插件弹出。谢谢您的回答,先生。这适用于我的情况吗?是的,您可以将导航命令绑定到列表视图中选定的项目对不起,先生,但我不知怎么搞糊涂了。我只是Xamarin.Forms的初学者。我将把这些代码放在哪里?谢谢。我的手机上没有。
<?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:ValueConverters="clr-namespace:RssTest.ValueConverters;assembly=RssTest"
    x:Class="RssTest.View.Pages.MainPage"
    Title="{Binding Title}">
    <ContentPage.Resources>
        <ResourceDictionary>
            <ValueConverters:BooleanNegationConverter x:Key="not" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <ListView x:Name="_listView"
            IsVisible="{Binding IsLoading, Converter={StaticResource not}" ItemsSource="{Binding Items}"
            ItemSelected="HandleItemSelected"
            VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Title}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <ActivityIndicator IsVisible="{Binding IsLoading}" IsRunning="{Binding IsLoading}"
            VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
    </Grid>
</ContentPage>