ItemsControl子項目整個項目的擴展

所以很難描述我想要的行爲，所以我畫了一個很好的圖片與我的業餘塗料技能。ItemsControl子項目整個項目的擴展

enter image description here

所以基本上我想要的ItemsControl的標題像一個膨脹操作，而不沿來（因此只需點擊在框中的任意位置將擴大到看到子項目）醜陋的擴展圖標。我已經有了數據層次結構，但是我不能讓擴展器像我想要的那樣工作，任何人都可以重寫擴展器樣式來完成這樣的事情，或者有另一種控制能夠完成像這更容易？這裏有一些簡單的代碼，但有一個醜陋的擴展器按鈕，覆蓋了headertemplate，擴展器的風格只會讓它看起來更糟糕。

<ItemsControl ItemsSource="{Binding Collection}" 
    HorizontalContentAlignment="Stretch"> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Expander Header="Heading"> 
       <ItemsControl ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch"> 
        <ItemsControl.ItemTemplate> 
         <DataTemplate> 
          <Expander Header="Sub-Heading"> 
           <ListBox ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch"/> 
          </Expander> 
         </DataTemplate> 
        </ItemsControl.ItemTemplate> 
       </ItemsControl> 
      </Expander> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl>

來源

2012-10-12 Kevin DiTraglia

您還應該使用HierarchicalDataTemplate讀入TreeView。 http://msdn.microsoft.com/en-us/library/system.windows.hierarchicaldatatemplate.aspx –

你只需要使用自定義樣式的擴展，如果你不喜歡內置的風格:)

這裏是一個開始：

<Style x:Key="customExpander"> 
     <Setter Property="Control.Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Expander"> 
        <DockPanel> 
         <ToggleButton DockPanel.Dock="Top" 
             IsChecked="{Binding Path=IsExpanded,Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" 
             Background="{TemplateBinding Background}" 
             Content="{TemplateBinding Header}" 
             ContentTemplate="{TemplateBinding HeaderTemplate}" 
             Foreground="{TemplateBinding Foreground}" 
             FontFamily="{TemplateBinding FontFamily}" 
             FontSize="{TemplateBinding FontSize}" 
             FontStretch="{TemplateBinding FontStretch}" 
             FontStyle="{TemplateBinding FontStyle}" 
             FontWeight="{TemplateBinding FontWeight}" 
             HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
             VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
             Padding="{TemplateBinding Padding}" 
             Name="HeaderSite" 
             MinWidth="0" 
             MinHeight="0" 
             Margin="1,1,1,1"> 
          <ToggleButton.Template> 
           <ControlTemplate TargetType="ToggleButton"> 
            <TextBlock Text="{TemplateBinding Content}" Background="{TemplateBinding Background}" /> 
           </ControlTemplate> 
          </ToggleButton.Template> 
         </ToggleButton> 

         <ContentPresenter Content="{TemplateBinding Content}" 
            ContentTemplate="{TemplateBinding ContentTemplate}" 
            ContentStringFormat="{TemplateBinding ContentStringFormat}" 
            Name="ExpandSite" Margin="{TemplateBinding Padding}" 
            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
            Visibility="Collapsed" 
            Focusable="False" 
            DockPanel.Dock="Bottom" /> 
        </DockPanel> 

        <ControlTemplate.Triggers> 
         <Trigger Property="IsExpanded" Value="True"> 
          <Setter TargetName="HeaderSite" Property="Background" Value="Gold" /> 
          <Setter TargetName="ExpandSite" Property="Visibility" Value="Visible" /> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="False"> 
          <Setter Property="TextElement.Foreground" Value="{DynamicResource DisabledTextBrush}" /> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
</Style>

然後更改您的XAML使用這種風格：

<ItemsControl ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch"> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Expander Header="Heading" Style="{StaticResource customExpander}" Background="LightSteelBlue" > 
       <ItemsControl ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch"> 
        <ItemsControl.ItemTemplate> 
         <DataTemplate> 
          <Expander Header="Sub-Heading" Style="{StaticResource customExpander}" Background="LightSalmon"> 
           <ListBox ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch"/> 
          </Expander> 
         </DataTemplate> 
        </ItemsControl.ItemTemplate> 
       </ItemsControl> 
      </Expander> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl>

編輯小鬼如果你想定製ortant部分是

<ControlTemplate TargetType="ToggleButton"> 
    <TextBlock Text="{TemplateBinding Content}" Background="{TemplateBinding Background}" /> 
</ControlTemplate>

。這是一個非常原始的解決方案，因此您有足夠的空間來增強它;）

來源

2012-10-12 18:01:11 Sisyphe

非常酷，現在讓我們只是說我想改變背景爲一個特定的顏色（懸停觸發器的獎勵積分並擴大）。然後我會給你我支付的支票:)。我只是在確定需要指定哪些顯而易見的內容以查看任何結果時遇到一些小問題。 –

你這個人，非常感謝你，這些複雜的模板中的一些仍然讓我的頭腦旋轉了一下。 –

ItemsControl子項目整個項目的擴展

回答

相關問題