DataGrid Seperations between Column and Rows

29 בJanuary 2015

אין תגובות

,The best practices

.Basically this is job for a Xaml Designers. But you can do so by your own simply

Both of my suggestion are based on missing property of WPF itself, something like

..HorizontalSeperationRatio and VerticalSeperationRatio

.So we will be must add it by our self , using some nice trick

Like everything else DataGrid has templates, to be specific DataGris is built from Columns, Rows, Cells. But only Cells and Rows provide Templates, what left us with templating for Rows and

.Cells

.Inside every Template usually has the Core, and that probably some kind of ContentPresnter

.What we need is to surround it with proper border either vertical or horizontal

Guess what, it appears that Border Control which usually used to be a border contained a

.BorderThikness property which is work like binding with 1/2/4 parameters for initialize it

So borderThickness of 0,2,0,0 will give us an upper border , and borderThickness of 2,0,0,0 give

..us an left border etc

.What is left to use that way

:So using next style

<Style TargetType="{x:Type DataGridRow}" x:Key="sepertionRow2">

       <Setter Property="Background" Value="LightYellow" />

       <Setter Property="Template">

           <Setter.Value>


               <ControlTemplate TargetType="{x:Type DataGridRow}">

                   <Grid>

                       <SelectiveScrollingGrid>

                           <SelectiveScrollingGrid.ColumnDefinitions>

                               <ColumnDefinition Width="Auto"/>

                               <ColumnDefinition Width="*"/>

                           </SelectiveScrollingGrid.ColumnDefinitions>

                           <SelectiveScrollingGrid.RowDefinitions>

                               <RowDefinition Height="*"/>

                               <RowDefinition Height="Auto"/>

                           </SelectiveScrollingGrid.RowDefinitions>

                           <Border Grid.Column="1" BorderThickness="0" x:Name="DataGridCellsPresenterBorder" Background="White">

                               <DataGridCellsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"  Margin="0,0" FontFamily="Arial" FontSize="16"/>

                           </Border>

                           <DataGridRowHeader Grid.RowSpan="2" SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" />

                       </SelectiveScrollingGrid>

                       <Border Background="Transparent" BorderThickness="0,0,0,2" BorderBrush="#D4D7D8" x:Name="SPRT_Border" SnapsToDevicePixels="True" Height="Auto"  Margin="0" CornerRadius="0" Visibility="Collapsed"/>


                       <VisualStateManager.VisualStateGroups>

                           <VisualStateGroup x:Name="CommonStates">

                               <VisualState x:Name="Normal" />

                               <VisualState x:Name="Normal_AlternatingRow">

                                   <Storyboard Duration="0:0:0">

                                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SPRT_Border" Storyboard.TargetProperty="(UIElement.Visibility)">

                                           <DiscreteObjectKeyFrame KeyTime="0:0:0">

                                               <DiscreteObjectKeyFrame.Value>

                                                   <Visibility>Visible</Visibility>

                                               </DiscreteObjectKeyFrame.Value>

                                           </DiscreteObjectKeyFrame>

                                       </ObjectAnimationUsingKeyFrames>

                                   </Storyboard>

                               </VisualState>

                           </VisualStateGroup>

                       </VisualStateManager.VisualStateGroups>

                   </Grid>

               </ControlTemplate>

           </Setter.Value>

       </Setter>

   </Style>


Will generate row separate lines between rows binds to AlternationCount property of the

.DataGrid. The solution here is by using VisualState manager connected to the alternationCount

?And what about Vertical Separate lines

Well ,dataGrid column style is actually a results of many cells stands together, so add our idea

:inside cell templates in selected column will brig us to results like this

<DataGrid.Columns>

                    <DataGridTextColumn Header="Avg"

                        Binding="{Binding Name,   StringFormat='{}{0:0}'}"

                                Width="65" MaxWidth="100"/>


                    <DataGridTextColumn Header="Rounded"

                        Binding="{Binding Rounded,   StringFormat='{}{0}'}"

                                MinWidth="75" MaxWidth="120"/>


                    <DataGridTextColumn Header="Val"

                        Binding="{Binding Value,  StringFormat='{}{0:0}'}"

                                 MinWidth="77"    MaxWidth="100" CellStyle="{StaticResource  SeperationCell}"/>



                    <DataGridTextColumn Header="Rounded"

                        Binding="{Binding Rounded,   StringFormat='{}{0}'}"

                                MinWidth="75" MaxWidth="120"/>



                </DataGrid.Columns>

:We can see that third column declare on its special style like this

<Style x:Key="SeperationCell"  TargetType="{x:Type DataGridCell}">

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="{x:Type DataGridCell}" >

                <Grid >

                    <Border Margin="0,0,2,0" x:Name="bd" BorderThickness="2" VerticalAlignment="Stretch" BorderBrush="Green" SnapsToDevicePixels="True" >

                        <ContentPresenter Margin="5,0"  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" TextBlock.Foreground="#ff444444" TextBlock.FontSize="13" TextOptions.TextFormattingMode="Ideal" VerticalAlignment="Center" HorizontalAlignment="Center">

                            <ContentPresenter.Effect>

                                <DropShadowEffect Color="White" Direction="301" BlurRadius="1" ShadowDepth="1" Opacity="0.9"/>

                            </ContentPresenter.Effect>

                        </ContentPresenter>

                    </Border>

                    <Border BorderThickness="0,0,2,0"  VerticalAlignment="Stretch" BorderBrush="#D4D7D8" SnapsToDevicePixels="True" Visibility="Visible"/>

                </Grid>

                <ControlTemplate.Triggers>

                    <Trigger Property="IsSelected" Value="True">

                        <Setter Property="Background" TargetName="bd"  Value="#ffffba00"/>

                        <Setter Property="Foreground" Value="#ff444444"/>

                    </Trigger>


                </ControlTemplate.Triggers>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

    <Style.Triggers>

        <DataTrigger Value="true" Binding="{Binding RelativeSource={RelativeSource Self}, Path=Tag.IsBold}">

            <Setter Property="FontWeight" Value="Bold"/>

        </DataTrigger>


        <DataTrigger Value="true" Binding="{Binding RelativeSource={RelativeSource Self}, Path=Tag.IsItalic}">

            <Setter Property="FontStyle" Value="Italic"/>

        </DataTrigger>

    </Style.Triggers>

</Style>

:This combination gave us this results

image

This is a starter, you can improve that demo to much more custom style

הוסף תגובה
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *