Cómo hacer un diseño en WPF (superposición uniformgrid?) [cerrado]
Frecuentes
Visto 653 equipos
1
Estoy tratando de crear una ventana con el diseño dado y tengo curiosidad sobre la mejor manera de hacerlo. He configurado el fondo de la ventana para que sea una imagen en mosaico del color más claro. Luego pensé en agregar una cuadrícula uniforme con cinco columnas y una fila con la quinta columna con un fondo "naranja" ligeramente transparente. Luego agregaría otra cuadrícula uniforme con 5 filas y 5 columna con las filas 1 y 2 con la misma configuración de color "naranja". Eventualmente, agregaré un logotipo de la empresa en la esquina superior izquierda y algo de texto en la banda horizontal de "naranja". Mis métodos no parecen estar funcionando :-( cualquier guía mientras estoy investigando esto sería muy apreciada.
2 Respuestas
2
Esto funciona bien para mi:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0" Background="Yellow">
<Image Source="http://www.google.com/images/srpr/logo3w.png"
HorizontalAlignment="Left"/>
</Grid>
<Grid Grid.Row="0" Grid.Column="1" Background="Orange"/>
<Grid Grid.Row="1" Grid.Column="0" Background="Orange"/>
<Grid Grid.Row="1" Grid.Column="1" Background="Red"/>
<Grid Grid.Row="2" Grid.Column="0" Background="Yellow"/>
<Grid Grid.Row="2" Grid.Column="1" Background="Orange"/>
<TextBlock Grid.Row="1" Grid.ColumnSpan="2" Grid.Column="0">
I am nice text spanning the whole row! Look, here's a lot
of me in the cell.
</TextBlock>
</Grid>
</Page>
Si insistes en las rayas semitransparentes, puedes hacer algo como
<Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="1"
Background="Orange" Opacity="0.5"/>
or
<Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="1" Background="#80FF7F00"/>
(incluida la opacidad en el color), etc.
Por ejemplo, intente esto (tendrá que modificar los colores):
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
Background="Yellow" Opacity="0.5"/>
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
Background="Orange" Opacity="0.5"/>
<Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
Background="Yellow" Opacity="0.5"/>
<Grid Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"
Background="Yellow" Opacity="0.5"/>
<Grid Grid.Row="0" Grid.Column="1" Grid.RowSpan="3"
Background="Orange" Opacity="0.5"/>
<Image Grid.Row="0" Grid.Column="0"
Source="http://www.google.com/images/srpr/logo3w.png"
HorizontalAlignment="Left"/>
<TextBlock Grid.Row="1" Grid.ColumnSpan="2" Grid.Column="0">
I am nice text spanning the whole row! Look, here's a lot
of me in the cell.
</TextBlock>
</Grid>
</Page>
Respondido 01 Jul 12, 19:07
1
La respuesta corta fue simplemente usar una cuadrícula y configurar el color de fondo de las celdas para que fuera mi color elegido con una ligera transparencia. Luego podría configurar las celdas de intersección en un color más oscuro o agregar una etiqueta a las celdas que se cruzan con el mismo fondo y transparencia. Gracias a todos por su ayuda. Durante la última hora he aprendido mucho sobre xaml y WPF.
Respondido 01 Jul 12, 21:07
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas wpf layout or haz tu propia pregunta.
¿Por qué no una cuadrícula de 2x3? puedes usar
Width="5*"
yWidth="1*"
- VladSí, eso podría funcionar. . . luego configuraría manualmente el color de las celdas que se cruzan. - donbyte
Anteriormente usé una cuadrícula con dimensiones de filas/columnas establecidas en valores de estrella, rellenada con controles de usuario para contener el contenido. Echa un vistazo aquí: stackoverflow.com/questions/6949004/… - CodeWarrior