Changing Treeview Template

Treeview is one of the new controls in the toolkit that was released at PDC. Virtualization is not there, but it should not stop from changing the templates. In .net SDK we find sample data for League,Divisions and Teams. it is Hierarchical Data so works nicely with Treeview. when we set the ItemsSource to this data

tv1.ItemsSource = new LeagueList();

and set the ItemTemplates like this

<controls:HierarchicalDataTemplate x:Key=”dtTeam”>
            <TextBlock Text=”{Binding Name}” />
        </controls:HierarchicalDataTemplate>
        <controls:HierarchicalDataTemplate x:Key=”dtDivision”
                                           ItemsSource=”{Binding Path=Teams}”
                                           ItemTemplate=”{StaticResource dtTeam}”>
            <TextBlock Text=”{Binding Name}” />

        </controls:HierarchicalDataTemplate>
        <controls:HierarchicalDataTemplate x:Key=”dtLeague”
                                           ItemsSource=”{Binding Divisions}”
                                           ItemTemplate=”{StaticResource dtDivision}”>
            <TextBlock Text=”{Binding Name}” />
        </controls:HierarchicalDataTemplate>

we get a nice treeview

we can change the template of Treeview and TreeviewItem to make the items are laid out horizontally instead of vertically.

when we change the template and set the Style and ItemContainerStyle properties of the Treeview to new styles we created, Here is what we get

you can download the code here

Changing Styles using ImplicitStyleManager

A bunch of new controls were released yesterday as part of silverlight toolkit. One of new Items is ImplicitStyleManager which simplifies changing styles. You can download the sample here. It doesnt do anything meaningful but shows how we can dynamically change styles in the application.

Here are some screenshots

DataGrid navigation between cells

We can navigate between the cells of the DataGrid using Tab key or arrow keys, but because of bug in RTM we have to use a workaround mentioned in this forum post. If we are using CellTemplates the cell will get the focus but we still have to click the cell to force it go into EditMode. Another way is to handle the CurrentCellChanged event and call the BeginEdit() method will force the current cell to go into editmode

DataGrid in ComboBox

We all know how to use the ComboBox, bind it to a collection and set DisplayMemberPath and we are done

we get a nice looking ComboBox

we can make it look like this with few tweaks (yes, DataGrid with all the functionality in the popup)

Download the code here

if you did not already leave the site, I am still looking for a job either in WPF or Silverlight, please let me know

Changing Foreground of cells that are modified in DataGrid

Lets say you have a DataGrid in a page and want to show the cells with changed values as in this forum post.

Before edit

after edit

here is one way. (It wont work with DataGrid with Scrollbars)

Sample xaml

<UserControl xmlns:data=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data”
             x:Class=”SLDataGridSample.Page”
             xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation“
             xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml“
             xmlns:vsm=”clr-namespace:System.Windows;assembly=System.Windows”
             xmlns:localprimitives=”clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data”
             Width=”400″
             Height=”300″>
    <UserControl.Resources>
    </UserControl.Resources>
    <Grid x:Name=”LayoutRoot”
          Background=”White”>
        <data:DataGrid x:Name=”grid1″
                       AutoGenerateColumns=”False”>
            <data:DataGrid.Columns>
                <data:DataGridTextColumn Width=”100″
                                         Header=”FirstName”
                                         Binding=”{Binding FirstName}”>

                </data:DataGridTextColumn>
                <data:DataGridTextColumn Header=”LastName”
                                         Binding=”{Binding LastName}”></data:DataGridTextColumn>
                <data:DataGridTextColumn Header=”HomeTown”
                                         Binding=”{Binding HomeTown}”></data:DataGridTextColumn>
            </data:DataGrid.Columns>
        </data:DataGrid>

    </Grid>
</UserControl>

 public Page()
        {
            InitializeComponent();
            grid1.ItemsSource = new People();
            grid1.PreparingCellForEdit += new EventHandler<DataGridPreparingCellForEditEventArgs>(grid1_PreparingCellForEdit);
            grid1.CurrentCellChanged += new EventHandler<EventArgs>(grid1_CurrentCellChanged);
        }

        void grid1_CurrentCellChanged(object sender, EventArgs e)
        {
            if (column != null && row != null)
            {
                TextBlock textBlock = (column.GetCellContent(row) as TextBlock);
                textBlock.Foreground = new SolidColorBrush(Colors.Blue);
                row = null;
                column = null;
            }
        }

        DataGridRow row;
        DataGridColumn column;
        void grid1_PreparingCellForEdit(object sender, DataGridPreparingCellForEditEventArgs e)
        {
            column = e.Column;
            row = e.Row;          
        }     

When the cell is getting ready to be edited we save the row and column and when the current cell changes we get the CellContent (usually a TextBlock, unless you are showing something different or have a CellTemplate)  and change the Foreground. Finally reset our variables