在分组的WPF ListBox中缺少垂直滚动条

时间:2013-12-11 18:06:58

标签: c# wpf xaml listbox groupstyle

如果这是一个明显的问题,请向你道歉;我是WPF的新手。我正在尝试创建一个类似于下图的“分组”列表框。有了google的帮助,我只是设法让它工作,除了某些原因我得到垂直滚动条可见。有没有任何想法?这让我疯了!感谢

grouped ListBox example

我使用的代码如下:

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>

1 个答案:

答案 0 :(得分:2)

删除此

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

Listbox在模板中有自己的默认scrollviewer,如果我看到的只是ScrollViewer和StackPanel,为什么还需要更改列表框的模板?然后,您将ItemPanelTemplate重新定义为WrapPanel。

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

有一个名为ScrollViewer的静态类,您可以在其中控制其scrollviewer的属性。

<ListBox ScrollViewer.VerticalScrollBarVisibility="Auto"/>