2010-09-24 10 views
27

¿Hay alguna manera de cambiar el estilo de la cuadrícula en la red wpf? Necesito dividir la cuadrícula en 4 celdas. Para hacerlo utilicé RowDefinitions y ColumnDefinitions. Sin embargo, necesito que el usuario distinga qué celda es la que, por eso, necesito cambiar el color de las líneas de la cuadrícula.wpf gridlines - cambio de estilo

Respuesta

78

Depende del estilo que esté buscando. En WPF, hay diferentes maneras de hacer casi cualquier cosa. Aquí hay algunos de los más fáciles.

La forma más fácil es establecer ShowGridlines = "true":

<Grid HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch" 
      Margin="5" 
      ShowGridLines="True"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*" /> 
      <ColumnDefinition Width="*" /> 
     </Grid.ColumnDefinitions> 

     <Grid.RowDefinitions> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="*" /> 
     </Grid.RowDefinitions> 

     <TextBlock Grid.Column="0" 
        Grid.Row="0" 
        Text="(0,0)" /> 
     <TextBlock Grid.Column="1" 
        Grid.Row="0" 
        Text="(1,0)" /> 
     <TextBlock Grid.Column="0" 
        Grid.Row="1" 
        Text="(0,1)" /> 
     <TextBlock Grid.Column="1" 
        Grid.Row="1" 
        Text="(1,0)" /> 
    </Grid> 

Eso le da rejilla algo como:
alt text

También puede utilizar un rectángulo en cada celda de la cuadrícula para obtener diferentes efectos Aquí, el relleno es transparente y el accidente cerebrovascular es azul:

<Grid HorizontalAlignment="Stretch" 
     VerticalAlignment="Stretch" 
     Margin="5"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 

    <Grid.RowDefinitions> 
     <RowDefinition Height="*" /> 
     <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 

    <Rectangle Grid.Column="0" 
       Grid.Row="0" 
       Stroke="Blue" 
       Fill="Transparent" /> 
    <TextBlock Grid.Column="0" 
       Grid.Row="0" 
       Text="(0,0)" /> 
    <Rectangle Grid.Column="1" 
       Grid.Row="0" 
       Stroke="Blue" 
       Fill="Transparent" /> 
    <TextBlock Grid.Column="1" 
       Grid.Row="0" 
       Text="(1,0)" /> 
    <Rectangle Grid.Column="0" 
       Grid.Row="1" 
       Stroke="Blue" 
       Fill="Transparent" /> 
    <TextBlock Grid.Column="0" 
       Grid.Row="1" 
       Text="(0,1)" /> 
    <Rectangle Grid.Column="1" 
       Grid.Row="1" 
       Stroke="Blue" 
       Fill="Transparent" /> 
    <TextBlock Grid.Column="1" 
       Grid.Row="1" 
       Text="(1,0)" /> 
</Grid> 

que produce esto:
alt text

lo prefiere, puede llenar el rectángulos y no darles un accidente cerebrovascular:

<Grid HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch" 
      Margin="5"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*" /> 
      <ColumnDefinition Width="*" /> 
     </Grid.ColumnDefinitions> 

     <Grid.RowDefinitions> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="*" /> 
     </Grid.RowDefinitions> 

     <Rectangle Grid.Column="0" 
        Grid.Row="0" 
        Fill="LightBlue" /> 
     <TextBlock Grid.Column="0" 
        Grid.Row="0" 
        Text="(0,0)" /> 
     <Rectangle Grid.Column="1" 
        Grid.Row="0" 
        Fill="LightYellow" /> 
     <TextBlock Grid.Column="1" 
        Grid.Row="0" 
        Text="(1,0)" /> 
     <Rectangle Grid.Column="0" 
        Grid.Row="1" 
        Fill="LightYellow" /> 
     <TextBlock Grid.Column="0" 
        Grid.Row="1" 
        Text="(0,1)" /> 
     <Rectangle Grid.Column="1" 
        Grid.Row="1" 
        Fill="LightBlue" /> 
     <TextBlock Grid.Column="1" 
        Grid.Row="1" 
        Text="(1,0)" /> 
    </Grid> 

Eso puede, por ejemplo, dar un patrón de tablero de ajedrez:
alt text

Esto no es de ninguna manera una respuesta integral, probablemente puedas llenar un libro. Simplemente tenía la intención de mostrar que hay muchas maneras de hacer lo que está pidiendo, y que hay algunas soluciones bastante rápidas y fáciles, si eso es todo lo que necesita.

+1

Entonces, ¿cómo se obtiene una cuadrícula de un píxel de ancho? –

+0

Pero eso hará que los bordes interiores tengan el ancho doble –

+6

@WonkotheSane: Eso no funcionará. 'StrokeThickness' es un simple' doble'. Para lograr algo similar, utilice un 'Border' en lugar de un' Rectangle': ' ' –