DockPanel Floating Element

Question

I have a DockPanel with two elements in it. The first element needs to span the whole DockPanel. The second element needs to be aligned right but "float" on top of the other element. When I comment out the second element, the first element does span the whole dock panel and it looks proper. When I have the second element in then it pushes the first element and squishes it.

                <DockPanel HorizontalAlignment="Stretch" Margin="6,8,0,8" Grid.Row="1" Grid.Column="0">
                    <shared:YesNoControl Panel.ZIndex="0"></shared:YesNoControl>
                    <extended:IntegerUpDown Panel.ZIndex="1" Height="25" HorizontalAlignment="Right" Width="100"></extended:IntegerUpDown>
                </DockPanel>

How can I get this effect? I basically want the second element to not even affect the first element and just appear over top of it .

Answer 1

Try this simple approach using the margin:

<DockPanel Grid.Row="2" HorizontalAlignment="Stretch">
    <TextBox Background="AliceBlue" Text="This is a text box contains a great deal of useless text!!!!" />
    <Button  Width="20" Height="20" Margin="-20,0,0,0" />
</DockPanel>

The button covers the text so it appears to 'hover'.