Implementation of the DBNavigation control in Silvelright 4

This is 4th part of the series of Silverlight Business Application development, which I am writing. Today we will try to implement DBNavigator control.

With Silverlight 4 and RIA services you can develop full business application with backend SQL database on the similar way as you can do in Windows Forms and Windows Presentation Foundation. In the previous posts we have seen how easy connect database to your Silverlight application, and also how to use some patterns in Silvelright aplication like MVVM.
I this post we will see how to implement Database Navigation control like BindingNavigator from Windows Forms. On the other hand we will also see how to extend functionality of the existing Silverlight control by developing custom control derived from existing one, as well as the procedure how to create Silverlight User control.

Our Tutorial will start from the previous blog post, so you need to download source code sample, and start our today’s tutorial. When you download source code, open it in Visual Studio 2010.

• Right click on the solution and chose  Add->New  Project
• Select Silvelright Class Library project template, give it the name SLCustomCtrl, and click OK button.

Now that you have the new Silverlit Class Library project in your solution, you have to add reference to your main Silverlight project.

• Right click on References of theSLDemoPart2 project,  and chose Add->Reference, click Project Tab in the new dialog, and chose SLCustomCtrl project.

Implementation of Custom Control

If you want to extent functionality from the existing Silverlight control you have to add the new Silverlight Templated Control, and starting extend the new functionality from the existing one.

• Right click on the SLCustomCtrl project, chose Add->New Item, and choose Silverlight Templated Control, name it SLDBNavigator.cs, and hit Add button.

Open SLDBNavigator.cs and put the following source code:

public class DBNavigationBaseCtrl : Grid
{
    public event RoutedEventHandler AddNew;
    public event RoutedEventHandler DeleteCurrent;
    public event RoutedEventHandler DomainDataChanged;

    public DBNavigationBaseCtrl()
    {

    }
    public DomainDataSource DomainData
    {
        get { return (DomainDataSource)GetValue(DomainDataProperty); }
        set
        {
            SetValue(DomainDataProperty, value);
            OnDomainDataChanged(new RoutedEventArgs());

        }
    }

    private void OnDomainDataChanged(RoutedEventArgs e)
    {
        if (DomainDataChanged != null)
            DomainDataChanged(new object(),e);
    }

    public static readonly DependencyProperty DomainDataProperty =
        DependencyProperty.Register("DomainData", typeof(DomainDataSource), typeof(DBNavigationBaseCtrl), new PropertyMetadata(null));
    public bool IsCustomDelete
    {
        get { return (bool)GetValue(IsCustomDeleteProperty); }
        set { SetValue(IsCustomDeleteProperty, value); }
    }

    public static readonly DependencyProperty IsCustomDeleteProperty =
        DependencyProperty.Register("IsCustomDelete", typeof(bool), typeof(bool), new PropertyMetadata(false));

    protected void OnEventAddNew(RoutedEventArgs e)
    {
        if (AddNew != null)
            AddNew(new object(), e);
    }
    protected void OnEventDeleteCurrent(RoutedEventArgs e)
    {
        if (DeleteCurrent != null)
            DeleteCurrent(new object(), e);
    }
}

Implementation of the previous source code contains the three Routed Event Handlers, and two properties. The source code is very simple so you can see very quickly what’s going on in the source code.

Implementation of User Control

Now that we have base custom control for manipulation database tables and views, we need to implement custom Silvelright control derived from it  to expose implemented properties and events from the base class in to XML.

• Right click on SLCustmCtrls project, chose Add->New Item, select Silverlight User Control, name it DBNavigatorCtrl.xaml, and click Add button.

Implementation is achieved with putting  several buttons in to controls and subscribe to corresponded click events. The implementation of the DBNavigationCtrl is in the following two listing:

<!--DB Navigator-->
    <StackPanel Margin="2" Orientation="Horizontal" HorizontalAlignment="Center" >
        <Button Content="&lt;|" Height="Auto" Name="btnFirst"  Width="30" Click="btnFirst_Click" />
        <Button Content="&lt;" Height="Auto"  Name="btnPrev"   Width="30" Click="btnPrev_Click" />
        <TextBlock Width="70" Name="textCurrentItem" Text="" TextAlignment="Center" VerticalAlignment="Center"></TextBlock>
        <Button Content="&gt;" Height="Auto"  Name="btnNext"  Width="30" Click="btnNext_Click" />
        <Button Content="|&gt;" Height="Auto" Name="btnLast"  Width="30" Click="btnLast_Click" />
        <Button Content="+" Height="Auto"  Name="btnAdd"  Width="30" Click="btnAdd_Click" />
        <Button Content="-" Height="Auto" Name="btnDelete"  Width="30" Click="btnDelete_Click" />
    </StackPanel>

public partial class DBNavigatorCtrl : DBNavigationBaseCtrl
{
    public DBNavigatorCtrl()
    {
        InitializeComponent();
        this.DomainDataChanged += new RoutedEventHandler(DBNavigatorCtrl_Loaded);

    }

    void DBNavigatorCtrl_Loaded(object sender, RoutedEventArgs e)
    {
        if (DomainData != null)
        {
            DomainData.DataView.CurrentChanged += (ss, ee) =>
            {
                var dds = ss as DomainDataSourceView;

                if (dds != null)
                    textCurrentItem.Text = (dds.IndexOf(dds.CurrentItem) + 1).ToString() + "/" + dds.Count.ToString();
                else
                    textCurrentItem.Text = "0/0";
            };
        }
    }

    private void btnFirst_Click(object sender, RoutedEventArgs e)
    {

        if (DomainData != null)
            DomainData.DataView.MoveCurrentToFirst();
    }

    private void btnPrev_Click(object sender, RoutedEventArgs e)
    {
        if (DomainData != null)
            if (DomainData.DataView.CurrentPosition > 0)
                DomainData.DataView.MoveCurrentToPrevious();
    }

    private void btnNext_Click(object sender, RoutedEventArgs e)
    {
        if (DomainData != null)
            if (DomainData.DataView.CurrentPosition + 1 < DomainData.DataView.Count)
                DomainData.DataView.MoveCurrentToNext();
    }

    private void btnLast_Click(object sender, RoutedEventArgs e)
    {
        if (DomainData != null)
            DomainData.DataView.MoveCurrentToLast();
    }

    private void btnAdd_Click(object sender, RoutedEventArgs e)
    {
        if (DomainData == null)
            return;
        RoutedEventArgs e1 = new RoutedEventArgs();
        OnEventAddNew(e1);
    }

    private void btnDelete_Click(object sender, RoutedEventArgs e)
    {
        if (DomainData == null)
            return;
        if (IsCustomDelete)
        {
            RoutedEventArgs e1 = new RoutedEventArgs();
            OnEventDeleteCurrent(e1);
            return;
        }
        if (MessageBox.Show("Confirm delete by clicking the OK button",
                              "Deleting a record ...", MessageBoxButton.OKCancel) == MessageBoxResult.OK)
        {
            DomainData.DataView.Remove(DomainData.DataView.CurrentItem);
        }
    }
}

Using DBNavigaorCtrl in Silvelright project

When we have DBNavigatorCtrl control, it is very easy to use it. Just put the control in to XAML, and in code behind assign it to domain data source of the Main Page.
Now select the main Silverlight project,and open MainPage.XAML, from the toolbox windows select DBNavigationCtrl item and drag and drop to mainpage, similar as picture shows below. If you don’t see DBNavigationCtrl in the ToolBox you have Rebuild the solution.

The result of our tutorial looks likes on the following picture:

The source code for this tutorial can be downloaded from here.
Implementation of the DBNavigation control in Silvelright 4