WPF Genişletici Düğme Expander içeride Başlık

Question

Ben Expander kontrolünü kullanıyorum ve aşağıdaki resimde gösterildiği gibi başlık tarz var

olduğunu

http://www.hughgrice.com/Expander.gif

: başlık şablonunun sonu için çizgi Expander içerik yani aynı hizada olduğundan ben ultimatly aşağıda resme benzer bir şey ile bitirmek istiyorum böylece düğme başlığının içine dahil edilemeyecek

Önceden teşekkürler.

Answer 1

Sadece genişletme düğmesi değil, genişletici düğmesini HeaderTemplate'e taşımak istediğinizi görüyorum. Bu kolayca FindAncestor ile yapılır:

<DataTemplate x:Key="MyHeaderTemplate"> 
    <Border ...> 
    <DockPanel> 
     <!-- Expander button --> 
     <ToggleButton 
     IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor,Header,1}}" 
     Content=... /> 

     <!-- Other content here --> 
     ... 
    </DockPanel> 
    </Border> 
</DataTemplate>   

Bu başlık şablonu içinde genişletme düğmesi ekler ancak orijinal düğmesini gizlemek değildir:

İlk bu satırlar boyunca, bir ToggleButton'a ekleyebilir ve FindAncestor kullanarak isChecked özelliğini bağlamak Expander tarafından sağlanmıştır. Bunu yapmak için Expander's ControlTemplate'ı değiştirmenizi tavsiye ederim.

Bu gibi kullanılabilen

<ControlTemplate x:Key="ExpanderWithoutButton" TargetType="{x:Type Expander}"> 
    <Border BorderBrush="{TemplateBinding BorderBrush}" 
      BorderThickness="{TemplateBinding BorderThickness}" 
      Background="{TemplateBinding Background}" 
      CornerRadius="3" 
      SnapsToDevicePixels="true"> 
    <DockPanel> 
     <ContentPresenter 
     Content="{TemplateBinding Header}" 
     ContentTemplate="{TemplateBinding HeaderTemplate}" 
     ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" 
     DockPanel.Dock="Top" 
     Margin="1" 
     Focusable="false" /> 
     <ContentPresenter 
     x:Name="ExpandSite" 
     Visibility="Collapsed" 
     HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
     VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
     Margin="{TemplateBinding Padding}" 
     Focusable="false" /> 
    </DockPanel> 
    </Border> 
    <ControlTemplate.Triggers> 
    <Trigger Property="IsExpanded" Value="true"> 
     <Setter Property="Visibility" Value="Visible" TargetName="ExpandSite"/> 
    </Trigger> 
    <Trigger Property="IsEnabled" Value="false"> 
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
    </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

şu:

<Expander Template="{StaticResource ExpanderWithoutButton}"> 

    <Expander.HeaderTemplate> 
    <DataTemplate ...> 
     <Border ...> 
     <DockPanel> 
      <ToggleButton ... 
      IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor,Header,1}}" /> 
      ... other header template content here ... 

Daha basit bir alternatif sadece ayarlamak olacaktır İşte

basit ContentPresenter ile değiştirilir ToggleButton ile Genişletici en ControlTemplate tam bir kopyasıdır genişletici düğmesini kapatmak için YourHeaderTemplate'de bir negatif marj.

<DataTemplate ...> 
    <Border Margin="-20 0 0 0" ... /> 

istediğiniz görünümü elde etmek için negatif payı ayarlama: Yerine yukarıda gösterilen ControlTemplate arasında sizin DataTemplat sadece böyle bir şey içerecektir. Bu çözüm daha basit ama daha farklıdır, çünkü farklı bir sistem temasına geçerseniz gerekli marj değişebilir ve genişleticiniz artık iyi görünmeyebilir.

Answer 2

HeaderTemplate öğesini değil, Genişletici Şablonunu düzenlemeniz gerekecektir. HeaderTemplate, sadece içeriğindeki genişletme düğmesini içermez. Ben çoğu özelliğimiz çıkardı ama önemli şeyler bıraktı

<ControlTemplate TargetType="{x:Type Expander}"> 
    <Border> 
     <DockPanel> 
      <ToggleButton x:Name="HeaderSite" 
          ContentTemplate="{TemplateBinding HeaderTemplate}" 
          Content="{TemplateBinding Header}" 
          DockPanel.Dock="Top" 
          IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" /> 
      <ContentPresenter x:Name="ExpandSite" /> 
     </DockPanel> 
    </Border> 
</ControlTemplate> 

:

varsayılan kontrol şablon şuna benzer. Temel olarak, özelleştirmelerinizi ToggleButton etrafında eklemek isteyeceksiniz. Genişletme düğmesi ve başlık içeriği budur.

Expression Blend'iniz varsa, bu işlemi çok kolaylaştırır çünkü orijinal şablonun bir kopyasını kolayca düzenleyebilirsiniz. Visual Studio henüz bu yeteneğe sahip değil.