How to make WPF Expander expand upwards while keeping the header fixed
I am trying to create an Expander where the header stays fixed and the contents appear above the header overlaying any other controls above. Setting ExpandDirection="Up"
and putting the Expander inside a Canvas achieves half of this - the contents expands up relative to the header and it overlays other controls (albeit below), but the header moves downwards.
Is there any way to do this but keeping the header in a fixed position so that the contents ends up overlaying controls above?
This is what I have poduced so far:
<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>开发者_StackOverflow社区
<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>
You can use ToggleButton and Popup instead of 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>
The other way is to use CheckBox control instead of ToggleButton. It is easy to hide the box using e.g. StackPanel with negative margin value. Also, you don't need to care about borders etc. It is much easier in some cases.
精彩评论