2013-12-11 4 views
0

이것이 명백한 질문 인 경우 사과드립니다. 나는 WPF에 상당히 익숙하다. 아래 그림과 비슷한 '그룹화 된'목록 상자를 만들려고합니다. Google의 도움으로 나는 수직 스크롤바를 볼 수있는 몇 가지 이유를 제외하고는 제대로 작동하도록했습니다. 어떤 시체에도 아이디어가 있습니까? 이것은 나를 미치게합니다! 감사합니다그룹화 된 WPF에서 세로 스크롤 막대가 누락 됨 ListBox

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

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

목록 상자를 제거 템플릿 내부에 자체 기본 scrollviewer가 있습니다. 왜 내가 볼 수있는 경우 목록 상자의 템플릿을 변경해야합니까? ScrollViewer와 StackPanel입니다. 그런 다음 ItemPanelTemplate을 WrapPanel에 다시 정의합니다.

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

스크롤 뷰어의 속성을 제어 할 수있는 ScrollViewer라는 정적 클래스가 있습니다.

<ListBox ScrollViewer.VerticalScrollBarVisibility="Auto"/> 
+0

안녕하세요, 선생님, 도와 주셔서 감사합니다. 나도 너의 설명을 이해 :) – justdruit