none
Need Help In Grid Styling

    Question

  • Hi

    I have created a style for grid and its column header. But now i am facing one issue with it that i am seeing some white spaces(marked with red) which doesnt go with my background. Please help me to remove it

    Thursday, July 04, 2013 5:42 AM

Answers

All replies

  • Hello,

    Could you help to share your Grid layout and styles it applied for us to test?

    Thanks.


    Yanping Wang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Friday, July 05, 2013 1:51 AM
    Moderator
  • Its just a plane grid and my grid Style is:

    <Style x:Key="DataGridCustomStyle" TargetType="data:DataGrid">
                <Setter Property="RowBackground" Value="White"/>
                <Setter Property="AlternatingRowBackground" Value="#CEEAFF"/>
                <Setter Property="HeadersVisibility" Value="Column"/>
                <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
                <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
                <Setter Property="SelectionMode" Value="Extended"/>
                <Setter Property="CanUserReorderColumns" Value="False"/>
                <Setter Property="CanUserResizeColumns" Value="True"/>
                <Setter Property="CanUserSortColumns" Value="True"/>
                <Setter Property="AutoGenerateColumns" Value="True"/>
                <Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected"/>
                <Setter Property="RowHeight" Value="25"/>
                
                <Setter Property="DragIndicatorStyle">
                    <Setter.Value>
                        <Style TargetType="ContentControl">
                            <Setter Property="Foreground" Value="#7FFFFFFF"/>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="ContentControl">
                                        <Grid>
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="SortStates">
                                                    <VisualState x:Name="Unsorted"/>
                                                    <VisualState x:Name="SortAscending">
                                                        <Storyboard>
                                                            <DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SortIcon"/>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="SortDescending">
                                                        <Storyboard>
                                                            <DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SortIcon"/>
                                                            <DoubleAnimation Duration="0" To="-.9" Storyboard.TargetProperty="(RenderTransform).ScaleY" Storyboard.TargetName="SortIcon"/>
                                                        </Storyboard>
                                                    </VisualState>
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                            <Rectangle x:Name="BackgroundRectangle" Grid.ColumnSpan="2" Fill="#66808080" Stretch="Fill"/>
                                            <Rectangle x:Name="BackgroundGradient" Grid.ColumnSpan="2" Opacity="0" Stretch="Fill">
                                                <Rectangle.Fill>
                                                    <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                                        <GradientStop Color="#FFFFFFFF" Offset="0.015"/>
                                                        <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                                                        <GradientStop Color="#E5FFFFFF" Offset="0.6"/>
                                                        <GradientStop Color="#C6FFFFFF" Offset="1"/>
                                                    </LinearGradientBrush>
                                                </Rectangle.Fill>
                                            </Rectangle>
                                            <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition/>
                                                    <ColumnDefinition Width="Auto"/>
                                                </Grid.ColumnDefinitions>
                                                <ContentPresenter Content="{TemplateBinding Content}"/>
                                                <Path x:Name="SortIcon" Grid.Column="1" Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z " Fill="#7FFFFFFF" HorizontalAlignment="Left" Margin="4,0,0,0" Opacity="0" RenderTransformOrigin=".5,.5" Stretch="Uniform" VerticalAlignment="Center" Width="8">
                                                    <Path.RenderTransform>
                                                        <ScaleTransform ScaleY=".9" ScaleX=".9"/>
                                                    </Path.RenderTransform>
                                                </Path>
                                            </Grid>
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Setter.Value>
                </Setter>
                <Setter Property="DropLocationIndicatorStyle">
                    <Setter.Value>
                        <Style TargetType="ContentControl">
                            <Setter Property="Background" Value="#FF3F4346"/>
                            <Setter Property="Width" Value="2"/>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="ContentControl">
                                        <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Setter.Value>
                </Setter>
                <Setter Property="GridLinesVisibility" Value="Vertical"/>
                <Setter Property="HorizontalGridLinesBrush" Value="#FFC9CACA"/>
                <Setter Property="IsTabStop" Value="True"/>
                <Setter Property="VerticalGridLinesBrush" Value="#FFC9CACA"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="data:DataGrid">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
                                    <Grid x:Name="Root" Background="{TemplateBinding Background}">
                                        <Grid.Resources>
                                            <ControlTemplate x:Key="TopLeftHeaderTemplate" TargetType="dataprimitives:DataGridColumnHeader">
                                                <Grid x:Name="Root">
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition/>
                                                        <RowDefinition/>
                                                        <RowDefinition Height="Auto"/>
                                                    </Grid.RowDefinitions>
                                                    <Border BorderBrush="White" BorderThickness="0,0,1,0" Background="White" Grid.RowSpan="2">
                                                        <Rectangle Stretch="Fill" StrokeThickness="1">
                                                            <Rectangle.Fill>
                                                                <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                                                    <GradientStop Color="Transparent" Offset="0.015"/>
                                                                    <GradientStop Color="Transparent" Offset="0.375"/>
                                                                    <GradientStop Color="Transparent" Offset="0.6"/>
                                                                    <GradientStop Color="Transparent" Offset="1"/>
                                                                </LinearGradientBrush>
                                                            </Rectangle.Fill>
                                                        </Rectangle>
                                                    </Border>
                                                    <Rectangle Fill="Transparent" Height="1" Grid.RowSpan="2" StrokeThickness="1" VerticalAlignment="Bottom" Width="Auto"/>
                                                </Grid>
                                            </ControlTemplate>
                                            <ControlTemplate x:Key="TopRightHeaderTemplate" TargetType="dataprimitives:DataGridColumnHeader">
                                                <Grid x:Name="RootElement">
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition/>
                                                        <RowDefinition/>
                                                        <RowDefinition Height="Auto"/>
                                                    </Grid.RowDefinitions>
                                                    <Border BorderBrush="transparent" BorderThickness="1,0,0,0" Background="transpatent" Grid.RowSpan="2">
                                                        <Rectangle Stretch="Fill">
                                                            <Rectangle.Fill>
                                                                <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                                                    <GradientStop Color="Transparent" Offset="0.015"/>
                                                                    <GradientStop Color="Transparent" Offset="0.375"/>
                                                                    <GradientStop Color="Transparent" Offset="0.6"/>
                                                                    <GradientStop Color="Transparent" Offset="1"/>
                                                                </LinearGradientBrush>
                                                            </Rectangle.Fill>
                                                        </Rectangle>
                                                    </Border>
                                                </Grid>
                                            </ControlTemplate>
                                        </Grid.Resources>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition/>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>
                                        <dataprimitives:DataGridColumnHeader x:Name="TopLeftCornerHeader" Template="{StaticResource TopLeftHeaderTemplate}" Width="22" />
                                        <dataprimitives:DataGridColumnHeadersPresenter x:Name="ColumnHeadersPresenter" Grid.Column="1"/>
                                        <dataprimitives:DataGridColumnHeader x:Name="TopRightCornerHeader" Grid.Column="2" Template="{StaticResource TopRightHeaderTemplate}"/>
                                        <Rectangle x:Name="ColumnHeadersAndRowsSeparator" Grid.ColumnSpan="3" Fill="Transparent" Height="1" StrokeThickness="1" VerticalAlignment="Bottom" Width="Auto"/>
                                        <dataprimitives:DataGridRowsPresenter x:Name="RowsPresenter" Grid.ColumnSpan="2" Grid.Row="1"/>
                                        <Rectangle x:Name="BottomRightCorner" Grid.Column="2" Fill="white" Grid.Row="2"/>
                                        <Rectangle x:Name="BottomLeftCorner" Grid.ColumnSpan="2" Fill="white" Grid.Row="2"/>
                                        <ScrollBar x:Name="VerticalScrollbar" Grid.Column="2" Margin="0,-1,-1,-1" Orientation="Vertical" Grid.Row="1" Width="18" Style="{StaticResource ScrollBarStyle_UserInputPages}"/>
                                        <Grid Grid.Column="1" Grid.Row="2">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto"/>
                                                <ColumnDefinition/>
                                            </Grid.ColumnDefinitions>
                                            <Rectangle x:Name="FrozenColumnScrollBarSpacer"/>
                                            <ScrollBar x:Name="HorizontalScrollbar" Grid.Column="1" Height="18" Margin="-1,0,-1,-1" Orientation="Horizontal" Style="{StaticResource ScrollBarStyle_UserInputPagesHorizontal}"/>
                                        </Grid>
                                    </Grid>
                                </Border>
                                <Border x:Name="DisabledVisualElement" Background="#8CFFFFFF" CornerRadius="2" HorizontalAlignment="Stretch" Height="Auto" IsHitTestVisible="False" Opacity="0" VerticalAlignment="Stretch" Width="Auto"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>


    Do not Forget to Vote as Answer/Helpful, please. It encourages us to help you.

    Friday, July 05, 2013 3:25 AM
  • Hello,

    I found the following snippet in your markup

      <Rectangle x:Name="BottomRightCorner" Grid.Column="2" Fill="white" Grid.Row="2"/>

    You fill the right corner with white color, please try to change it the same with your expexted background color.

    Thanks.


    Yanping Wang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Friday, July 05, 2013 6:32 AM
    Moderator