使用ListView作为Wpf中的导航栏

本文关键字：导航 Wpf ListView 作为 使用 | 更新日期: 2023-09-27 18:28:55

我的应用程序有一个包含两列的网格。在左列中，我有一个ListView，其中包含一些具有数据绑定的项。在右边，我想实现一个视图，该视图将显示基于哪个项目的内容在ListView上选择。我该怎么做？

<Window x:Class="WpfApplication8.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525" Background="LightBlue">
<Grid Name="MainGrid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="3*" />
    </Grid.ColumnDefinitions>
    <ListView Grid.Column="0" Name="listView"  ItemsSource="{Binding Path=ClientCollection}" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Path=ClientName}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

使用ListView作为Wpf中的导航栏

我认为实现这一点的最佳方法是向ViewModel添加一个selectedItem属性，该属性绑定到ListView的选定项，并使该属性成为右视图的dataContext；这里有一个例子：

 <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <ListView Grid.Column="0" x:Name="LvListView"  ItemsSource="{Binding ClientCollection}" SelectedItem="{Binding SelectedClient}" >
        <ListView.View>
            <GridView>
                <GridViewColumn Width="150" Header="Name" DisplayMemberBinding="{Binding Name}"/>
                <GridViewColumn Width="150" Header="Age" DisplayMemberBinding="{Binding Age}"/>
                <GridViewColumn Width="150" Header="Location" DisplayMemberBinding="{Binding Location}"/>
            </GridView>
        </ListView.View>
    </ListView>
    <Grid Grid.Column="1"  VerticalAlignment="Center" DataContext="{Binding SelectedClient,Mode=TwoWay}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="100"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <TextBlock Text="Name: " Grid.Column="0" Grid.Row="0"/>
        <TextBlock Text="Age: " Grid.Column="0" Grid.Row="1"/>
        <TextBlock Text="Location: " Grid.Column="0" Grid.Row="2"/>
        <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Name}"/>
        <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Age}"/>
        <TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Location}"/>
    </Grid>
</Grid>

以及在相应的MainWindow.cs:中

  public partial class MainWindow : Window, INotifyPropertyChanged
{
    private Client _selectedClient = new Client();
    public Client SelectedClient
    {
        get { return _selectedClient; }
        set
        {
            if (_selectedClient == value) return;
            _selectedClient = value;
            OnPropertyChanged();
        }
    }
    private ObservableCollection<Client> _clientCollection = new ObservableCollection<Client>();
    public ObservableCollection<Client> ClientCollection
    {
        get { return _clientCollection; }
        set
        {
            if (_clientCollection == value) return;
            _clientCollection = value;
            OnPropertyChanged();
        }
    }
    public MainWindow()
    {
        InitializeComponent();
        ClientCollection = new ObservableCollection<Client>()
    {
        new Client()
        {
            Name = "James",Age = 34, Location = "Paris"
        },
         new Client()
        {
            Name = "Joe",Age = 34, Location = "Us"
        },
         new Client()
        {
            Name = "Ann",Age = 34, Location = "Canada"
        },
    };
    }
    public event PropertyChangedEventHandler PropertyChanged;
    [NotifyPropertyChangedInvocator]
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }
}
public class Client
{
    public string Name { get; set; }
    public string Location { get; set; }
    public int Age { get; set; }
}

不要忘记为主窗口视图设置数据上下文，在这种情况下是

DataContext="{Binding RelativeSource={RelativeSource Self}}"
相关文章：