para - Diseño de un fondo de cuadrícula de diseño de WPF(de cada celda, fila, columna)

wpf templates free

Question

Me gustaría saber si hay alguna manera de diseñar las celdas, filas y columnas de una cuadrícula de diseño de WPF. He estado tratando de encontrar información y las pocas menciones que he encontrado no han sido tan informativas.

Me gustaría diseñar la cuadrícula para que se vea como la de la captura de pantalla vinculada.

Si el control real no lo admite, ¿puedo heredarlo de alguna manera y hacerlo entonces? Soy bastante nuevo en WPF, por lo que cualquier ayuda sería muy apreciada.

Otra cosa, sé que puedo aplicar estilo a todos y cada uno de los controles dentro de la grilla, pero parece exagerado. Me gustaría tener una grilla que lo haga por sí mismo.

captura de pantalla http://img21.imageshack.us/img21/2842/capturehz8.png

Answer 1

@Dan recomienda WPF Unleashed, que actualmente estoy leyendo. Esta mañana, me encuentro con una sección que aborda su pregunta.

Capítulo 6, página 161:

Preguntas más frecuentes: ¿Cómo puedo dar a las celdas de cuadrícula colores de fondo, relleno y bordes como puedo con las celdas de una tabla HTML?

No existe un mecanismo intrínseco para dar a las celdas de Grid tales propiedades, pero puede simularlas fácilmente gracias al hecho de que pueden aparecer múltiples elementos en cualquier celda de Grilla. Para darle a la celda un color de fondo, simplemente puede insertar un rectángulo con el Relleno apropiado, que se estira para llenar la celda de manera predeterminada. Para proporcionar un relleno de celda, puede usar el ajuste automático y establecer el Margen en el elemento secundario apropiado. En el caso de los bordes, puede volver a utilizar un rectángulo pero darle un Trazo explícito del color apropiado, o simplemente puede usar un elemento Borde.

Solo asegúrate de agregar dichos Rectángulos o Bordes a la Grilla antes que cualquiera de los otros elementos secundarios (o explícitamente marcarlos con la propiedad adjunta ZIndex), por lo que su orden Z los pone detrás del contenido principal.

Por cierto, WPF rocas desatadas. Está muy bien escrito, y la impresión a todo color lo hace aún más fácil de leer.

Answer 2

Aquí hay una muestra rápida (muy aproximada) que podría hackear para obtener el formato que desea (si realmente quiere trabajar con WPF, encontrará que Blend es una gran ayuda para que sus diseños se vean bien):

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"                                                                                                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
       <Page.Resources>
           <Style x:Key="CustomerDefinition" TargetType="TextBlock">
               <Setter Property="Control.FontFamily" Value="Tahoma"/>
               <Setter Property="Control.FontSize" Value="12"/>
               <Setter Property="Control.Foreground" Value="Red"/>
           </Style>
           <Style TargetType="{x:Type Label}">
               <Setter Property="Width" Value="100"/>
           </Style>
           <Style x:Key="{x:Type TextBox}" TargetType="{x:Type TextBox}">
               <Setter Property="SnapsToDevicePixels" Value="True"/>
               <Setter Property="OverridesDefaultStyle" Value="True"/>
               <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
               <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
               <Setter Property="MinWidth" Value="120"/>
               <Setter Property="MinHeight" Value="20"/>
               <Setter Property="AllowDrop" Value="true"/>
               <Setter Property="Width" Value="200"/>
               <Setter Property="Template">
                   <Setter.Value>
                       <ControlTemplate TargetType="{x:Type TextBoxBase}">
                           <Border
                               Name="Border"
                               Background="#FFEBE9E9"
                               BorderBrush="#FF8B8787"
                               BorderThickness="1"
                               CornerRadius="2"
                               Padding="3">
                               <ScrollViewer x:Name="PART_ContentHost" Margin="0"/>
                           </Border>
                           <ControlTemplate.Triggers>
                               <Trigger Property="IsEnabled" Value="False">
                                   <Setter TargetName="Border" Property="Background"
                                                       Value="#EEEEEE"/>
                                   <Setter TargetName="Border" Property="BorderBrush"
                                                       Value="#EEEEEE"/>
                                   <Setter Property="Foreground" Value="#888888"/>
                               </Trigger>
                           </ControlTemplate.Triggers>
                       </ControlTemplate>
                   </Setter.Value>
               </Setter>
           </Style>
           <LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">
               <GradientBrush.GradientStops>
                   <GradientStopCollection>
                       <GradientStop Offset="0.0" Color="#FFF0EDED"/>
                       <GradientStop Offset="1.0" Color="#FFE1E0E0"/>
                   </GradientStopCollection>
               </GradientBrush.GradientStops>
           </LinearGradientBrush>
       </Page.Resources>
       <Grid>
           <Grid.ColumnDefinitions>
               <ColumnDefinition Width="*"/>
               <ColumnDefinition Width="*"/>
           </Grid.ColumnDefinitions>
           <Grid.RowDefinitions>
               <RowDefinition Height="26"/>
               <RowDefinition Height="23"/>
               <RowDefinition Height="24"/>
               <RowDefinition Height="24"/>
               <RowDefinition Height="24"/>
           </Grid.RowDefinitions>
           <TextBlock
               Grid.ColumnSpan="2"
               Grid.Row="0"
               Style="{StaticResource CustomerDefinition}"
               Text="Customer Definition"/>
           <Border
               Grid.Column="0"
               Grid.Row="1"
               Background="#FFEBE9E9"
               BorderBrush="#FF8B8787"
               BorderThickness="1">
               <StackPanel Background="{StaticResource NormalBrush}" Orientation="Horizontal">
                   <Label Content="Customer Code"/>
                   <TextBox Text="SMITHA 098 (normally I''d bind here)"/>
               </StackPanel>
           </Border>
           <Border
               Grid.Column="1"
               Grid.Row="1"
               Background="#FFEBE9E9"
               BorderBrush="#FF8B8787"
               BorderThickness="1">
               <StackPanel Background="{StaticResource NormalBrush}" Orientation="Horizontal">
                   <Label Content="Customer Type"/>
                   <TextBox Text="PRIVATE INDIVIDUAL"/>
               </StackPanel>
           </Border>
       </Grid> </Page>

Answer 3

Encontré esta publicación cuando buscaba un método para establecer el margen (o relleno) para las celdas de DataGrid. Mi problema fue resuelto gracias al ejemplo del código xaml publicado en (cerca del final) - bastante minimalista.

http://forums.silverlight.net/forums/p/16842/55997.aspx

Answer 4

La Grid WPF no tiene celdas visibles como tales. Piense en ellos como líneas de cuadrícula invisibles contra las que puede hacer que los elementos secundarios estén alineados.

Por lo tanto, para dar estilo a las celdas de la cuadrícula, debe diseñar los elementos alineados dentro de la cuadrícula.

Es confuso pensar que Grid es algo así como un WinForms DataGrid . Supongo que su equivalente más cercano de WinForms es el control TableLayout .

Vea algunos controles de red de terceros. Usé DevExpress uno mientras estaba en beta y me pareció bastante sencillo.

Answer 5

Yo recomendaría usar bordes para tu estilo.

Podría volver a crear ese diseño con bastante facilidad creando bordes para cada fila y cada columna y establecer los rowspans y colspans en consecuencia.

Tendrás 5 bordes con colspan 2, estos bordes se encargarán de tus fondos degradados para cada fila y los bordes a lo largo de la parte superior e inferior de cada fila. Entonces tendrá 2 bordes con rowspan 5, estos manejarán los bordes de la columna. Imagine que está superponiendo los bordes para formar el efecto de cuadrícula visual que está buscando.

Para el encabezado y el borde exterior, simplemente envuelva toda la grilla con un borde y estilo según sea necesario.

Recomiendo almacenar sus estilos como recursos para que pueda mantener toda su información de estilo en un solo lugar.

Tenga cuidado de aprender cómo funciona el diseño, ya que es bastante poderoso, pero hay una curva de aprendizaje, ya que es bastante diferente a la forma en que funciona CSS. Yo recomendaría leer WPF Unleashed si puedes.