2011-06-12 94 views
2

我确信这是死的简单,但我似乎无法弄清楚。获取分隔符来填充剩余空间

我有一个ListBox来显示项目,并且这些都是用DataTemplate显示的。我现在想分组这些项目,所以已经根据制造商属性添加了一个组。这是在代码后面完成的。

ICollectionView view = CollectionViewSource.GetDefaultView(Items); 
PropertyGroupDescription groups = new PropertyGroupDescription("Manufacturer"); 
view.GroupDescriptions.Add(groups); 

我想让每个组都处于扩展器中,因此可以隐藏它们。通过在MSDN上查看GroupTemplates,我已经得到了这个工作。这涉及到,有一个扩展器,textblock,然后一个分隔符来排除Windows Vista/7组中的额外空间。如下。

Windows 7 Groups

我遇到的问题是我不能得到分离,以正确填写剩余空间。如果我使用MinWidth值,我所有的扩展器都具有相同的宽度。如果我使用{binding ActualWidth,ElementName = MyListBox},则分隔符太宽,与包含它的控件一样宽。因此它将滚动条设置为可见,(请参见下面的屏幕截图)。如果我把宽度留空,那么分隔符根本就没有被绘制。

我的直觉是堆叠面板应该扩展分隔符来使用剩余的空间,但它没有。所以我尝试了下面的XamlCode中的DockPanel,但是这也失败了。我还有其他一些问题需要通过使用合适的宽度来获取控件来填充剩余空间,所以如果您可以帮我解决这个问题,那就太棒了。

Current WPF ListBox-Group header Width Issue

我现在的WPF XAML标记。您需要添加元素才能显示某些内容。

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="350" Width="525"> 
<ScrollViewer VerticalScrollBarVisibility="Auto"> 
    <StackPanel x:Name="myStackPanel"> 
     <ListBox x:Name="MyListBox"> 
      <ListBox.GroupStyle> 
       <GroupStyle> 
        <GroupStyle.ContainerStyle> 
         <Style TargetType="{x:Type GroupItem}"> 
          <Setter Property="Template"> 
           <Setter.Value> 
            <ControlTemplate TargetType="{x:Type GroupItem}"> 
             <Expander IsExpanded="True"> 
              <Expander.Header> 
               <DockPanel HorizontalAlignment="Stretch" 
                  VerticalAlignment="Stretch" 
                  Height="Auto" 
                  Width="{Binding ActualWidth, ElementName=MyListBox}" 
                  Margin="10"> 
                <TextBlock DockPanel.Dock="Left" Margin="0" FontSize="14" FontWeight="Bold" Foreground="Black" Text="{Binding Path=Name}"/> 
                <Separator DockPanel.Dock="Right" Margin="4,0,4,0"></Separator> 
               </DockPanel> 
              </Expander.Header> 
              <ItemsPresenter Margin="5,0,0,0" /> 
             </Expander> 
            </ControlTemplate> 
           </Setter.Value> 
          </Setter> 
         </Style> 
        </GroupStyle.ContainerStyle> 
       </GroupStyle> 
      </ListBox.GroupStyle> 
      <ListBox.ItemTemplate> 
       <DataTemplate> 
        <!-- Data Template Here --> 
       </DataTemplate> 
      </ListBox.ItemTemplate> 
     </ListBox> 
    </StackPanel> 
</ScrollViewer> 

回答

1

它实际上是不平凡的,膨胀的控制模板由一个切换按钮作为页眉和用于内容的ContentPresenter的。问题是,切换按钮本身具有包含具有对准硬编码到它的箭头特殊风格&模板,默认一个看起来是这样的:

<Style x:Key="ExpanderDownHeaderStyle" 
     TargetType="{x:Type ToggleButton}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ToggleButton}"> 
       <Border Padding="{TemplateBinding Padding}"> 
        <Grid Background="Transparent" 
          SnapsToDevicePixels="False"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="19"/> 
          <ColumnDefinition Width="*"/> 
         </Grid.ColumnDefinitions> 
         <!-- ... --> 

         <!-- The HorizontalAlignment needs to be set to stretch here --> 
         <ContentPresenter Grid.Column="1" 
              Margin="4,0,0,0" 

              HorizontalAlignment="Left" 

              VerticalAlignment="Center" 
              SnapsToDevicePixels="True" 
              RecognizesAccessKey="True"/> 
        </Grid> 
       </Border> 
       <ControlTemplate.Triggers> 
        <!-- ... --> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

为了让您的风格工作您需要修改默认扩展器模板(获取默认模板on MSDN - Default WPF Themes链接)。不好,但你没有太多的选择。

+0

我认为这会很简单。我不想修改扩展器本身。而只是在其一侧添加分隔符。我今天晚上尝试阅读MSDN链接,并尝试在Expander头部之外移动一些代码,以查看它是否比我目前的尝试更容易。 – JonWillis 2011-06-13 07:22:17

+0

我发现这个stackoverflow问题也是有用的 - http://stackoverflow.com/questions/661503/how-to-style-a-wpf-expander-header – JonWillis 2011-06-14 07:27:04