Establecer el ancho de la cuadrícula en automático

Steve

Tengo esta interfaz para mi aplicación ATM WPF. Usé tanto el panel del muelle como la rejilla. Se ve bien, pero si lo maximizo, no es 'receptivo'. Intenté cambiar el ancho de la cuadrícula a * pero no funciona. Si lo configuro en "Auto", no se ve bien.

<Window x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApp1"
    mc:Ignorable="d"
    Title="MainWindow" Height="600" Width="600">

    <DockPanel>
    <Button DockPanel.Dock="Left" VerticalContentAlignment="Top">
        <StackPanel >
            <Button Content="Left Button 1" Height="100"></Button>
            <Button Content="Left Button 2" Height="100"></Button>
            <Button Content="Left Button 3" Height="100"></Button>
        </StackPanel>
    </Button>
    <Button DockPanel.Dock="Right"  VerticalContentAlignment="Top">
        <StackPanel>
            <Button Content="Right Button 1" Height="100"></Button>
            <Button Content="Right Button 2" Height="100"></Button>
            <Button Content="Right Button 3" Height="100"></Button>
        </StackPanel>
    </Button>
    <Button DockPanel.Dock="Bottom" VerticalContentAlignment="Bottom" >
        <Grid Margin="10" Width="400">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Button Content="7" Margin="5" Grid.Row="1" Height="50"/>
            <Button Content="8" Margin="5" Grid.Row="1" Grid.Column="1"/>
            <Button Content="9" Margin="5" Grid.Row="1" Grid.Column="2"/>

            <Button Content="4" Margin="5" Grid.Row="2" Height="50"/>
            <Button Content="5" Margin="5" Grid.Row="2" Grid.Column="1"/>
            <Button Content="6" Margin="5" Grid.Row="2" Grid.Column="2"/>

            <Button Content="1" Margin="5" Grid.Row="3" Height="50"/>
            <Button Content="2" Margin="5" Grid.Row="3" Grid.Column="1"/>
            <Button Content="3" Margin="5" Grid.Row="3" Grid.Column="2"/>

            <Button Content="0" Margin="5" Grid.Row="4" Grid.ColumnSpan="2"/>
            <Button Content="." Margin="5" Grid.Row="4" Grid.Column="2" Height="50"/>

        </Grid>
    </Button>
    <Button>
        <Grid Margin="10" Width="400">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Label Content="PIN" Margin="5" Grid.Row="1" Height="50"/>
            <TextBox Margin="5" Grid.Row="1" Grid.Column="2" Height="50" />

        </Grid>
    </Button>
</DockPanel>

Por cierto, ¿puedo usar Grid para todo aquí o tengo que usar una combinación de dockpanel y grid?

ingrese la descripción de la imagen aquí

Clemens

Puede utilizar un conjunto de cuadrículas anidadas:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition/>
        <ColumnDefinition Width="100" />
    </Grid.ColumnDefinitions>

    <StackPanel Grid.Column="0">
        <Button Content="Left Button 1" Height="100"/>
        <Button Content="Left Button 2" Height="100"/>
        <Button Content="Left Button 3" Height="100"/>
    </StackPanel>

    <StackPanel Grid.Column="2">
        <Button Content="Right Button 1" Height="100"/>
        <Button Content="Right Button 2" Height="100"/>
        <Button Content="Right Button 3" Height="100"/>
    </StackPanel>

    <Grid Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="0" Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" VerticalAlignment="Center" Text="PIN"/>
            <TextBox Grid.Column="1" VerticalAlignment="Center"/>
        </Grid>

        <Grid Grid.Row="1" Margin="10">
            <!-- the number keypad -->
        </Grid>
    </Grid>
</Grid>

Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.

En caso de infracción, por favor [email protected] Eliminar

Editado en
0

Déjame decir algunas palabras

0Comentarios
Iniciar sesiónRevisión de participación posterior

Artículos relacionados

Establecer el ancho mínimo de la columna en la cuadrícula

Establecer el ancho de las columnas en la vista de cuadrícula creada dinámicamente

Cómo configurar el relleno automático al ancho de la columna de la cuadrícula

Cómo establecer el ancho máximo de las columnas de la cuadrícula css

Tamaño automático de las columnas de la cuadrícula según el valor en el valor de la cuadrícula en extjs6

Tamaño automático de las celdas de la tabla sin establecer el ancho

Establecer el ancho del menú desplegable en automático

No se puede establecer el ancho o el alto para las columnas y filas de la cuadrícula web

Kendo angular: establezca el ancho de la columna de la cuadrícula en CSS o SCSS

¿Hay alguna manera de especificar el ancho de columna de la cuadrícula en porcentaje?

Establezca el ancho de la primera columna igual al ancho de la cuadrícula menos la segunda columna en xaml

Cuadrícula de Kendo - Ancho automático y desplazable

cómo establecer manualmente el valor de la columna en la cuadrícula de kendo

ancho de las celdas en la tabla de cuadrícula

establecer el color del hipervínculo en la cuadrícula de datos cuando está resaltado

<img> no es 100% de ancho en la cuadrícula Bootstrap?

Diseño de cuadrícula con una fila con 3 elementos que el ancho de cada elemento es automático

Establecer el espaciado de la cuadrícula usando Qt

El ancho de la celda aumenta después de hacer clic en la cuadrícula de datos de reacción

Eliminar el espacio automático entre los widgets de Tkinter de Python en cuadrícula

¿Qué es el ajuste automático en columnas de temperatura de cuadrícula?

Limitar el ancho de la columna en la cuadrícula de datos para las columnas del botón de comando

Establecer filas en la cuadrícula de datos Reaccionar

Cuadrícula CSS: ¿cómo se distribuye uniformemente el ancho de columna en las columnas "automáticas"?

XAML: la visibilidad basada en el ancho real se comporta de forma extraña en una cuadrícula

Limitar el ancho de una columna al ancho de un elemento de cuadrícula en particular

Limitar el ancho de una columna al ancho de un elemento de cuadrícula en particular

Establecer el valor de la casilla de verificación en todas las casillas de verificación de la cuadrícula

Establecer la imagen en el encabezado de la fila de cuadrícula de datos a través de xaml

TOP Lista

CalienteEtiquetas

Archivo