VerticalAlignment in WrapPanel - How to make it work correctly?
I am having a kinda strange problem.
Here is the situation. I have a ListView
, with a custom defined GroupStyle
to make data appear in Expander
s, in which there is a WrapPanel
containing StackPanels
(which contain one ToggleButton + one custom control)
The custom control in the StackPanel
is not visible by default, and becomes visible when the ToggleButton
is checked.
However, when I check a ToggleButton
, the custom control appears, and all the other control situated on the same line will move to a vertical center.
Ideally, I'd like these other members to stay on top. I've tried to set VerticalAlignment="Top"
everywhere I could, it doesn't change anyway.
Imaged problem:
The initial state of an expander:
Once the ToggleButton
is clicked, here is what happens:
As you can see, the button "Test Analysis" is moved to stay at the center. I want it to stay in the same place than the original.
Moreover, I've defined all of these styles in separate DataTemplate
s objects.
Here is some light code (I just removed what's useless for the problem here, won't make you read tons of XAML code :) ):
The expander's content property:
<Expander.Content>
<WrapPanel Background="White" VerticalAlignment="Top">
<ItemsPresenter VerticalAlignment="Top"/>
</WrapPanel>
</Expander.Content>
The list's ItemsPanel
:
<ItemsPanelTemplate >
<WrapPanel
Width="{Binding (FrameworkElement.ActualWidth),
RelativeSource={RelativeSource
AncestorType=Expander}}"
ItemWidth="{Binding (ListView.View).ItemWidth,
RelativeSource={RelativeSource AncestorType=ListView}}"
ItemHeight="{Binding (ListView.View).ItemHeight,
RelativeSource={RelativeSource AncestorType=ListView}}" />
</ItemsPanelTemplate>
The list's ItemsTemplate
:
<StackPanel Orientation="Vertical" Height="Auto" Width="Auto" VerticalAlignment="Top" >
<ToggleButton BorderBrush="{x:Null}" Background="{x:Null}" IsChecked="{Binding Value.IsToLaunch, Mode=TwoWay}"
Command="{Binding DataContext.UpdateGroupCheckingsCommand,
RelativeSource={RelativeSource FindAncestor,
Ancesto开发者_StackOverflow社区rType={x:Type UserControl}}}">
<Grid Background="Transparent">
<!-- Blah blah blah about the ToggleButton's content -->
</Grid>
</ToggleButton>
<my:UcReleaseChooser>
<!-- Blah blah blah about being visible if ToggleButton is Checked -->
</my:UcReleaseChooser>
</StackPanel>
Try setting the verticalalignment property to Top or the VerticalContentAlignment property of the listview to Stretch
<Style TargetType="ListView">
<Setter Property="VerticalContentAlignment" Value="Top"/>
</Style>
or
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
精彩评论