ComponentOne DataGrid for WPF and Silverlight
In This Topic
    Step 3 of 4: Customizing the Grid's Appearance and Behavior
    In This Topic

    In the previous steps you worked in Visual Studio to create a new Silverlight project and bind DataGrid for Silverlight to a data source. In this step you'll customize the grid application's appearance and behavior.

    To customize DataGrid for Silverlight, complete the following steps:

    1.        Return to the MainPage.xaml file. In this example you'll be customizing the grid in XAML rather than code.

    2.        Locate the <c1grid:C1DataGrid> tag in the XAML window and add CanUserGroup="True" to it. This will enable the grouping area of the grid.

    The XAML will now look similar to the following:

    <c1grid:C1DataGrid x:Name="c1dg" CanUserGroup="True">

    3.        Add NewRowVisibility="Top" to the <c1grid:C1DataGrid> tag in the XAML window. This will move the add new row to the top of the grid.

    The XAML will now look similar to the following:

    <c1grid:C1DataGrid x:Name="c1dg" CanUserGroup="True" NewRowVisibility="Top">

    4.        Add VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible" to the <c1grid:C1DataGrid> tag. This will ensure that the horizontal and vertical scroll bars are always visible.

    The XAML will now look similar to the following:

    <c1grid:C1DataGrid x:Name="c1dg" CanUserGroup="True" NewRowVisibility="Top" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible">

    5.        Add VerticalGridLinesBrush="Aquamarine" to the <c1grid:C1DataGrid> tag. This changes the color of the vertical grid lines.

    The XAML will now look similar to the following:

    <c1grid:C1DataGrid x:Name="c1dg" CanUserGroup="True" NewRowVisibility="Top" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible" VerticalGridLinesBrush="Aquamarine">

     What You've Accomplished

    Save and run your application and observe that you've changed the appearance of the grid and the columns that are displayed:

    You've successfully customized the appearance and behavior of your grid. In the next step you'll explore some of the run-time interactions that are possible in your grid application.