Panel on Control Focus

Question

I am working on a multi-lingual WPF app. The user must provide input for multiple languages at same time. This works but it also moves fields below it.

What I am looking for is somewhat like this:

What I have done so far is below:

    <Label Grid.Column="0" Grid.Row="0"  Content="Field1" Padding="0" Style="{DynamicResource ControlLabel}"/>
<Label Grid.Column="1" Grid.Row="0" Content=":" Style="{DynamicResource ControlLabelMiddle}"/>
<StackPanel Grid.Column="2" Grid.Row="0" Margin="3"  Style="{Binding RelativeSource={RelativeSource TemplatedParent}}">
    <TextBox x:Name="txtField1" Height="23" GotKeyboardFocus="txtField1_GotKeyboardFocus" />
    <Grid Background="White" x:Name="pnlField1" Visibility="Collapsed" Panel.ZIndex="99">
        <Border BorderBrush="blue" BorderThickness="3">
        <StackPanel Background="White" Margin="5">
            <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
            <Label Content="Language2" HorizontalAlignment="Left"/>
            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Right" FontSize="10" Padding="2" >
                <Hyperlink Hyperlink.Click="btnClose_Click" x:Name="btnClose" >X</Hyperlink>
                </TextBlock>
            </StackPanel>
            <TextBox x:Name="txtField_Second" Height="23" Width="280" />
        </StackPanel>
        </Border>
    </Grid>
</StackPanel>

When the above control gets focus, my second language panel comes up. But it moves my next row controls down and doesn't look good.

Answer 1

To keep the panels from moving, try placing them in a Grid , rather than a StackPanel . This enables you to specifically define where each element is placed in the Grid . In a StackPanel , elements "stack" on top of each other. As contents of the panels change, the amount of space each element takes up in the "stack" also has the potential to change.