Стилизация фона сетки макета WPF (каждой ячейки, строки, столбца) - PullRequest
Новая
       20

Стилизация фона сетки макета WPF (каждой ячейки, строки, столбца)

26 голосов
/ 19 февраля 2009

Хотелось бы узнать, есть ли способ стилизовать ячейки, строки и столбцы сетки макета WPF. Я пытался найти какую-либо информацию, и несколько упоминаний, которые я нашел, не были настолько информативными.

Я бы хотел, чтобы сетка выглядела так же, как на скриншоте.

Если фактический элемент управления не поддерживает его, могу ли я как-то его унаследовать и сделать это тогда? Я новичок в WPF, поэтому любая помощь будет очень признательна.

Еще одна вещь, я знаю, что могу стилизовать каждый элемент управления в сетке, но это кажется излишним. Я хотел бы иметь сетку, которая делает это сама.

снимок экрана http://img21.imageshack.us/img21/2842/capturehz8.png

Ответы [ 5 ]

25 голосов
/ 19 февраля 2009

@ Дэн рекомендует WPF Unleashed, который я сейчас читаю. Только сегодня утром я натолкнулся на раздел, посвященный вашему вопросу.

Глава 6, стр. 161:

Часто задаваемые вопросы: Как я могу задать цвета фона ячеек сетки, отступы и границы, как я могу с ячейками таблицы HTML?

Не существует встроенного механизма для придания ячейкам Grid таких свойств, но вы можете довольно легко смоделировать их благодаря тому, что в любой ячейке Grid может появиться несколько элементов. Чтобы придать ячейке цвет фона, вы можете просто добавить прямоугольник с соответствующей заливкой, которая по умолчанию растягивается, чтобы заполнить ячейку. Чтобы задать заполнение ячеек, вы можете использовать авторазмер и установить поле для соответствующего дочернего элемента. Для границ вы можете снова использовать Rectangle, но дать ему явный Stroke соответствующего цвета, или вместо этого вы можете просто использовать элемент Border.

Обязательно добавьте такие прямоугольники или границы в сетку перед любым другим дочерним элементом (или явно пометьте их присоединенным свойством ZIndex), чтобы их Z-порядок поместил их позади основного содержимого.

Кстати, WPF высвободил камни. Он очень хорошо написан, а цветная печать делает его еще проще для чтения.

19 голосов
/ 19 февраля 2009

Вот быстрый (очень грубый пример), который вы можете взломать, чтобы получить нужный формат (если вы серьезно относитесь к работе с 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>
5 голосов
/ 19 февраля 2009

WPF Grid не имеет видимых ячеек как таковых. Думайте о них как о невидимых линиях сетки, по которым вы можете выровнять дочерние элементы.

Итак, чтобы стилизовать ячейки сетки, вы должны стилизовать элементы, которые выровнены внутри сетки.

Смущает мысль о Grid как о чем-то похожем на WinForms DataGrid. Я предполагаю, что его ближайший эквивалент WinForms - элемент управления TableLayout.

Проверьте некоторые сторонние элементы управления сеткой. Я использовал DevExpress, пока он был в бета-версии, и нашел его довольно простым.

3 голосов
/ 19 февраля 2009

Я бы порекомендовал использовать границы для вашего стиля.

Вы можете легко воссоздать этот макет, создав границы для каждой строки и каждого столбца и соответственно установив интервалы между строками и кольцами.

У вас будет 5 границ с colspan 2, эти границы будут заботиться о ваших градиентных фонах для каждого ряда и о границах вдоль верхней и нижней частей каждого ряда. Тогда у вас будет 2 границы со строкой 5, они будут обрабатывать границы столбцов. Представьте, что вы накладываете границы, чтобы сформировать эффект визуальной сетки, к которому вы стремитесь.

Для заголовка и внешней границы, просто оберните всю сетку с границей и стилем по мере необходимости.

Я бы порекомендовал хранить ваши стили в качестве ресурсов, чтобы вы могли хранить всю информацию о ваших стилях в одном месте.

Позаботьтесь о том, чтобы узнать, как работает стиль, потому что он довольно мощный, но есть кривая обучения, так как он совершенно отличается от того, как работает CSS. Я бы порекомендовал прочитать WPF Unleashed , если можете.

1 голос
/ 07 августа 2010

Я нашел этот пост, когда искал способ установки полей (или отступов) для ячеек DataGrid. Моя проблема была решена благодаря примеру кода xaml, размещенного в (ближе к концу) - довольно минималистично.

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

...