Anreden eines WPF-Layout-Raster-Hintergrunds (jeder Zelle, Zeile, Spalte)

Question

Ich würde gerne wissen, ob es eine Möglichkeit gibt, die Zellen, Zeilen und Spalten eines WPF-Layout-Rasters zu formatieren. Ich habe versucht, Informationen zu finden, und die wenigen Erwähnungen, die ich gefunden habe, waren nicht so informativ.

Ich möchte das Raster so gestalten, dass es wie das im verknüpften Screenshot aussieht.

Wenn das eigentliche Steuerelement es nicht unterstützt, kann ich es irgendwie erben und mache es dann? Ich bin ziemlich neu bei WPF, daher würde jede Hilfe sehr geschätzt werden.

Eine andere Sache, ich weiß, dass ich jede Kontrolle innerhalb des Rasters stylen kann, aber es scheint wie Overkill. Ich hätte gerne ein Raster, das es selbst macht.

screenshot http://img21.imageshack.us/img21/2842/capturehz8.png

Answer 1

Hier ist ein kurzes (sehr grobes Beispiel), das Sie hacken können, um das gewünschte Format zu erhalten (wenn Sie ernsthaft mit WPF arbeiten, finden Sie Blend eine enorme Hilfe, um Ihre Layouts gut aussehen zu lassen):

<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 2

Die WPF Grid hat keine sichtbaren Zellen als solche. Stellen Sie sich diese als unsichtbare Gitterlinien vor, an denen Sie Kindelemente ausrichten können.

Um also die Zellen des Rasters zu formatieren, müssen Sie die Elemente ausrichten, die innerhalb des Rasters ausgerichtet sind.

Es ist verwirrend, an die Grid als etwas wie ein WinForms DataGrid zu denken. Ich denke, das nächste WinForms-Äquivalent ist das TableLayout Steuerelement.

Überprüfen Sie einige Drittanbieter-Grid-Kontrollen. Ich habe DevExpress während der Beta-Phase benutzt und fand es ziemlich einfach.

Answer 3

Ich würde empfehlen, Grenzen für Ihr Styling zu verwenden.

Sie könnten dieses Layout ziemlich einfach neu erstellen, indem Sie für jede Zeile und jede Spalte Rahmen erstellen und die Zeilenspalten und Spalten entsprechend einstellen.

Sie werden 5 Grenzen mit Colspan 2 haben, diese Ränder werden sich um Ihre Farbverlaufshintergründe für jede Zeile kümmern und die Ränder entlang der Ober- und Unterseite jeder Zeile. Dann haben Sie 2 Grenzen mit der Zeilenspanne 5, die die Spaltengrenzen behandeln. Stellen Sie sich vor, Sie überlagern die Grenzen, um den gewünschten visuellen Gittereffekt zu erzeugen.

Für die Kopfzeile und den äußeren Rahmen, wickeln Sie einfach das gesamte Raster mit einem Rahmen und stylen Sie wie erforderlich.

Ich würde empfehlen, Ihre Stile als Ressourcen zu speichern, so dass Sie alle Ihre Styling-Informationen an einem Ort behalten können.

Achten Sie darauf, wie das Styling funktioniert, weil es ziemlich mächtig ist, aber es gibt eine Lernkurve, da es ziemlich anders ist als CSS. Ich würde empfehlen, WPF Unleashed zu lesen, wenn Sie können.

Answer 4

@Dan empfiehlt WPF Unleashed, die ich gerade lese. Gerade heute Morgen stoße ich auf einen Abschnitt, der auf Ihre Frage eingeht.

Kapitel 6, Seite 161:

FAQ: Wie kann ich Grid-Zellen Hintergrundfarben geben, Polsterung und Rahmen, wie ich mit Zellen einer HTML-Tabelle kann?

Es gibt keinen intrinsischen Mechanismus, der Grid-Zellen solche Eigenschaften verleiht, aber Sie können sie ziemlich einfach simulieren, da mehrere Elemente in jeder Grid-Zelle vorkommen können. Um einer Zelle eine Hintergrundfarbe zu geben, können Sie einfach ein Rechteck mit der entsprechenden Füllung plumpsen, die die Zelle standardmäßig ausfüllt. Um einen Zellenabstand zu erhalten, können Sie die automatische Größenanpassung verwenden und den Rand auf das entsprechende untergeordnete Element setzen. Bei Rahmen können Sie wieder ein Rechteck verwenden, aber einen expliziten Strich mit der entsprechenden Farbe angeben, oder Sie können stattdessen einfach ein Rahmenelement verwenden. Stellen Sie sicher, dass Sie solche Rechtecke oder Rahmen vor allen anderen untergeordneten Elementen hinzufügen (oder explizit mit der angehängten ZIndex-Eigenschaft markieren), damit ihre Z-Reihenfolge sie hinter den Hauptinhalt stellt.

BTW, WPF entfesselte Felsen. Es ist sehr gut geschrieben, und der Druck in voller Farbe macht es noch einfacher zu lesen.

Answer 5

fand ich diesen Beitrag, wenn für Verfahren zur Einstellung Marge (oder Polsterung) für Datagrid-Zellen suchen. Mein Problem wurde dank Beispiel Xaml Code (fast am Ende) veröffentlicht - ziemlich minimalistisch.

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