2011-06-12 35 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