Powered by MSDN

US - English
NEW! Silverlight 5 is available Learn More

A data grid with borders RSS

4 replies

Last post Jun 03, 2008 08:44 AM by Guygeboe

(0)
  • n0kx

    n0kx

    Member

    54 Points

    31 Posts

    A data grid with borders

    Apr 24, 2008 07:05 PM | LINK

    i'm wanting to make a "table" that has borders and background colors.  something like this generic image i pulled from google.

    what's the best way to do this?
     

    grid
     



    "I predict future happiness for Americans if they can prevent the government from wasting the labors of the people under the pretense of taking care of them." Thomas Jefferson
  • Yi-Lun Luo - MSFT

    Yi-Lun Luo -...

    All-Star

    25149 Points

    2759 Posts

    Microsoft

    Re: A data grid with borders

    Apr 28, 2008 04:58 AM | LINK

    Hello, generally speaking, there're two ways to customize a Control's look.

    First, set the various properties, if available. For example, with DataGrid, you can set RowBackground and AlternatingRowBackground to customize the rows' background, and set HeadersVisibility to Column so that only columns will display headers. You can find all those properties in Blend.

    <Data:DataGrid RowBackground="#FFEFEFEF" AlternatingRowBackground="#FFEFEFEF" HeadersVisibility="Column">

    Second, you can create ControlTemplates wrapped in Styles to completely change a Control's look. Unfortunately, Blend March Preview doesn't allow you to edit ControlTemplates via the designer interface, so you'll have to manually write XAML (in a future version this feature is likely to be added). Here's a simple sample for DataGridColumnHeader's ControlTemplate:

    <Style x:Key="columnHeaderStyle" TargetType="Data:DataGridColumnHeader">
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="Data:DataGridColumnHeader">
    <Grid Name="RootElement" Background="#FFCC0033">
    <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <Line Stretch="Fill" Grid.Row="2" Grid.ColumnSpan="2" X1="0" X2="1" Y1="0" Y2="0" StrokeThickness="1" Stroke="#FF000000" />
    <Line Stretch="Fill" Grid.RowSpan="2" Grid.Column="1" X1="0" X2="0" Y1="0" Y2="1" StrokeThickness="1" Stroke="#FF000000" Visibility="{TemplateBinding SeparatorVisibility}" />

    <ContentPresenter Content="{TemplateBinding Content}" Margin="3,0,3,0" Foreground="White" Grid.RowSpan="2" VerticalAlignment="Center"/>
    </Grid>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>

     

    To use this template, in your DataGrid, you can set the ColumnHeaderStyle property to the above Style.

    <Data:DataGrid RowBackground="#FFEFEFEF" AlternatingRowBackground="#FFEFEFEF" ColumnHeaderStyle="{StaticResource columnHeaderStyle}" HeadersVisibility="Column">

    shanaolanxing - I'll transfer to the Windows Azure team, and will have limited time to participate in the Silverlight forum. Apologize if I don't answer your questions in time.
  • Guygeboe

    Guygeboe

    Member

    93 Points

    38 Posts

    Re: A data grid with borders

    May 07, 2008 02:45 PM | LINK

    Hi,

     

    I'm getting this error :(.

    I got a datagrid thats in a different xaml file, thats because I made it a control.

    This is the error:

    A first chance exception of type 'System.Windows.Markup.XamlParseException' occurred in System.Windows.dll
    Additional information: Invalid attribute value System_Windows_Controls:DataGridColumnHeader for property TargetType. [Line: 6 Position: 99]

    These are the first lines of the datagrid control:

    <Grid x:Name="DataGridMedewerkerOverzicht" Background="White" >

    <System_Windows_Controls:DataGrid ColumnHeaderStyle="{StaticResource columnHeaderStyle}" HeadersVisibility="Column"

    x:Name="dg" AutoGenerateColumns="False" VerticalAlignment="Top" d:LayoutOverrides="Height" Margin="0,0,-97.4440002441406,0" Height="25.134">

    <System_Windows_Controls:DataGrid.Columns>

    I put the style in my app.xaml, thats the only location I found where it was accepted.

    <Application.Resources>

    <Style x:Key="columnHeaderStyle" TargetType="System_Windows_Controls:DataGridColumnHeader">

    <Setter Property="Template">

    <Setter.Value> and so on....

    Can anyone help me? Thx! :)

  • dcstraw

    dcstraw

    Member

    293 Points

    103 Posts

    Re: A data grid with borders

    Jun 02, 2008 10:01 PM | LINK

    I got this too when I didn't include the assembly in my xmlns definition.  I had this:

    xmlns:local="clr-namespace:MyNamespace"

    and I changed it to this:

    xmlns:local="clr-namespace:MyNamespace;assembly=MyAssembly"

    Everything worked after that.  Apparently Silverlight requires this even for the local assembly.

    David

  • Guygeboe

    Guygeboe

    Member

    93 Points

    38 Posts

    Re: A data grid with borders

    Jun 03, 2008 08:44 AM | LINK

    Thank you for the reply.

     I got it to work actually. Maybe because VS changed the namespace declaration like you described itself. The thing I did manually was add the a missing style to the style I was adding in the first place. If a style is missing any (static) resources, it crashes it seems.

     I could be wrong, I'm just a junior programmer.