Home / Questions / 154801
Accepted
Richard
Asked: 2020-04-11 16:08:31 +0800 CST 2020-04-11 16:08:31 +0800 CST

How to fix the movement of the positioning of buttons or other elements when starting the application?

  • 772

I have made the following part of the interfaceestablished design

But when starting the application they change position and the following remains

running application

the magnifying glass is an icon on a Button that is placed on a TextBox

The code of the three elements is the following made with Visual Studio in a window (WPF)

<TextBox x:Name="tbBusqueda" Height="30" Margin="0,10,197,0" TextWrapping="Wrap" Text="Ingrese su busqueda" VerticalAlignment="Top" VerticalContentAlignment="Center" HorizontalAlignment="Right" Width="230" GotFocus="tbBusqueda_GotFocus"/>
<Button x:Name="btnBuscar" Margin="535,10,0,0" VerticalAlignment="Top" Height="30" Click="btnBuscar_Click" BorderBrush="{x:Null}" HorizontalAlignment="Left" Width="30">
<ComboBox x:Name="cmbBuscarPor" HorizontalAlignment="Left" Text="Buscar por " Margin="210,10,0,0" VerticalAlignment="Top" Width="120" Height="30" VerticalContentAlignment="Center" SelectedIndex="0" HorizontalContentAlignment="Center">
        <ComboBoxItem Visibility="Collapsed">Buscar por</ComboBoxItem>
        <ComboBoxItem Content="Nombre" HorizontalContentAlignment="Center"/>
        <ComboBoxItem Content="Apellido paterno" HorizontalContentAlignment="Center"/>
        <ComboBoxItem Content="Puesto" HorizontalContentAlignment="Center"/>
</ComboBox>
visual-studio

1 Answers

  1. Best Answer

    With such a limited piece of XAML it is difficult, but I think your problem is that you are defining the positions by managing the margins, for example you tell the button to be 535 pixels from the left edge and the combobox to be 210.

    This solution is not optimal, what I would do (there are a thousand solutions) is to place -in the area occupied by the 3 controls- a Grid and divide it using ColumnDefinitions in order to define the spaces.

    <Grid Height="30">
    <!-- el ancho tu ves como defines -->        
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="120"/>
        <ColumnDefinition Width="230"/>
    </Grid.ColumnDefinitions>        
    <ComboBox x:Name="cmbBuscarPor" Text="Buscar por " IsReadOnly="True" IsEditable="True" Height="30" SelectedIndex="0" HorizontalContentAlignment="Center" Margin="0,0,5,0" VerticalContentAlignment="Center">
        <!-- IsReadOnly="True" IsEditable="True" para que se muestre el Texto sin agregarlo como item -->
        <ComboBoxItem Content="Nombre" />
        <ComboBoxItem Content="Apellido paterno" />
        <ComboBoxItem Content="Puesto" />
    </ComboBox>
    <TextBox Grid.Column="1" x:Name="tbBusqueda" TextWrapping="Wrap" Text="Ingrese su busqueda"  GotFocus="tbBusqueda_GotFocus" VerticalContentAlignment="Center"  Margin="0,0,10,0"/>
    <Button Grid.Column="1" Content="Buscar por" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</Grid>

    With that you don't have to define unnecessary margins or worry about spaces, you just tell it how big each column is within the grid and you put the controls in the corresponding column and position within it.

    All the best.

    • 3