Question

请看图片 - http://imgur.com/25DEe4h 我目前的设计实现了：

<GroupBox Header="Playlists" HorizontalAlignment="Left" Margin="10,220,0,0" 
          VerticalAlignment="Top" Height="283" Width="497">
    <ListView ItemsSource="{Binding PlayLists}" SelectedItem="{Binding SelectedPL}"
              HorizontalAlignment="Left" Height="100" VerticalAlignment="Top"
              Width="487" Margin="0,0,-2,0">
        <ListView.ItemTemplate>
            <DataTemplate>
                 <StackPanel>
                      <Label FontWeight="Bold" Content="{Binding plName}" />
                 </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</GroupBox>

Answer 1

试试这个

Music.cs

public class Music
{
    public string Genre { get; set; }
    public ObservableCollection<string> PlayList { get; set; }
}

视图模型

public class ViewModel
{
    public ObservableCollection<Music> Musics { get; set; }

    public ViewModel()
    {
        FillMusic();
    }

    void FillMusic()
    {
        Musics = new ObservableCollection<Music> 
        { new Music { Genre = "POP Music", PlayList = new ObservableCollection<string> { "sample1", "sample2", } },
        new Music { Genre = "Club Music", PlayList = new ObservableCollection<string> { "sample1", "sample2", "sample3"} },
        new Music { Genre = "Retro", PlayList = new ObservableCollection<string> { "sample1" } }};
    }
}

xaml.cs

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new ViewModel();
    }
 }

XAML

<Window x:Class="Stackoverflow.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Stackoverflow"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <Style  TargetType="{x:Type ListBoxItem}" x:Key="InnerListBoxItemstyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width=".5*"/>
                            <ColumnDefinition Width=".5*"/>
                        </Grid.ColumnDefinitions>
                        <Border BorderThickness="1" BorderBrush="Blue" Grid.Column="1" Margin="0,2,0,2">
                            <TextBlock Text="{Binding}" Margin="10,1,1,1"/>
                    </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style  TargetType="{x:Type ListBoxItem}" x:Key="OuterListBoxItemstyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <StackPanel>
                        <Border BorderThickness="1" BorderBrush="Blue" Margin="0,2,0,2">
                        <TextBlock Text="{Binding Genre}" Margin="20,1,0,10" Foreground="LimeGreen" FontWeight="Bold" FontSize="14"/>
                    </Border>
                        <ListBox ItemsSource="{Binding PlayList}" ItemContainerStyle="{StaticResource InnerListBoxItemstyle}" BorderThickness="0"/>
                    </StackPanel>
                </ControlTemplate>

            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid >
    <GroupBox>
        <GroupBox.Header>
            <TextBlock Text="PlayList" Foreground="LimeGreen" FontWeight="Bold" FontSize="16"/>
        </GroupBox.Header>
        <GroupBox.Content>
            <Grid>
                <ListBox ItemsSource="{Binding Musics}" ItemContainerStyle="{StaticResource OuterListBoxItemstyle}"  BorderThickness="0">
                </ListBox>
            </Grid>
        </GroupBox.Content>
    </GroupBox>
</Grid>

Outupt

Output

我保留的风格可以有更多的改进:)。我得走了

WPF的MVVM。我怎样才能实现这样的观点（设计，gui）？

1 个答案: