代码之家 › 专栏 › 技术社区 › Mladen Mihajlovic

设置WPF布局网格背景的样式(每个单元格、行、列)

controltemplates styles grid xaml wpf

Mladen Mihajlovic · 技术社区 · 15 年前

我想知道是否有任何方法来设置WPF布局网格的单元格、行和列的样式。我一直在试图找到任何信息,我发现的少数提到没有那么多的信息。

我想设计网格的样式,使其看起来像链接屏幕截图中的网格。

如果实际控件不支持它,我可以以某种方式继承它并执行它吗?我对水渍险很陌生,所以任何帮助都会非常感谢。

还有一件事,我知道我可以为网格中的每一个控件设置样式,但这似乎太过分了。我想有一个网格来实现它自己。

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

5 回复 | 直到 10 年前

Fatih Ayyildiz 10 年前

下面是一个快速的(非常粗略的示例),您可以随意获取您想要的格式(如果您认真对待WPF,您会发现Blend有助于使您的布局看起来更好):

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

Vegar 15 年前

@丹建议释放WPF,我现在正在读。就在今天早上,我遇到一个关于你问题的部分。

第6章,第161页:

常见问题解答:如何像对待HTML表格中的单元格那样为网格单元格提供背景色、填充和边框?

没有给网格单元提供这样的属性的内在机制,但是由于多个元素可以出现在任何网格单元中,所以您可以非常容易地模拟它们。为了给一个单元格一种背景色,您可以简单地用适当的填充来绘制一个矩形,这个矩形在默认情况下会延伸到填充单元格。要给出单元格填充,可以使用自动调整大小并在适当的子元素上设置边距。对于边框,您可以再次使用一个矩形,但使用适当颜色的显式笔画,或者只使用边框元素。

只需确保在任何其他子项之前将这些矩形或边框添加到网格中(或使用zindex-attached属性显式标记它们),以便它们的z顺序将它们置于主要内容之后。

顺便说一句,WPF释放了岩石。它写得很好,而且全彩色的印刷使它更容易阅读。

Drew Noakes 15 年前

WPF Grid 没有可见的单元格。把它们看作是不可见的网格线,可以让子元素与之对齐。

因此,要设置网格单元格的样式,必须设置网格内对齐的项的样式。

想到 网格 就像一个Winforms一样 DataGrid . 我猜它最接近的winforms等价物是 TableLayout 控制。

查看一些第三方网格控件。我在测试版使用了devexpress,发现它非常简单。

Dan 15 年前

我建议你用边框来做造型。

通过为每一行和每一列创建边框,并相应地设置行范围和列范围,可以很容易地重新创建该布局。

您将有5个与colspan 2的边框,这些边框将照顾到每行的渐变背景以及每行顶部和底部的边框。然后,您将有两个带有行扫描5的边框,这些边框将处理列边框。假设您正在覆盖边界以形成您所追求的视觉网格效果。

对于页眉和外部边框,只需根据需要用边框和样式包装整个网格。

我建议您将样式存储为资源,以便将所有样式信息保存在一个位置。

注意学习样式是如何工作的,因为它非常强大,但是有一个学习曲线,因为它与CSS的工作方式非常不同。我建议你阅读 WPF Unleashed 如果可以的话。

greenoldman 14 年前

我在寻找为数据报单元格设置边距(或填充)的方法时发现了这篇文章。我的问题是通过示例XAML代码(接近尾端)解决的——相当简单。

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