我有一个Silverlight DataGrid,它使用样式突出显示所选行,并在左侧放置一个蓝色矩形。这样可以正常工作,除了顶部的列标题行与主体中的单元格不完全对齐。它们偏离蓝色矩形的宽度。
如何将列标题行缩进一组像素以说明蓝色矩形?我的猜测是,这涉及在第一个标题单元格中放置一个透明矩形,但我是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}" />