Aligning only visible elements in dockpanel

Question

<DockPanel Grid.Row="1" HorizontalAlignment="Right" Width="300">
    <Button x:Name="startPackageSendButton" Command="{Binding StartPackageSendingProcessCommand}"  Style="{StaticResource blueButtonStyle}" Content="Start" Width="100" VerticalAlignment="Top" Margin="0,0,0,0" Visibility="Visible" HorizontalAlignment="Right"/>
    <Button x:Name="clearPackageSendButton" Command="{Binding ClearPackageSendingProcessCommand}"  Style="{StaticResource blueButtonStyle}" Content="Clear" Width="100" VerticalAlignment="Top" Margin="0,0,0,0" Visibility="Collapsed" HorizontalAlignment="Right"/>
    <Button x:Name="cancelPackageSendButton" Command="{Binding CancelPackageSendingProcessCommand}" Style="{StaticResource blueButtonStyle}" Content="Stop" Width="100" VerticalAlignment="Top" Margin="0,0,0,0" Visibility="Visible" HorizontalAlignment="Right"/>
</DockPanel>

I am using Dockpanel to stack some buttons with horizontal alignment. If some buttons are not Visible I have empty spaces between buttons.

How can i eliminate empty spaces in case buttons do not have Visibility set to visible? Is there a technique that I could achieve this effect?

EDIT: I changed hidden to collapsed as advised.

score 5 · Accepted Answer · edited May 23 '17 at 12:32

I suspect you are hiding the controls by setting Visibility.Hidden.

You should use Visibility.Collapsed.

Read more here:

The difference is that Visibility.Hidden hides the control, but reserves the space it occupies in the layout. So it renders whitespace instead of the control.

Visibilty.Collapsed does not render the control and does not reserve the whitespace. The space the control would take is 'collapsed', hence the name.

After your edit, its evident you are using Hidden. Use Collapsed instead:

<DockPanel Grid.Row="1" HorizontalAlignment="Right" Width="300">
    <Button Visibility="Collapsed"/>
    <Button Visibility="Visible"/>
    <Button Visibility="Collapsed"/>
</DockPanel>

EDIT:

I checked you sample code after removing Style and Command part and found few issues:

Remove hardcoded width from DockPanel (It will automatically pick size from child controls).
Remove HorizontalAlignment="Right" from DockPanel.
Set LastChildFill to False in case you don't want last added child to take all space.

This is how it should look like and it works perfectly:

<DockPanel Grid.Row="1" LastChildFill="False">
   <Button x:Name="startPackageSendButton" Content="Start" Width="100" 
           VerticalAlignment="Top" Margin="0,0,0,0" Visibility="Collapsed" 
           HorizontalAlignment="Right"/>
   <Button x:Name="clearPackageSendButton" Content="Clear" Width="100" 
           VerticalAlignment="Top" Margin="0,0,0,0" Visibility="Visible" 
           HorizontalAlignment="Right"/>
   <Button x:Name="cancelPackageSendButton" Content="Stop" Width="100" 
           VerticalAlignment="Top" Margin="0,0,0,0" Visibility="Collapsed" 
           HorizontalAlignment="Right"/>
 </DockPanel>

your answer is valid. I have set Visibility.Collapsed as default visibility in the XAML and I manipulate the visibility in code behind. I have changed everything to collapsed instead of hidden, yet the effect is still there... — no9, Jan 28 '14 at 11:05
Please post the snapshot for the same. Also try posting small sample replicating an issue. There has to be something in your code because as per framework level, it should work fine. — Rohit Vats, Jan 28 '14 at 11:07
Nice one. I have to keep HorizontalAlignement ="Right" on DockPanel since it is aligning buttons to the left if I dont set it. — no9, Jan 28 '14 at 11:38

Aligning only visible elements in dockpanel

1 Answers1