How to shift several buttons when mouse enter over another one

Question

How to shift several buttons when mouse enter

Please see this view:

Now what i want to add it's when the mouse enter over the Add button the Run button will shift to the right so i will see this view:

If it possible i want to see the shift takes not immediately but about 200-500 milliseconds.

There is a simple way to do that or i need to change the margin ?

Answer 1

Perhaps the best way is the simplest way.

Here's an example:

<StackPanel Orientation="Horizontal">
    <Button Content="Add" MouseEnter="AddButton_MouseEnter"/>
    <Button Name="btnItem1" Content="Item 1" Margin="3,0,0,0" Visibility="Collapsed"/>
    <Button Name="btnItem2" Content="Item 1" Margin="3,0,0,0" Visibility="Collapsed"/>
    <Button Content="Run" Margin="3,0,0,0"/>
</StackPanel>

And here is the code-behind:

private async void AddButton_MouseEnter(object sender, MouseEventArgs e)
{
    await Task.Delay(200);

    btnItem1.Visibility = System.Windows.Visibility.Visible;
    btnItem2.Visibility = System.Windows.Visibility.Visible;
}