WPF 在一个 ListBox 中选择项目并在第二个 ListBox 中显示相应的列表

Question

我目前正在学习 c# 和 WPF，并想构建我的第一个小应用程序。 我想在第一个 ListBox 中选择一个专辑，然后显示相应的 第二个列表框中的歌曲。我需要一些帮助。我将我的视图分成两个用户控件，一个用于专辑，一个用于带有一些附加功能的歌曲。到目前为止，这是我的代码：

专辑列表代码：

namespace BandManager.ViewModel
{
    public class AlbumViewModel
    {
        public List<Album> AlbumsList { get; set; }

        public AlbumViewModel()
        {
            AlbumsList = new List<Album>
            {
                new Album
                {
                    name ="Gravitous"
                },
                new Album
                {
                    name ="EP Two"
                }
            };
        }

    }

    public class Album
    {
        public string name { get; set; }
    }


}

专辑列表 Xaml：

<UserControl
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:BandManager"
             xmlns:ViewModel="clr-namespace:BandManager.ViewModel" x:Class="BandManager.AlbumSelection"
             mc:Ignorable="d" 
             d:DesignHeight="350" d:DesignWidth="250">



    <UserControl.DataContext> 
        <ViewModel:AlbumViewModel/>
    </UserControl.DataContext>


    <Grid Margin="10">

        <ListBox
            FontSize="20"
            ItemsSource="{Binding AlbumsList}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding name}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>


    </Grid>
</UserControl>

歌曲列表代码：

namespace BandManager.ViewModel
{
    public class SongListViewModel
    {

        public List<Song> SongsList { get; set; }

        public SongListViewModel()
        {
            SongsList = new List<Song>
            {
                new Song
                {
                    name ="Apodictic Certainty"
                },
                new Song
                {
                    name ="Ascension"
                },
                new Song
                {
                    name ="Catharsis"
                },
                new Song
                {
                    name ="The Journey"
                }
            };
        }

    }

    public class Song
    {
        public string name { get; set; }
    }
}

歌曲列表 Xaml：

<UserControl
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:BandManager"
             xmlns:ViewModel="clr-namespace:BandManager.ViewModel" x:Class="BandManager.SongSelection"
             mc:Ignorable="d" 
             d:DesignHeight="350" d:DesignWidth="450">

    <UserControl.DataContext>
        <ViewModel:SongListViewModel/>
    </UserControl.DataContext>

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="4*" />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <ListBox 

            Grid.RowSpan="4" Margin="10">
        </ListBox> 

        <Image Grid.Column="1" Margin="20,10,20,10"/>

        <ComboBox Grid.Column="1" Grid.Row="2" Margin="10" FontSize="18">
            <ComboBoxItem FontSize="18" Content="Tabs"/>
            <ComboBoxItem FontSize="18" Content="Lyrics"/>
        </ComboBox>

        <Button Grid.Column="1" Grid.Row="3" Margin="10" FontSize="14" Content="Download"/>
        <Button Content="Play" Grid.Column="1" Grid.Row="1" Margin ="10,10,160,10" FontSize="14" />
        <Button Content="Stop" Grid.Column="1" Grid.Row="1" Margin ="70,10,100,10" FontSize="14" />
        <Slider Grid.Column="1" Grid.Row="1" Margin ="140,15,10,15"/>

    </Grid>
</UserControl>

Answer 1

我已经稍微修改了您的视图模型，我希望这是您正在寻找的。我在 AlbumViewModel 中添加了 Selected 属性以从 ListBox 中获取选定的专辑。 所选专辑的歌曲显示在旁边的另一个列表框中。

下面是视图模型代码

public class Song
{
    public string name
    {
        get;
        set;
    }
}
public class Album
{
    public string name
    {
        get;
        set;
    }

    public List<Song> Songs
    {
        get;
        set;
    }

    public Album(string name)
    {
        this.name = name;
        Songs = new List<Song>() { new Song { name = this.name+ " Song 1" }, new Song { name = this.name + " Song 2" } };
    }
}
public class AlbumViewModel
{
    public List<Album> Albums
    {
        get;
        set;
    } = new List<Album>();

    public AlbumViewModel()
    {
        Albums.Add(new Album("Album 1"));
        Albums.Add(new Album("Album 2"));
        Albums.Add(new Album("Album 3"));
        Albums.Add(new Album("Album 4"));
    }

    public Album Selected
    {
        get;
        set;
    }
}

这是修改后的xaml

<UserControl
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:BandManager"
         xmlns:ViewModel="clr-namespace:BandManager.ViewModel" x:Class="BandManager.AlbumSelection"
         mc:Ignorable="d" 
         d:DesignHeight="350" d:DesignWidth="250">



<UserControl.DataContext> 
    <ViewModel:AlbumViewModel/>
</UserControl.DataContext>
<StackPanel Orientation="Horizontal">

    <ListBox ItemsSource="{Binding Albums}" Margin="10"  SelectedValue="{Binding Selected}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding name}"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

    <ListBox ItemsSource="{Binding Selected.Songs}" Margin="10" >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding name}"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</StackPanel>