2010-12-08 40 views
1

J'essaie de créer un Expander où l'en-tête reste fixe et le contenu apparaît au-dessus de l'en-tête superposant toutes les autres commandes ci-dessus. Si vous réglez ExpandDirection="Up" et que vous placez l'Expander à l'intérieur d'un Canevas, la moitié du contenu est augmentée - le contenu augmente par rapport à l'en-tête et recouvre les autres contrôles (quoique ci-dessous), mais l'en-tête descend.Comment faire pour étendre WPF Expander tout en gardant l'en-tête fixe

Y at-il un moyen de le faire, mais en gardant l'en-tête dans une position fixe de sorte que le contenu finisse par superposer les contrôles ci-dessus?

C'est ce que je poduced jusqu'à présent:

<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> 

Répondre

3

Vous pouvez utiliser ToggleButton et Popup au lieu de Expander:

<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> 
+0

Merci! Cela a fonctionné beaucoup mieux que la solution que j'ai essayée - en modifiant le ControlTemplate d'Expander. Je peux me débarrasser de la toile en utilisant votre solution Popup. Je dois juste styliser ToggleButton pour le faire ressembler à un bouton à bascule Expander. – Neo

+0

@ rooks: merci mais popup ne bougera pas tant que la position de la fenêtre ou la taille changera !! –

0

L'autre façon est d'utiliser le contrôle CheckBox au lieu de ToggleButton. Il est facile de cacher la boîte en utilisant par ex. StackPanel avec une valeur de marge négative. En outre, vous n'avez pas besoin de se soucier des frontières, etc. C'est beaucoup plus facile dans certains cas.