如何在Silverlight DataGrid中缩进列标题行?

时间:2012-01-20 19:53:57

标签: silverlight datagrid header

我有一个Silverlight DataGrid,它使用样式突出显示所选行,并在左侧放置一个蓝色矩形。这样可以正常工作,除了顶部的列标题行与主体中的单元格不完全对齐。它们偏离蓝色矩形的宽度。

enter image description here

如何将列标题行缩进一组像素以说明蓝色矩形?我的猜测是,这涉及在第一个标题单元格中放置一个透明矩形,但我是Silverlight的新手,无法弄清楚语法。

编辑:每个请求,下面是XAML。

谢谢, 罗杰

<UserControl x:Class="DemandManagerControls.DemandItemsDataGrid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

    <UserControl.Resources>

        <Style x:Key="MainDataGridRowStyle" TargetType="sdk:DataGridRow">
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="sdk:DataGridRow">
                        <sdk:DataGridFrozenGrid x:Name="Root">
                            <sdk:DataGridFrozenGrid.Resources>
                                <Storyboard x:Key="DetailsVisibleTransition">
                                    <DoubleAnimation Duration="00:00:0.1" Storyboard.TargetProperty="ContentHeight" Storyboard.TargetName="DetailsPresenter"/>
                                </Storyboard>
                            </sdk:DataGridFrozenGrid.Resources>
                            <sdk:DataGridFrozenGrid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition/>
                            </sdk:DataGridFrozenGrid.ColumnDefinitions>
                            <sdk:DataGridFrozenGrid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </sdk:DataGridFrozenGrid.RowDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="NormalAlternatingRow">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundRectangle"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <!--<DoubleAnimation Duration="0" To=".1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundRectangle"/>-->
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="NormalSelected">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To=".1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundRectangle"/>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="RowSelected" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOverSelected">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To=".1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundRectangle"/>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="RowSelected" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="UnfocusedSelected">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To=".1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundRectangle"/>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="RowSelected" d:IsOptimized="True"/>
                                            <!--<ColorAnimation Duration="0" To="#FFE1E7EC" Storyboard.TargetProperty="(Fill).Color" Storyboard.TargetName="BackgroundRectangle"/>-->
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="UnfocusedEditing"/>
                                    <VisualState x:Name="NormalEditing"/>
                                    <VisualState x:Name="MouseOverUnfocusedEditing"/>
                                    <VisualState x:Name="MouseOverEditing"/>
                                    <VisualState x:Name="MouseOverUnfocusedSelected"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ValidationStates">
                                    <VisualState x:Name="Valid"/>
                                    <VisualState x:Name="Invalid">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="BackgroundRectangle">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="InvalidVisualElement"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle x:Name="BackgroundRectangle" Grid.ColumnSpan="2" Fill="#FF000000" Opacity="0" Grid.RowSpan="2"/>
                            <Rectangle x:Name="InvalidVisualElement" Grid.ColumnSpan="2" Fill="#FFF7D8DB" Opacity="0" Grid.RowSpan="2"/>
                            <sdk:DataGridRowHeader x:Name="RowHeader" sdk:DataGridFrozenGrid.IsFrozen="True" Grid.RowSpan="3"/>
                            <sdk:DataGridCellsPresenter x:Name="CellsPresenter" Grid.Column="1" sdk:DataGridFrozenGrid.IsFrozen="True"/>
                            <sdk:DataGridDetailsPresenter x:Name="DetailsPresenter" Grid.Column="1" Grid.Row="1"/>
                            <Rectangle x:Name="BottomGridLine" Grid.Column="1" HorizontalAlignment="Stretch" Height="1" Grid.Row="2"/>
                            <Grid x:Name="RowSelected" Grid.RowSpan="3" HorizontalAlignment="Left" Width="6" Opacity="0">
                                <Grid.Background>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FF046ED8" Offset="0"/>
                                        <GradientStop Color="#FF2B92F9" Offset="1"/>
                                    </LinearGradientBrush>
                                </Grid.Background>
                                <!--<Rectangle Fill="#FFFF0000" VerticalAlignment="Top" Height="1"/>
                            <Rectangle Fill="#FFFF0000" VerticalAlignment="Bottom" Height="1"/>-->
                            </Grid>
                        </sdk:DataGridFrozenGrid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="HeaderStyleCenter" TargetType="sdk:DataGridColumnHeader">
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
        </Style>

        <Style x:Key="CellStyleCenter" TargetType="sdk:DataGridCell">
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
        </Style>

        <Style x:Key="OrderNumberCellStyle" TargetType="sdk:DataGridCell">
            <Setter Property="HorizontalContentAlignment" Value="Right"/>
        </Style>

        <!-- The following is the style for the Silverlight DataGrid that is used within the LightSwitch DataGrid.-->
        <Style x:Key="DemandItemsDataGridStyle" TargetType="sdk:DataGrid">
            <Setter Property="RowBackground" Value="Transparent"/>
            <Setter Property="AlternatingRowBackground" Value="Transparent"/>
            <Setter Property="Background" Value="#FFFFFFFF"/>
            <Setter Property="HeadersVisibility" Value="Column"/>
            <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
            <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="SelectionMode" Value="Extended"/>
            <Setter Property="CanUserReorderColumns" Value="True"/>
            <Setter Property="CanUserResizeColumns" Value="True"/>
            <Setter Property="CanUserSortColumns" Value="True"/>
            <Setter Property="AutoGenerateColumns" Value="False"/>
            <Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected"/>
            <!--<Setter Property="RowHeaderStyle" Value="{StaticResource DataGridRowHeaderStyle1}"/>-->
            <Setter Property="RowStyle" Value="{StaticResource MainDataGridRowStyle}"/>
            <!--<Setter Property="ColumnHeaderStyle" Value="{StaticResource DataGridHeaderStyle}"/>-->
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFA3AEB9" Offset="0"/>
                        <GradientStop Color="#FF8399A9" Offset="0.375"/>
                        <GradientStop Color="#FF718597" Offset="0.375"/>
                        <GradientStop Color="#FF617584" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderThickness" Value="0"/>
            <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="None"/>
            <Setter Property="HorizontalGridLinesBrush" Value="#FFC9CACA"/>
            <Setter Property="IsTabStop" Value="True"/>
            <Setter Property="VerticalGridLinesBrush" Value="#FFC9CACA"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="sdk: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="sdk:DataGridColumnHeader">
                                        <Grid x:Name="Root">
                                            <Grid.RowDefinitions>
                                                <RowDefinition/>
                                                <RowDefinition/>
                                                <RowDefinition Height="Auto"/>
                                            </Grid.RowDefinitions>
                                            <Border BorderThickness="0,0,1,0" Grid.RowSpan="2">
                                                <Rectangle Stretch="Fill" StrokeThickness="1"/>
                                            </Border>
                                            <Rectangle Height="1" Grid.RowSpan="2" StrokeThickness="1" VerticalAlignment="Bottom" Width="Auto"/>
                                        </Grid>
                                    </ControlTemplate><!---->
                                        <!--<ControlTemplate x:Key="TopRightHeaderTemplate" TargetType="sdk:DataGridColumnHeader">
                                        <Grid x:Name="RootElement">
                                            <Grid.RowDefinitions>
                                                <RowDefinition/>
                                                <RowDefinition/>
                                                <RowDefinition Height="Auto"/>
                                            </Grid.RowDefinitions>
                                            <Border BorderThickness="1,0,0,0" Grid.RowSpan="2">
                                                <Rectangle Stretch="Fill"/>
                                            </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>
                                    <sdk:DataGridColumnHeader x:Name="TopLeftCornerHeader" Template="{StaticResource TopLeftHeaderTemplate}" Width="22"/>
                                    <sdk:DataGridColumnHeadersPresenter x:Name="ColumnHeadersPresenter" Grid.Column="1"/>
                                    <!--<sdk:DataGridColumnHeader x:Name="TopRightCornerHeader" Grid.Column="2" Template="{StaticResource TopRightHeaderTemplate}"/>-->
                                    <sdk:DataGridRowsPresenter x:Name="RowsPresenter" Grid.ColumnSpan="2" Grid.Row="1"/>
                                    <ScrollBar x:Name="VerticalScrollbar" Grid.Column="2" Margin="0,-1,-1,-1" Orientation="Vertical" Grid.Row="1" Width="18"/>
                                    <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"/>
                                    </Grid>
                                    <sdk:ValidationSummary x:Name="ValidationSummary" Grid.ColumnSpan="3" MaxHeight="90" Grid.Row="3"/>
                                </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>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="Transparent" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Orientation="Horizontal" VerticalAlignment="Top">
            <sdk:Label Name="lblStageToday" HorizontalAlignment="Center" Content="Stage Today" VerticalAlignment="Center" Height="30" Width="100" Margin="3" FontWeight="Bold" FontSize="13" />
            <sdk:Label Name="lblStageLate" HorizontalAlignment="Center" Content="Stage Late" VerticalAlignment="Center" Height="30" Width="100" Margin="3" FontWeight="Bold" FontSize="13" />
            <sdk:Label Name="lblShipLate" HorizontalAlignment="Center" Content="Ship Late" VerticalAlignment="Center" Height="30" Width="100" Margin="3" FontWeight="Bold" FontSize="13" />
            <sdk:Label Name="lblComplete" HorizontalAlignment="Center" Content="Complete" VerticalAlignment="Center" Height="30" Width="100" Margin="3" FontWeight="Bold" FontSize="13" />
        </StackPanel>
        <sdk:DataGrid Grid.Row="1" Name="dgDemandItems" ItemsSource="{Binding Path=Value, Mode=OneWay}" SelectedItem="{Binding Value.SelectedItem, Mode=TwoWay}" AutoGenerateColumns="False" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanUserSortColumns="True" IsReadOnly="True" Style="{StaticResource DemandItemsDataGridStyle}">
            <sdk:DataGrid.Columns>
                <sdk:DataGridTextColumn Header="Order #" Binding="{Binding OrderNumberAndLine}" CellStyle="{StaticResource OrderNumberCellStyle}" HeaderStyle="{StaticResource HeaderStyleCenter}" />
                <sdk:DataGridTextColumn Header="Catalog #" Binding="{Binding ItemNumber}" CellStyle="{StaticResource CellStyleCenter}" HeaderStyle="{StaticResource HeaderStyleCenter}" />
                <sdk:DataGridTextColumn Header="Item Description" Binding="{Binding ItemDescription}" Width="*" />
                <sdk:DataGridTextColumn Header="Serial Number Stage Date" Binding="{Binding SerialNumberStageDate, StringFormat='d'}" CellStyle="{StaticResource CellStyleCenter}" HeaderStyle="{StaticResource HeaderStyleCenter}" />
                <sdk:DataGridTextColumn Header="Test Stage Date" Binding="{Binding TestStageDate, StringFormat='d'}" CellStyle="{StaticResource CellStyleCenter}" HeaderStyle="{StaticResource HeaderStyleCenter}" />
                <sdk:DataGridTextColumn Header="Packout Stage Date" Binding="{Binding PackoutStageDate, StringFormat='d'}" CellStyle="{StaticResource CellStyleCenter}" HeaderStyle="{StaticResource HeaderStyleCenter}" />
                <sdk:DataGridTextColumn Header="Order Qty" Binding="{Binding OrderLineItemQuantity}" CellStyle="{StaticResource CellStyleCenter}" HeaderStyle="{StaticResource HeaderStyleCenter}" />
                <sdk:DataGridTextColumn Header="Due (SN)" Binding="{Binding SerialNumberRequiredQuantity}" CellStyle="{StaticResource CellStyleCenter}" HeaderStyle="{StaticResource HeaderStyleCenter}" />
                <sdk:DataGridTextColumn Header="Due (Test)" Binding="{Binding TestRequiredQuantity}" CellStyle="{StaticResource CellStyleCenter}" HeaderStyle="{StaticResource HeaderStyleCenter}" />
                <sdk:DataGridTextColumn Header="Due (Pack Out)" Binding="{Binding PackOutRequiredQuantity}" CellStyle="{StaticResource CellStyleCenter}" HeaderStyle="{StaticResource HeaderStyleCenter}" />
            </sdk:DataGrid.Columns>
        </sdk:DataGrid>
    </Grid>
</UserControl>

编辑:我尝试使用下面的XAML右键填充第一个标题列,但它只会使整个列更宽:

<Style x:Key="HeaderCol1Style" TargetType="sdk:DataGridColumnHeader">
 <Setter Property="ContentTemplate" >
  <Setter.Value>
   <DataTemplate x:Name="ColHeaderTemplategrid">
    <StackPanel>
     <TextBlock Text="{Binding}" Padding="0,0,100,0" ></TextBlock>
    </StackPanel>
   </DataTemplate>
  </Setter.Value>
 </Setter>
</Style>

...

<sdk:DataGridTextColumn Header="Order #" Binding="{Binding OrderNumberAndLine}" CellStyle="{StaticResource OrderNumberCellStyle}" HeaderStyle="{StaticResource HeaderCol1Style}" />

0 个答案:

没有答案