Wie mache ich WPF Expander erweitern nach oben, während die Kopfzeile fest

Question

Ich versuche, einen Expander zu erstellen, wo der Header fixiert bleibt und der Inhalt über der Kopfzeile über alle anderen oben genannten Kontrollen angezeigt wird. Die Einstellung ExpandDirection="Up" und das Setzen des Expanders innerhalb eines Canvas erreicht die Hälfte - der Inhalt wird relativ zum Header erweitert und überlagert andere Steuerelemente (wenn auch darunter), aber der Header bewegt sich nach unten.

Gibt es eine Möglichkeit, dies zu tun, aber den Header in einer festen Position zu halten, so dass der Inhalt überlagert Kontrollen oben?

Dies ist, was ich bisher poduced:

<Window x:Class="Sandbox.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="900" Width="1100"> 
    <StackPanel> 

    <StackPanel Margin="20,0,0,0"> 
     <RadioButton Content="Choice One"/> 
     <RadioButton Content="Choice Two"/> 
     <RadioButton Content="Choice Three"/> 
     <RadioButton Content="Choice Four"/> 
     <RadioButton Content="Choice Five"/> 
     <RadioButton Content="Choice Six"/> 
    </StackPanel> 

    <Canvas MinHeight="25" Panel.ZIndex="99"> 
     <Expander Header="This must stay fixed" ExpandDirection="Up" Width="175"> 
     <Grid Background="Cornsilk"> 
      <Grid.BitmapEffect> 
      <DropShadowBitmapEffect /> 
      </Grid.BitmapEffect> 

      <TextBlock TextWrapping="Wrap" Margin="5"> 
      This must expand upwards, not downwards. 
      The header must remain exactly where it is. 
      This TextBlock must appear above the header 
      and overlay the top radio buttons instead. 
      </TextBlock> 
     </Grid> 
     </Expander> 
    </Canvas> 

    <StackPanel Margin="20,0,0,0"> 
     <RadioButton Content="Choice One"/> 
     <RadioButton Content="Choice Two"/> 
     <RadioButton Content="Choice Three"/> 
     <RadioButton Content="Choice Four"/> 
     <RadioButton Content="Choice Five"/> 
     <RadioButton Content="Choice Six"/> 
    </StackPanel> 

    </StackPanel> 
</Window> 

Answer 1

Sie können statt Expander ToggleButton und Popup verwenden:

<Canvas MinHeight="25" Panel.ZIndex="99"> 
    <ToggleButton x:Name="toggle" Content="This must stay fixed" Width="175" /> 
    <Popup Placement="Top" PlacementTarget="{Binding ElementName=toggle}" 
     IsOpen="{Binding ElementName=toggle, Path=IsChecked}"> 
     <Grid Background="Cornsilk" Width="175"> 
      <Grid.BitmapEffect> 
       <DropShadowBitmapEffect /> 
      </Grid.BitmapEffect> 

      <TextBlock TextWrapping="Wrap" Margin="5"> 
      This must expand upwards, not downwards. 
      The header must remain exactly where it is. 
      This TextBlock must appear above the header 
      and overlay the top radio buttons instead. 
      </TextBlock> 
     </Grid> 
    </Popup> 
</Canvas> 

Answer 2

Der andere Weg ist CheckBox-Steuerelement statt ToggleButton zu verwenden. Es ist leicht, die Box unter Verwendung z.B. StackPanel mit negativem Randwert. Sie müssen sich auch nicht um Grenzen usw. kümmern. In manchen Fällen ist es viel einfacher.