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

Question

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

Navigation

#1 by (3 votes)

2

I have made the following part of the interface

But when you start the application, you change your position and the following is left

the magnifying glass is an icon in Button that is placed over 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>

wpf xaml visual-studio

asked by Richard Yordy 11.04.2018 в 02:08

source

1 answer

I can not use a global variable in main c ++ Print field of an array in Angular

score 3 · Accepted 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 say that the button is at 535 pixels from the left edge and the combobox at 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 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 do not have to define unnecessary margins or worry about the spaces, you just tell them how much each column in the grid measures and put the controls in the corresponding column and position within it.

Greetings.