Tengo un conjunto de pares Clave/Valor que quiero mostrar en una Ventana WPF. Estoy usando una cuadrícula para presentar como así:

<Grid Margin="4">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Label Grid.Row="0" Grid.Column="0">Code</Label>
    <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Code}"/>

    <Label Grid.Row="1" Grid.Column="0">Name</Label>
    <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Name}"/>
</Grid>

Sin embargo, cuando puedo mostrar esto, los cuadros de texto que se han contraído con su parte superior e inferior de las fronteras de tocar el cuadro de texto de arriba/abajo. ¿Cuál es la mejor manera de añadir espacio vertical a las filas de este diseño?

  • Bastante simple solución: simplemente añada más filas con un conjunto de altura. Así que si usted desea un espacio de 3 píxeles entre las filas, basta con crear una nueva fila entre ellos con una altura fija de 3.
InformationsquelleAutor Grokys | 2009-05-22

3 Comentarios

  1. 82

    Forma más fácil es establecer un margen sobre los controles individuales. Ajuste en los cuadros de texto debería ser suficiente, porque una vez que están espaciados las Etiquetas situadas verticalmente en el centro de cada fila y tienen un montón de espacio de todos modos.

    Se puede establecer de una vez el uso de un estilo:

    <Grid Margin="4">
        <Grid.Resources>
            <Style TargetType="{x:Type TextBox}">
                <Setter Property="Margin" Value="0,0,0,4" />
            </Style>
        </Grid.Resources>
    
        ...
    </Grid>

    Esto agregará una de 4 píxeles del margen en la parte inferior de cualquier cuadro de texto en el interior de su red.

    • Esto no parece estar funcionando para mí. Esto no funciona si el control en cuestión ya tiene un estilo? Puedo establecer el margen de forma manual en el control, pero no a través de su ejemplo.
    • He encontrado una solución alternativa. Todo lo que hice fue agregar una fila adicional entre los controles, con una altura de 3 píxeles. Funciona como un encanto.
  2. 49

    Otro buen enfoque puede ser visto aquí.

    Crear la clase para la configuración de Margin propiedad:

    public class MarginSetter
    {
        public static Thickness GetMargin(DependencyObject obj) => (Thickness)obj.GetValue(MarginProperty);
    
        public static void SetMargin(DependencyObject obj, Thickness value) => obj.SetValue(MarginProperty, value);
    
        //Using a DependencyProperty as the backing store for Margin. This enables animation, styling, binding, etc…
        public static readonly DependencyProperty MarginProperty =
            DependencyProperty.RegisterAttached(nameof(FrameworkElement.Margin), typeof(Thickness),
                typeof(MarginSetter), new UIPropertyMetadata(new Thickness(), MarginChangedCallback));
    
        public static void MarginChangedCallback(object sender, DependencyPropertyChangedEventArgs e)
        {
            //Make sure this is put on a panel
            var panel = sender as Panel;
    
            if (panel == null) return;
    
            panel.Loaded += Panel_Loaded;
        }
    
        private static void Panel_Loaded(object sender, EventArgs e)
        {
            var panel = sender as Panel;
    
            //Go over the children and set margin for them:
            foreach (FrameworkElement fe in panel.Children.OfType<FrameworkElement>())
                fe.Margin = GetMargin(panel);
        }
    }

    Ahora que ha conectado el comportamiento de la propiedad, por lo que la sintaxis de como funcionaría este:

    <StackPanel local:MarginSetter.Margin="5">
       <TextBox Text="hello" />
       <Button Content="hello" />
       <Button Content="hello" />
    </StackPanel>

    Este es el más fácil & la manera más rápida de establecer Margin a varios niños de un panel, incluso si no son del mismo tipo. (I. e. Buttons, TextBoxes, ComboBoxes, etc.)

    • +1 Grande. He cambiado el nombre de la clase a LayoutSetter y añadido algunas otras propiedades como la VerticalAlignment para que se propagan de la misma manera. Me gustaría poder simplemente definir un estilo para FrameworkElement…
    • Tenga en cuenta que esto no funciona si el niño los elementos se añaden/quitan de manera dinámica, como en un ItemsControl obligado a un cambio de colección.
    • He copiado y refactorizar clase necesaria para las propiedades asociadas. Espero que no la mente.
    • ¿Hay alguna manera de hacer este conectado respeto por la propiedad local Margin valores especificados en XAML?
  3. 2

    ¿Qué acerca de la configuración del cuadro de texto VerticalAlignment al Centro?

    <Grid Margin="4">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
    
                    <Label Grid.Row="0" Grid.Column="0">Code</Label>
                    <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Code}" VerticalAlignment="Center"/>
    
                    <Label Grid.Row="1" Grid.Column="0">Name</Label>
                    <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Name}" VerticalAlignment="Center"/>
                </Grid>

Dejar respuesta

Please enter your comment!
Please enter your name here