The Progress Bar - DevExpress XPF Blog

So, three product names in the title... what is this blog post going to be about? Here is the quick one sentence summary: Use the Silverlight Window Control from DevExpress to show the print preview of our Silverlight Grid bound to data. That’s the general overview, but this post will also serve as an introduction to showing the print preview, and using the DXWindow and DXLayoutControl, as well as changing themes at runtime.

As always, to get started... we need to set up the infrastructure of the application. To do this, we’ll use the Layout Control from DevExpress.

<dxlc:LayoutControl Name="rootLayoutControl" Orientation="Vertical">
    <dxlc:LayoutGroup>
        <dxlc:LayoutItem Label="Theme:" Name="layoutItem1" HorizontalAlignment="Left" VerticalAlignment="Center">
            <dxe:ComboBoxEdit Name="themeComboBox" IsTextEditable="False"
                              SelectedIndexChanged="themeComboBox_SelectedIndexChanged" />
        </dxlc:LayoutItem>
        <Button Content="Print Preview..." Height="23" HorizontalAlignment="Right" Name="printPreviewButton" 
                VerticalAlignment="Top" Width="150" Click="printPreviewButton_Click" />
    </dxlc:LayoutGroup>
    <dxg:GridControl Name="gridControl1">
        <dxg:GridControl.Columns>
            <dxg:GridColumn FieldName="ProductName" Header="Product Name" />
            <dxg:GridColumn FieldName="UnitPrice" Header="Unit Price" />
            <dxg:GridColumn FieldName="UnitsInStock" Header="Units in Stock">
                <dxg:GridColumn.EditSettings>
                    <dxe:SpinEditSettings MaxValue="999" MinValue="0" />
                </dxg:GridColumn.EditSettings>
            </dxg:GridColumn>
            <dxg:GridColumn FieldName="UnitsOnOrder" Header="Units on Order" />
        </dxg:GridControl.Columns>
        <dxg:GridControl.View>
            <dxg:TableView AutoWidth="True" ShowAutoFilterRow="True" ShowFilterPanelMode="ShowAlways" />
        </dxg:GridControl.View>
    </dxg:GridControl>
</dxlc:LayoutControl>

What do we have here? I’ve first used a layout control and populated it with two layout groups. Both layout groups retain their default view, meaning that they will not display any group headers or tabs. The first group contains a combo box editor (part of the DXEditors library) and a button. We’ll populate the combo box with the themes available and the button will be used to display a print preview of the grid control. Notice that I’ve also quietly embedded a spin edit control for the “UnitsInStock” column.

The print preview will be displayed using the Silverlight Windows Control from DevExpress, or DXWindow. This is a little gem that probably goes unnoticed most of the time, but it can be a valuable tool to provide multiple window functionality inside your web-browser. I’ll set that up outside the root layout control using the following XAML code:

<dxc:DXWindow x:Name="printPreviewWindow" HorizontalContentAlignment="Stretch" IsSizable="True"
              AnimationType="Fade" Width="500" Height="500">
</dxc:DXWindow>

Let’s quickly go over what’s happening here... I’ve created a new DXWindow, specified that it’s content should always be stretched, allowed end-users to resize the window at runtime, and specified the animation type. In this case, the window will fade in when invoked.

If I switch to the designer now, it should look something like this:

Looks a bit weird doesn’t it? Don’t fret... we are on the right track. While you can see the DXWindow control in the background, it will not be displayed in this manner at runtime. We’ll have to invoke it through code. So let’s switch to code view and finish up the rest of the application.

First, I’ll add all the namespace references that I need:

using DevExpress.Xpf.Core;
using DevExpress.Xpf.Printing;
using DevExpress.Utils;
using DevExpress.Xpf.Printing.DataNodes;
using System.ServiceModel.DomainServices.Client;
using SolutionName.Web;

Next, I’m going to take care of the data binding for the grid. For this example, I’m using RIA Services to bind to a sample database hosted on a local instance of SQL Server Express. For step-by-step instructions on how to do this, watch my video on this topic.

private ProductsContext _productsContext = new ProductsContext();

private void populateGrid() {
    LoadOperation<Products> loadOperation = _productsContext.Load(_productsContext.GetProductsQuery());
    gridControl1.DataSource = loadOperation.Entities;
}

I’ll now create a method to populate the themes combo box and then handle it’s SelectedIndexChanged event to set themes at runtime:

private void populateThemes() {
    themeComboBox.Items.Add("LightGray");
    themeComboBox.Items.Add("DeepBlue");
    themeComboBox.Items.Add("Office2007Blue");
    themeComboBox.Items.Add("Office2007Black");
    themeComboBox.Items.Add("Office2007Silver");
    themeComboBox.SelectedItem = "Office2007Blue";
}

private void themeComboBox_SelectedIndexChanged(object sender, RoutedEventArgs e) {
    ThemeManager.ApplicationThemeName = themeComboBox.SelectedItem.ToString();
}

The next method will generate the print preview, add it to the window and display the DXWindow control. All of this will be invoked when the “Print Preview” button is clicked:

private void printGrid() {
    DocumentPreview preview = new DocumentPreview();
    VisualDataNodeLink link = new VisualDataNodeLink(gridControl1.View as IRootDataNodeSource);
    link.ExportServiceUri = "../ExportService1.svc";
    link.PrintingSystem.ExportOptions.Html.EmbedImagesInHTML = true;
    LinkPreviewModel model = new LinkPreviewModel(link);
    preview.Model = model;

    // Setup the DXWindow and content
    printPreviewWindow.Title = "Grid Print Preview";
    printPreviewWindow.Show();
    printPreviewWindow.Content = preview;

    link.CreateDocument(true);
}

private void printPreviewButton_Click(object sender, RoutedEventArgs e) {
    printGrid();
}   

Finally, to make sure that the grid and combo box are populated and a default theme is set, I’ll modify the page’s initializer in the following manner:

public MainPage() {
    ThemeManager.ApplicationTheme = Theme.Office2007Blue;
    InitializeComponent();
    populateThemes();
    populateGrid();
}

And that’s it! Let’s run the application to see it in action:

In the above clip you see the in-place spin editor control in action. The runtime theming functionality works as well, applying the selected theme to all the components on the page:

And finally, the print preview in the DXWindow control:

The project containing all the code is also attached to this post as “SampleProject.zip”.