2012-05-09 182 views
0

如何在Silverlight中删除数据网格周围的边框,当我尝试BorderThickness =“0”BorderBrush =“透明”时,它将右下角和左下角的broder网格,但不是顶部我认为多数民众赞成边界或东西,但不确定我也删除标题HeadersVisibility =“无” 将是伟大的,如果有人可以帮助。如何删除Silverlight中DataGrid的边框

Cheers

回答

1

在Silverlight 2 Beta 2中,生成的DataGrid被边框包围。不幸的是,通过简单地在DataGrid上设置一个属性无法实现删除这个边界。要删除这个,DataGrid样式或“皮肤”的定义将需要被覆盖。

每个Silverlight控件(FrameworkElement)的外观都是在ControlTemplate中定义的。使用样式,可以在您的应用程序中使用一组定制的XAML代码覆盖此模板。在Silverlight控件样式和模板文档中找到默认的XAML定义。特定于此主题,可以在DataGrid样式和模板文档中找到DataGrid的XAML定义。

在DataGrid XAML中,查找模板定义。一旦找到它,请注意DataGrid的RootElement被三个不同的Border元素包围。

这些元素可能是需要删除的项目。要开始自定义,DataGrid的样式XAML将需要作为新资源添加到我们的应用程序中。我将直接添加到我的UserControl,但它也可以添加到应用程序资源(在App.xaml中)。

要将XAML添加到UserControl,请创建一个名为UserControl.Resources的新节点,并将DataGrid XAML复制到其中(使用文档网页上方便的“复制代码”链接)。

DataGrid和资源的命名空间定义必须匹配。在复制的XAML中,名称空间是本地的:DataGrid。由Visual Studio工具生成的默认名称空间是my:DataGrid。在上面的例子中,我将所有本地引用都改为my。

下一件要注意的事项是款式必须有钥匙。这用于将Framework元素(我们的DataGrid)映射到特定的样式定义。我已经给出了在以下DataGrid定义中使用的TestGrid的关键样式。

此时,当您运行应用程序时,DataGrid应该与之前的样子完全一样(我们还没有更改任何内容)。

在我开始删除Border元素的定义之前,我想确保这些元素是罪魁祸首。要做到这一点,我要改变他们的颜色,以更明显一些。

运行应用程序,我得到了一个屏幕

放大,很明显,这些元素如何在DataGrid的显示参加。

从XAML中删除边框元素会生成所需的结果。

希望这不仅为如何从DataGrid中删除边框提供了参考,还提供了可用于自定义Silverlight控件的快速介绍。

复制了:http://devcenter.auburnrandall.com/Default.aspx?type=post&id=52

+0

我一直在寻找更早然而他不提供XAML代码和图片被打破-_- – user1047278

1

元素你看到它是一个叫ColumnHeadersAndRowsSeparatorRectangle。只要创建一个Style没有它:

<Style TargetType="sdk:DataGrid"> 
     <Setter Property="RowBackground" Value="#AAEAEFF4" /> 
     <Setter Property="AlternatingRowBackground" Value="#00FFFFFF" /> 
     <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="True" /> 
     <Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected" /> 
     <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="1" /> 
     <Setter Property="DragIndicatorStyle"> 
      <Setter.Value> 
       <!-- TODO: Change the TargetType to Control when the fix Jolt bugs 18719 is verified --> 
       <Style TargetType="ContentControl"> 
        <Setter Property="Foreground" Value="#7FFFFFFF" /> 
        <Setter Property="Template"> 
         <Setter.Value> 
          <!-- TODO: Change the TargetType to Control when the fix Jolt bugs 18719 is verified --> 
          <ControlTemplate TargetType="ContentControl"> 
           <Grid> 
            <VisualStateManager.VisualStateGroups> 
             <VisualStateGroup x:Name="SortStates"> 
              <VisualState x:Name="Unsorted" /> 
              <VisualState x:Name="SortAscending"> 
               <Storyboard> 
                <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0"/> 
               </Storyboard> 
              </VisualState> 
              <VisualState x:Name="SortDescending"> 
               <Storyboard> 
                <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0"/> 
                <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="(RenderTransform).ScaleY" Duration="0" To="-.9"/> 
               </Storyboard> 
              </VisualState> 
             </VisualStateGroup> 
            </VisualStateManager.VisualStateGroups> 

            <Rectangle x:Name="BackgroundRectangle" Stretch="Fill" Fill="#66808080" Grid.ColumnSpan="2" /> 

            <Rectangle x:Name="BackgroundGradient" Stretch="Fill" Grid.ColumnSpan="2" Opacity="0" > 
             <Rectangle.Fill> 
              <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1"> 
               <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}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}"> 
             <Grid.ColumnDefinitions> 
              <ColumnDefinition/> 
              <ColumnDefinition Width="Auto" /> 
             </Grid.ColumnDefinitions> 

             <ContentPresenter Content="{TemplateBinding Content}"/> 

             <Path Grid.Column="1" Name="SortIcon" Fill="#7FFFFFFF" RenderTransformOrigin=".5,.5" HorizontalAlignment="Left" VerticalAlignment="Center" Opacity="0" Stretch="Uniform" Width="8" Margin="4,0,0,0" Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z "> 
              <Path.RenderTransform> 
               <ScaleTransform ScaleX=".9" ScaleY=".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}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/> 
          </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="sdk:DataGrid"> 
        <Grid> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <DoubleAnimation Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="2"> 
          <Grid Name="Root" Background="{TemplateBinding Background}"> 
           <Grid.Resources> 
            <!--Start: TopLeftHeaderTemplate--> 
            <ControlTemplate x:Key="TopLeftHeaderTemplate" TargetType="localprimitives:DataGridColumnHeader"> 
             <Grid Name="Root"> 
              <Grid.RowDefinitions> 
               <RowDefinition/> 
               <RowDefinition/> 
               <RowDefinition Height="Auto" /> 
              </Grid.RowDefinitions> 
              <Border BorderThickness="0,0,1,0" BorderBrush="#FFC9CACA" Background="#FF1F3B53" Grid.RowSpan="2"> 
               <Rectangle Stretch="Fill" StrokeThickness="1"> 
                <Rectangle.Fill> 
                 <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1"> 
                  <GradientStop Color="#FCFFFFFF" Offset="0.015" /> 
                  <GradientStop Color="#F7FFFFFF" Offset="0.375" /> 
                  <GradientStop Color="#E5FFFFFF" Offset="0.6" /> 
                  <GradientStop Color="#D1FFFFFF" Offset="1" /> 
                 </LinearGradientBrush> 
                </Rectangle.Fill> 
               </Rectangle> 
              </Border> 
              <Rectangle VerticalAlignment="Bottom" Width="Auto" StrokeThickness="1" Height="1" Fill="#FFDBDCDC" Grid.RowSpan="2"/> 
             </Grid> 
            </ControlTemplate> 
            <!--End: TopLeftHeaderTemplate--> 

            <!--Start: TopRightHeaderTemplate--> 
            <ControlTemplate x:Key="TopRightHeaderTemplate" TargetType="localprimitives:DataGridColumnHeader"> 
             <Grid Name="RootElement"> 
              <Grid.RowDefinitions> 
               <RowDefinition/> 
               <RowDefinition/> 
               <RowDefinition Height="Auto" /> 
              </Grid.RowDefinitions> 
              <Border BorderThickness="1,0,0,0" BorderBrush="#FFC9CACA" Background="#FF1F3B53" Grid.RowSpan="2"> 
               <Rectangle Stretch="Fill"> 
                <Rectangle.Fill> 
                 <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1"> 
                  <GradientStop Color="#FCFFFFFF" Offset="0.015" /> 
                  <GradientStop Color="#F7FFFFFF" Offset="0.375" /> 
                  <GradientStop Color="#E5FFFFFF" Offset="0.6" /> 
                  <GradientStop Color="#D1FFFFFF" Offset="1" /> 
                 </LinearGradientBrush> 
                </Rectangle.Fill> 
               </Rectangle> 
              </Border> 
             </Grid> 
            </ControlTemplate> 
            <!--End: TopRightHeaderTemplate--> 
           </Grid.Resources> 

           <Grid.RowDefinitions> 
            <RowDefinition Height="Auto" /> 
            <RowDefinition/> 
            <RowDefinition Height="Auto" /> 
            <RowDefinition Height="Auto" /> 
           </Grid.RowDefinitions> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="Auto" /> 
            <ColumnDefinition/> 
            <ColumnDefinition Width="Auto" /> 
           </Grid.ColumnDefinitions> 

           <localprimitives:DataGridColumnHeader Name="TopLeftCornerHeader" Template="{StaticResource TopLeftHeaderTemplate}" Width="22" /> 
           <localprimitives:DataGridColumnHeadersPresenter Name="ColumnHeadersPresenter" Grid.Column="1"/> 
           <localprimitives:DataGridColumnHeader Name="TopRightCornerHeader" Grid.Column="2" Template="{StaticResource TopRightHeaderTemplate}" /> 
           <!-- HERE IT IS THAT LINE YOU SEE -->                  
           <!--<Rectangle Name="ColumnHeadersAndRowsSeparator" Grid.ColumnSpan="3" VerticalAlignment="Bottom" Width="Auto" StrokeThickness="1" Height="1" Fill="#FFC9CACA"/>--> 

           <localprimitives:DataGridRowsPresenter Name="RowsPresenter" Grid.ColumnSpan="2" Grid.Row="1" /> 
           <Rectangle Name="BottomRightCorner" Fill="#FFE9EEF4" Grid.Column="2" Grid.Row="2" /> 
           <Rectangle Name="BottomLeftCorner" Fill="#FFE9EEF4" Grid.Row="2" Grid.ColumnSpan="2" /> 
           <ScrollBar Name="VerticalScrollbar" Orientation="Vertical" Grid.Column="2" Grid.Row="1" Width="18" Margin="0,-1,-1,-1"/> 

           <Grid Grid.Column="1" Grid.Row="2"> 
            <Grid.ColumnDefinitions> 
             <ColumnDefinition Width="Auto" /> 
             <ColumnDefinition/> 
            </Grid.ColumnDefinitions> 
            <Rectangle Name="FrozenColumnScrollBarSpacer" /> 
            <ScrollBar Name="HorizontalScrollbar" Grid.Column="1" Orientation="Horizontal" Height="18" Margin="-1,0,-1,-1"/> 
           </Grid> 

          </Grid> 
         </Border> 
         <Border x:Name="DisabledVisualElement" IsHitTestVisible="False" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" CornerRadius="2" Background="#8CFFFFFF" Opacity="0"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>