1

嗨，如果这是一个明显的问题，我们深表歉意；我对 WPF 相当陌生。我正在尝试创建一个类似于下图的“分组”列表框。在谷歌的帮助下，我几乎设法让它工作，但由于某种原因，我得到了垂直滚动条可见。有没有人有任何想法？这让我发疯！谢谢

分组列表框示例

我正在使用的代码如下：

public class SampleData
{
    public string Name { get; set; }
    public string Group { get; set; }

    public SampleData(string name, string group)
    {
        this.Name = name;
        this.Group = group;
    }
}


public partial class MainWindow : Window
{
    private ObservableCollection<SampleData> _items = new ObservableCollection<SampleData>();

    public ObservableCollection<SampleData> Items
    {
        get { return _items; }
    }

    public MainWindow()
    {
        InitializeComponent();

        _items.Add(new SampleData("Item1", "Group1"));
        _items.Add(new SampleData("Item2", "Group1"));
        _items.Add(new SampleData("Item3", "Group1"));
        _items.Add(new SampleData("Item4", "Group1"));
        _items.Add(new SampleData("Item5", "Group1"));
        _items.Add(new SampleData("Item6", "Group1"));

        _items.Add(new SampleData("Item7", "Group2"));
        _items.Add(new SampleData("Item8", "Group2"));
        _items.Add(new SampleData("Item9", "Group2"));
        _items.Add(new SampleData("Item10", "Group2"));
        _items.Add(new SampleData("Item11", "Group2"));
        _items.Add(new SampleData("Item12", "Group2"));
        _items.Add(new SampleData("Item13", "Group2"));
        _items.Add(new SampleData("Item14", "Group2"));
    }
}

在 xaml 中，

  <CollectionViewSource x:Key="groupedSampleData" Source="{Binding ElementName=main, Path=Items }">
    <CollectionViewSource.GroupDescriptions>
      <PropertyGroupDescription PropertyName="Group" />
    </CollectionViewSource.GroupDescriptions>
  </CollectionViewSource>

  <Style x:Key="LBStyle" TargetType="{x:Type ListBox}">
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
    <Setter Property="ScrollViewer.PanningMode" Value="VerticalOnly"/>
  </Style>


<ListBox Grid.Row="0" Style="{StaticResource LBStyle}" ItemsSource="{Binding Source={StaticResource groupedSampleData}}" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="0" >
  <ListBox.Template>
    <ControlTemplate TargetType="{x:Type ListBox}">
      <ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Auto" PanningMode="VerticalOnly">
        <StackPanel>
          <ItemsPresenter/>
        </StackPanel>
      </ScrollViewer>
    </ControlTemplate>
  </ListBox.Template>

  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <StackPanel>
        <Border Width="96" Height="96" Margin="4" Background="#DDD"/>
        <TextBlock Margin="4,0,4,4" Text="{Binding Path=Name}" HorizontalAlignment="Center"/>
      </StackPanel>
    </DataTemplate>
  </ItemsControl.ItemTemplate>

  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>

  <ItemsControl.GroupStyle>
    <GroupStyle>
      <GroupStyle.Panel>
        <ItemsPanelTemplate>
          <VirtualizingStackPanel/>
        </ItemsPanelTemplate>
      </GroupStyle.Panel>
      <GroupStyle.HeaderTemplate>
        <DataTemplate>
          <TextBlock Margin="4,16,4,4" FontWeight="Bold" FontSize="15" Text="{Binding Path=Name}"/>
        </DataTemplate>
      </GroupStyle.HeaderTemplate>
    </GroupStyle>
  </ItemsControl.GroupStyle>
</ListBox>
4

1 回答 1

2

删除这个

<ListBox.Template>
    <ControlTemplate TargetType="{x:Type ListBox}">
      <ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Auto" PanningMode="VerticalOnly">
        <StackPanel>
          <ItemsPresenter/>
        </StackPanel>
      </ScrollViewer>
    </ControlTemplate>
</ListBox.Template>

列表框在模板中有自己的默认滚动查看器，如果我看到的只是 ScrollViewer 和 StackPanel，为什么需要更改列表框的模板？然后您将 ItemPanelTemplate 重新定义为 WrapPanel。

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel />
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

有一个名为 ScrollViewer 的静态类，您可以在其中控制其滚动查看器的属性。

<ListBox ScrollViewer.VerticalScrollBarVisibility="Auto"/>
于 2013-12-11T18:20:44.500 回答