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.

Answer 1

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:

1. Remove hardcoded width from DockPanel (It will automatically pick size from child controls).
2. Remove HorizontalAlignment="Right" from DockPanel.
3. 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>