August 2010 - Posts - The Progress Bar

Video: New WPF Project Wizard for VB.NET (Coming in v2010 Vol 2)

Check out the following video demonstrating the new WPF Project Wizard for Visual Basic. This iteration extends the original project wizard introduced in the 2010.1 release for Visual Studio 2010 by adding support for generating the base XAML markup of an application as well as the associated VB.NET code.

Posted Aug 30 2010, 11:40 AM by Emil Mesropian (DevExpress) with no comments

Filed under: WPF, Project Wizard, Visual Studio 2010, 2010.2, VB.NET

Video: Layout Persistence for WPF Toolbar and Menu Control

While Layout Persistence has been announced as a new feature in 2010.2 release of the Silverlight Toolbar and Menu Control library, it has been available in the WPF version of the component since version 2010.1. Check out the following video tutorial that demonstrates how to implement layout persistence in the WPF Toolbar and Menu Control as well as how to load existing layouts saved as XML files.

The complete project for the video is also attached at the end of this blog post.

Posted Aug 30 2010, 10:31 AM by Emil Mesropian (DevExpress) with no comments

Filed under: Video, WPF, DXBars, Layout Persistence, Bars

Video: Layout Persistence for Silverlight Toolbar and Menu Controls (Coming in v2010 Vol 2)

As introduced in a previous post, the upcoming version of the Silverlight Toolbar-Menu System will support layout persistence to a data store. Click on the image below to check out the video tutorial that demonstrates how the layout of a toolbar and menu system can be saved and restored using different types of data stores.

Posted Aug 27 2010, 10:26 AM by Emil Mesropian (DevExpress) with 1 comment(s)

Filed under: Video, Silverlight, v2010.2, Layout Persistence, Bars

WPF Project Wizard for VB.NET (Coming in v2010 Vol 2)

In the 2010.1 release of DXperience, we introduced the WPF Project Wizard for C# which allowed developers to quickly setup basic project settings, as well as provide a real example of how to get started with and customize our WPF controls. For version 2010.2, we’ve further developed the project wizard to support VB.NET.

The Project Wizard is listed as a project template when selecting the Visual Basic –> Windows application category:

Once the project template is selected, the “Project Settings” window is invoked, which looks like this:

Through this window you’ll be able to select and customize DevExpress UI controls to be included in your new VB.NET WPF application project. These include:

DXWindow – This component offers better integration with other DevExpress UI controls such as the Ribbon Control as well as DevExpress themes that can be applied to the window frame.
DXThemes – One of the four pre-defined DevExpress themes can be selected for the application.
DXBars – Add toolbar and menu functionality.
DXLayout – Select the default basic layout of the application.
DXGrid – Embed a grid control using either the Table View or Card View.
DXNavBar – Integrate a pre-populated navbar control into the application with several sample groups and items.
DXCharts – Embed the DevExpress Chart Control for WPF and select the chart type and color palette for sample series as well as display the legend and data labels.

Stay tuned for a video tour of the WPF Project Wizard for VB.NET.

Posted Aug 26 2010, 04:24 PM by Emil Mesropian (DevExpress) with 1 comment(s)

Filed under: WPF, Project Wizard, v2010.2, VB.NET

Layout Persistence for Silverlight Toolbar and Menu Controls (Coming in v2010 Vol 2)

With the upcoming release of DXperience 2010.2, the Toolbar and Menu Controls for Silverlight will provide full support for runtime layout persistence and loading. This means that you have the ability to save the layout of your toolbars and menu controls to a data store for future use. The layout can be persisted to a memory stream, an external file as well as the Silverlight isolated storage.

This feature is currently also present in the product’s WPF counter-part, however we’ll be covering that in a follow-up blog post and video tutorial.

So, let’s take a look at an example where that can be used to demonstrate the different method of saving and loading the layout. First, we need a complete toolbar and menu system in our application:):

<UserControl xmlns:lc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"  xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"

    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"

    xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"  x:Class="SilverlightBarsApp.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White" dx:StyleManager.ApplyApplicationTheme="True">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal" Margin="10" Height="40" Grid.Row="0">

            <Button x:Name="saveMemory" Content="Save to Memory Stream" Width="200" Click="saveMemory_Click" />

            <Button x:Name="loadMemory" Content="Load from Memory Stream" Width="200" Click="loadMemory_Click" />

            <Button x:Name="loadExternal" Content="Load External Layout" Width="200" Click="loadExternal_Click" />

            <Button x:Name="saveIsolated" Content="Save to Isolated Storage" Width="200" Click="saveIsolated_Click" />

            <Button x:Name="loadIsolated" Content="Load from Isolated Storage" Width="200" Click="loadIsolated_Click" />

        </StackPanel>

            <dxb:BarManager x:Name="barManager1" CreateStandardLayout="False" Grid.Row="1">

                <dxb:BarManager.Items>

                    <dxb:ToolbarListItem Name="toolbarListItemCore" Content="Toolbars"/>

  

                    <dxb:BarButtonItem Name="bNew" Content="New" Glyph="/SilverlightBarsApp;component/Images/Icons/new-16x16.png"/>

                    <dxb:BarButtonItem Name="bOpen" Content="Open" Glyph="/SilverlightBarsApp;component/Images/Icons/open-16x16.png"/>

                    <dxb:BarButtonItem Name="bClose" Content="Close" Glyph="/SilverlightBarsApp;component/Images/Icons/close-16x16.png"/>

                    <dxb:BarButtonItem Name="bSave" Content="Save" Glyph="/SilverlightBarsApp;component/Images/Icons/save-16x16.png"/>

                    <dxb:BarButtonItem Name="bSaveAs" Content="Save As..." Glyph="/SilverlightBarsApp;component/Images/Icons/save-as-16x16.png"/>

                    <dxb:BarButtonItem Name="bPrint" Content="Print" Glyph="/SilverlightBarsApp;component/Images/Icons/print-16x16.png"/>

                    <dxb:BarButtonItem Name="bExit" Content="Exit"/>

  

                    <dxb:BarButtonItem Name="bUndo" Content="Undo" Glyph="/SilverlightBarsApp;component/Images/Icons/undo-16x16.png"/>

                    <dxb:BarButtonItem Name="bCut" Content="Cut" Glyph="/SilverlightBarsApp;component/Images/Icons/cut-16x16.png"/>

                    <dxb:BarButtonItem Name="bCopy" Content="Copy" Glyph="/SilverlightBarsApp;component/Images/Icons/copy-16x16.png"/>

                    <dxb:BarButtonItem Name="bPaste" Content="Paste" Glyph="/SilverlightBarsApp;component/Images/Icons/paste-16x16.png"/>

                    <dxb:BarButtonItem Name="bClear" Content="Clear"/>

                    <dxb:BarButtonItem Name="bSelectAll" Content="Select All"/>

                    <dxb:BarButtonItem Name="bFind" Content="Find" Glyph="/SilverlightBarsApp;component/Images/Icons/find-16x16.png"/>

                    <dxb:BarButtonItem Name="bReplace" Content="Replace" Glyph="/SilverlightBarsApp;component/Images/Icons/replace-16x16.png"/>

  

                    <dxb:BarButtonItem Name="bFont" Content="Font..." Glyph="/SilverlightBarsApp;component/Images/Icons/font-16x16.png"/>

                    <dxb:BarButtonItem Name="bFontColor" Content="Font Color" Glyph="/SilverlightBarsApp;component/Images/Icons/font-color-16x16.png"/>

  

                    <dxb:BarCheckItem Name="bBullets" Content="Bullets" Glyph="/SilverlightBarsApp;component/Images/Icons/bullets-16x16.png"/>

  

                    <dxb:BarButtonItem Name="bHome" Content="Developer Express on the Web"/>

                    <dxb:BarButtonItem Name="bAbout" Content="About"/>

  

  

                    <dxb:BarCheckItem Name="bBold" Content="Bold" Glyph="/SilverlightBarsApp;component/Images/Icons/bold-16x16.png"/>

                    <dxb:BarCheckItem Name="bItalic" Content="Italic" Glyph="/SilverlightBarsApp;component/Images/Icons/italic-16x16.png"/>

                    <dxb:BarCheckItem Name="bUnderline" Content="Underline" Glyph="/SilverlightBarsApp;component/Images/Icons/underline-16x16.png"/>

                    <dxb:BarCheckItem Name="bLeft" Content="Left" GroupIndex="1" Glyph="/SilverlightBarsApp;component/Images/Icons/left-align-16x16.png"/>

                    <dxb:BarCheckItem Name="bCenter" Content="Center" GroupIndex="1" Glyph="/SilverlightBarsApp;component/Images/Icons/center-align-16x16.png"/>

                    <dxb:BarCheckItem Name="bRight" Content="Right" GroupIndex="1" Glyph="/SilverlightBarsApp;component/Images/Icons/right-align-16x16.png"/>

  

                    <dxb:BarStaticItem Name="bInfo" Content="Info" Glyph="/SilverlightBarsApp;component/Images/Icons/info-16x16.png" ItemWidth="150"/>

                    <dxb:BarStaticItem Name="bEmpty" ItemWidth="100" Content="Static Text" />

  

                    <dxb:BarEditItem Name="eFontFamily" EditWidth="150" Content="Font:">

                        <dxb:BarEditItem.EditSettings>

                            <dxe:ComboBoxEditSettings IsTextEditable="False"/>

                        </dxb:BarEditItem.EditSettings>

                    </dxb:BarEditItem>

                    <dxb:BarEditItem Name="eFontSize" EditWidth="60" Content="Font Size:">

                        <dxb:BarEditItem.EditSettings>

                            <dxe:ComboBoxEditSettings PopupMaxHeight="250" IsTextEditable="False"/>

                        </dxb:BarEditItem.EditSettings>

                    </dxb:BarEditItem>

  

                    <dxb:BarSubItem Name="bsFile" Content="File">

                        <dxb:BarSubItem.ItemLinks>

                            <dxb:BarButtonItemLink BarItemName="bNew"/>

                            <dxb:BarButtonItemLink BarItemName="bOpen"/>

                            <dxb:BarButtonItemLink BarItemName="bClose"/>

                            <dxb:BarItemLinkSeparator/>

                            <dxb:BarButtonItemLink BarItemName="bSave"/>

                            <dxb:BarButtonItemLink BarItemName="bSaveAs"/>

                            <dxb:BarItemLinkSeparator/>

                            <dxb:BarButtonItemLink BarItemName="bPrint"/>

                            <dxb:BarItemLinkSeparator/>

                            <dxb:BarButtonItemLink BarItemName="bExit"/>

                        </dxb:BarSubItem.ItemLinks>

                    </dxb:BarSubItem>

                    <dxb:BarSubItem Name="bsEdit" Content="Edit">

                        <dxb:BarSubItem.ItemLinks>

                            <dxb:BarButtonItemLink BarItemName="bUndo"/>

                            <dxb:BarItemLinkSeparator/>

                            <dxb:BarButtonItemLink BarItemName="bCut"/>

                            <dxb:BarButtonItemLink BarItemName="bCopy"/>

                            <dxb:BarButtonItemLink BarItemName="bPaste"/>

                            <dxb:BarItemLinkSeparator/>

                            <dxb:BarButtonItemLink BarItemName="bClear"/>

                            <dxb:BarButtonItemLink BarItemName="bSelectAll"/>

                            <dxb:BarItemLinkSeparator/>

                            <dxb:BarButtonItemLink BarItemName="bFind"/>

                            <dxb:BarButtonItemLink BarItemName="bReplace"/>

                        </dxb:BarSubItem.ItemLinks>

                    </dxb:BarSubItem>

                    <dxb:BarSubItem Name="bsFormat" Content="Format">

                        <dxb:BarSubItem.ItemLinks>

                            <dxb:BarButtonItemLink BarItemName="bFont"/>

                            <dxb:BarButtonItemLink BarItemName="bFontColor"/>

                            <dxb:BarItemLinkSeparator/>

                            <dxb:BarCheckItemLink BarItemName="bBullets"/>

                        </dxb:BarSubItem.ItemLinks>

                    </dxb:BarSubItem>

                    <dxb:BarSubItem Name="bsToolBars" Content="Toolbars">

                        <dxb:BarSubItem.ItemLinks>

                            <dxb:ToolbarListItemLink BarItemName="toolbarListItemCore"/>

                        </dxb:BarSubItem.ItemLinks>

                    </dxb:BarSubItem>

                    <dxb:BarSubItem Name="bsHelp" Content="Help">

                        <dxb:BarSubItem.ItemLinks>

                            <dxb:BarButtonItemLink BarItemName="bHome"/>

                            <dxb:BarItemLinkSeparator/>

                            <dxb:BarButtonItemLink BarItemName="bAbout"/>

                        </dxb:BarSubItem.ItemLinks>

                    </dxb:BarSubItem>

                </dxb:BarManager.Items>

                <dxb:BarManager.Bars>

                    <dxb:Bar Caption="MainMenu" x:Name="MainMenu" IsMainMenu="True" UseWholeRow="True">

                        <dxb:Bar.DockInfo>

                            <dxb:BarDockInfo ContainerType="Top"/>

                        </dxb:Bar.DockInfo>

                        <dxb:Bar.ItemLinks>

                            <dxb:BarSubItemLink BarItemName="bsFile"/>

                            <dxb:BarSubItemLink BarItemName="bsEdit"/>

                            <dxb:BarSubItemLink BarItemName="bsFormat"/>

                            <dxb:BarSubItemLink BarItemName="bsToolBars"/>

                            <dxb:BarSubItemLink BarItemName="bsHelp"/>

                        </dxb:Bar.ItemLinks>

                    </dxb:Bar>

                    <dxb:Bar Caption="Standard">

                        <dxb:Bar.DockInfo>

                            <dxb:BarDockInfo Row="1" Column="0" ContainerName="TopDockControl"/>

                        </dxb:Bar.DockInfo>

                        <dxb:Bar.ItemLinks>

                            <dxb:BarButtonItemLink BarItemName="bNew"/>

                            <dxb:BarButtonItemLink BarItemName="bOpen"/>

                            <dxb:BarButtonItemLink BarItemName="bSave"/>

                            <dxb:BarItemLinkSeparator/>

                            <dxb:BarButtonItemLink BarItemName="bPrint"/>

                            <dxb:BarItemLinkSeparator/>

                            <dxb:BarButtonItemLink BarItemName="bCut"/>

                            <dxb:BarButtonItemLink BarItemName="bCopy"/>

                            <dxb:BarButtonItemLink BarItemName="bPaste"/>

                            <dxb:BarItemLinkSeparator/>

                            <dxb:BarButtonItemLink BarItemName="bUndo"/>

                        </dxb:Bar.ItemLinks>

                    </dxb:Bar>

                    <dxb:Bar Caption="Font">

                        <dxb:Bar.DockInfo>

                            <dxb:BarDockInfo Row="2" Column="1" ContainerName="TopDockControl"/>

                        </dxb:Bar.DockInfo>

                        <dxb:Bar.ItemLinks>

                            <dxb:BarEditItemLink BarItemName="eFontFamily" />

                            <dxb:BarEditItemLink BarItemName="eFontSize"/>

                        </dxb:Bar.ItemLinks>

                    </dxb:Bar>

                    <dxb:Bar Caption="Format">

                        <dxb:Bar.DockInfo>

                            <dxb:BarDockInfo Row="2" Column="0" ContainerName="TopDockControl"/>

                        </dxb:Bar.DockInfo>

                        <dxb:Bar.ItemLinks>

                            <dxb:BarCheckItemLink BarItemName="bBold"/>

                            <dxb:BarCheckItemLink BarItemName="bItalic"/>

                            <dxb:BarCheckItemLink BarItemName="bUnderline"/>

                            <dxb:BarItemLinkSeparator/>

                            <dxb:BarCheckItemLink BarItemName="bLeft"/>

                            <dxb:BarCheckItemLink BarItemName="bCenter"/>

                            <dxb:BarCheckItemLink BarItemName="bRight"/>

                            <dxb:BarItemLinkSeparator/>

                            <dxb:BarCheckItemLink BarItemName="bBullets"/>

                        </dxb:Bar.ItemLinks>

                    </dxb:Bar>

                    <dxb:Bar Caption="Font">

                        <dxb:Bar.DockInfo>

                            <dxb:BarDockInfo ContainerName="RightDockControl"/>

                        </dxb:Bar.DockInfo>

                        <dxb:Bar.ItemLinks>

                            <dxb:BarButtonItemLink BarItemName="bFont"/>

                            <dxb:BarButtonItemLink BarItemName="bFontColor"/>

                            <dxb:BarItemLinkSeparator/>

                            <dxb:BarSubItemLink BarItemName="bsEdit"/>

                        </dxb:Bar.ItemLinks>

                    </dxb:Bar>

                    <dxb:Bar Caption="Status Bar" IsStatusBar="True" UseWholeRow="True">

                        <dxb:Bar.DockInfo>

                            <dxb:BarDockInfo ContainerName="BottomDockControl"/>

                        </dxb:Bar.DockInfo>

                        <dxb:Bar.ItemLinks>

                            <dxb:BarStaticItemLink BarItemName="bInfo"/>

                            <dxb:BarStaticItemLink BarItemName="bEmpty"/>

                        </dxb:Bar.ItemLinks>

                    </dxb:Bar>

                </dxb:BarManager.Bars>

                <Grid>

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="Auto"/>

                        <ColumnDefinition Width="*"/>

                        <ColumnDefinition Width="Auto"/>

                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>

                        <RowDefinition Height="Auto"/>

                        <RowDefinition Height="*"/>

                        <RowDefinition Height="Auto"/>

                    </Grid.RowDefinitions>

                    <dxb:BarContainerControl Name="LeftDockControl" Grid.Row="1" Orientation="Vertical"/>

                    <dxb:BarContainerControl Name="TopDockControl" Grid.ColumnSpan="3"/>

                    <dxb:BarContainerControl Name="RightDockControl" Grid.Column="2" Grid.Row="1" Orientation="Vertical"/>

                    <dxb:BarContainerControl Name="BottomDockControl" Grid.Row="2" Grid.ColumnSpan="3"/>

                </Grid>

            </dxb:BarManager>        

    </Grid>

</UserControl>

This is what the UI looks like…

The first two buttons will save the layout to a memory stream and restore it again in case changes where made during the application’s lifetime. The “Load External Layout” button will load an existing layout file that has been saved as an XML file and embedded as a project resource. Finally, the last two buttons will save and load the layout as a file in Silverlight’s isolated storage system.

Here’s the required code, including all the even handlers for the buttons’ click events:

...

using System.IO;

using System.IO.IsolatedStorage;

using DevExpress.Xpf.Core.Serialization;

using System.Reflection;

...

  

namespace SilverlightBarsApp {

    public partial class MainPage : UserControl {

        Stream stream;

        string IsolatedStorageFileName = "SilverlightBarsApp.Layout";

        IsolatedStorageFileStream isolatedStorageStream;

  

        public MainPage() {

            InitializeComponent();

            DXSerializer.SetSerializationID(barManager1, "BarManager");

            this.isolatedStorageStream = IsolatedStorageFile.GetUserStoreForApplication().OpenFile(

                IsolatedStorageFileName, FileMode.OpenOrCreate);

        }

  

        private void saveMemory_Click(object sender, RoutedEventArgs e) {

            stream = new MemoryStream();

            barManager1.SaveLayoutToStream(stream);

            MessageBox.Show("Layout has been saved", "Layout", MessageBoxButton.OK);

        }

  

        private void loadMemory_Click(object sender, RoutedEventArgs e) {

            stream.Position = 0;

            barManager1.RestoreLayoutFromStream(stream);

            MessageBox.Show("Layout has been restored", "Layout", MessageBoxButton.OK);

        }

  

        private void loadExternal_Click(object sender, RoutedEventArgs e) {

            Assembly thisExe = Assembly.GetExecutingAssembly();

            Stream file = thisExe.GetManifestResourceStream("SilverlightBarsApp.Layouts.layout3.xml");

            barManager1.RestoreLayoutFromStream(file);

        }

  

        private void saveIsolated_Click(object sender, RoutedEventArgs e) {

            isolatedStorageStream.SetLength(0);

            barManager1.SaveLayoutToStream(isolatedStorageStream);

        }

  

        private void loadIsolated_Click(object sender, RoutedEventArgs e) {

            isolatedStorageStream.Position = 0;

            barManager1.RestoreLayoutFromStream(isolatedStorageStream);

        }

    }

}

This code can be further enhanced to include routines for the loadMemory and loadIsolated events to check for the availability of an existing saved layout before attempting to load them into a stream. This example however only attempts to demonstrate the possible uses of the SaveLayoutToStream and RestoreLayoutFromStream methods of the DevExpress Silverlight BarManager component.

Posted Aug 26 2010, 11:18 AM by Emil Mesropian (DevExpress) with 3 comment(s)

Filed under: Silverlight, 2010.2, DXBars, Layout Persistence, AgBars

Filter Data Supplied to a WinForms Charts Control from a PivotGrid

You may recall a blog post by Paul along with a video tutorial that demonstrated how to bind a PivotGrid Control to a database and then use the pivot grid to populate a chart control within the same application.

Based on the records selected, the chart would automatically update to represent the selected data. We can take this a step further to fully harness the powerful data analysis features provided by the XtraPivotGrid Control. In this scenario, the end-user can select a number of records, then use the filter editor to further narrow down the selection of data. Based on the filter criteria applied, the chart will refresh and display the new data.

This provides you with unmatched flexibility and drill-down capabilities when creating a dashboard or an advanced data analysis application. Think of this in a scenario where the data is loaded in a PivotGrid control, the user modifies the selection to update the chart, then the whole view of the application can be exported as a report, file or printed out for physical distribution.

So here’s a simple example…

You can see that I’ve selected all the sample data in the Pivot Grid Control. The in-memory table that’s used to supply the chart with data can be represented as follows:

WinForms_Pivot_Charts_Complete_Data

So far so good… now let’s take a look at the main application form again. You’ll notice the filter editor control embedded in the upper-right corner. While the data is selected, a filter criterion can be created and applied to the data used to plot the chart. So for this example, let’s filter the data so that only records with a “Value” of 300 or higher are displayed on the chart.

WinForms_Pivot_Charts_Filter_Editor

Once the filter has been applied, the chart view is automatically updated…

WinForms_Pivot_Updated_Chart

The filtered data used to plot the series points can also be represented as follows:

WinForms_Pivot_Charts_Filtered_Data

Give it a try…

Download the source code for this example from CodeCentral: http://www.devexpress.com/Support/Center/e/E2412.aspx

Posted Aug 24 2010, 11:45 AM by Emil Mesropian (DevExpress) with 2 comment(s)

Filed under: Charts, WinForms, XtraCharts, Filter Editor, Pivot Grid, XtraPivotGrid

How to animate series with WPF Charts

In a previous post, I talked about an example where the chart control’s BoundDataChanged event handler was used to calculate a series summary and display that as a custom field within the chart’s legend box.

The BoundDataChanged event is triggered every time the chart control generates series points based on a data source. While this may not sound very exciting at first, it’s value increases when you consider all the possibilities of being able to perform certain routines before the series are drawn. From being able to retrieve live series data for display elsewhere in your UI, to animating the series as they are being drawn, the possibilities are endless.

So here’s an example… animating the series using series templates. We want the final product to draw the series as it is populating it with points:

WPF_Charts_Animate_Series

The following code is used within the BoundDataChanged event handlerto create the animation for the series template.

private void chartControl1_BoundDataChanged(object sender, RoutedEventArgs e) {

    seriesAnimation.Animations.Clear();

    foreach (Series series in chartControl1.Diagram.Series) {

        SeriesAnimation tmpSeriesAnim = new SeriesAnimation();

        SeriesAnimationAction seriesAction = new SeriesUnwindingAction();

        tmpSeriesAnim.Actions.Add(seriesAction);

        seriesAnimation.Animations.Add(tmpSeriesAnim);

        tmpSeriesAnim.TargetSeries = series;

    }

    DoubleAnimation animation = new DoubleAnimation(0, 1, new Duration(TimeSpan.FromSeconds(5)));

    seriesAnimation.BeginAnimation(ChartAnimationRecord.ProgressProperty, animation, HandoffBehavior.SnapshotAndReplace);

}

Give it a try…

Download the source code for this example from CodeCentral: http://www.devexpress.com/Support/Center/e/E2412.aspx

Also, keep an eye out on the DevExpress Channel and this blog for an upcoming video that demonstrates this feature in action.

Posted Aug 23 2010, 05:00 PM by Emil Mesropian (DevExpress) with no comments

Filed under: WPF, Charts, DXCharts

How to Create a Ribbon MDI End-User Report Designer (Coming in v2010 Vol 2)

In an earlier post, I announced Multiple Document (MDI) support will be introduced for the End-User Report Designer in the v2010 Vol 2 release of DXperience. Following that post, we published a video tutorial on how to build an MDI designer as well as how to upgrade an existing SDI designer to support multiple report loading and editing.

Our Reporting Suite also enables you to easily roll out your own Ribbon End-User Designer using DevExpress controls. The new ribbon-based designer too will support tabbed MDI and can be easily created and customized in a few short steps.

Check out the following video that demonstrates how to create your own ribbon-based End-Use Report Designer:

Posted Aug 19 2010, 04:31 PM by Emil Mesropian (DevExpress) with no comments

Filed under: XtraReports, Ribbon, Reporting, v2010.2, MDI, Designer

How to display custom information in a WPF Chart’s legend box

Chart legends usually contain static information or data that’s based on a specified range or category. Chances are, most legends that you’ll need to display in a chart are going to be populated with the series information represented on the chart. But here’s a possible scenario: Say you are creating a chart that’ll display series not based on a specific category set, range or percentage. While displaying each series, you’d like to present the total value of the data on the chart. One possible option would be to manually enter it in the chart’s title, but if you are working with data retrieved from a live source, then the best practice would be to create a routine to calculate the total value of the series and display it dynamically… in the legend box.

That’s exactly what we want to do here. I’ve already added the necessary XAML markup and the current view of my application in the designer is as follows:

WPF_Charts_Custom_Legend_VSDesigner

You can see that I’ve highlighted the textblocks within the legend box where I will be displaying the total value of all the series. This data is added using a ControlTemplate. The markup of the legend looks like this:

<dxc:ChartControl.Legend>

    <dxc:Legend>

        <dxc:Legend.Template>

            <ControlTemplate TargetType="dxc:Legend">

                <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" 

                                    BorderBrush="{TemplateBinding BorderBrush}" Padding="{TemplateBinding Padding}">

                    <Grid>

                        <Grid.RowDefinitions>

                            <RowDefinition />

                            <RowDefinition />

                        </Grid.RowDefinitions>

                        <ItemsControl ItemsPanel="{TemplateBinding ItemsPanel}" ItemTemplate="{TemplateBinding ItemTemplate}" 

                                                  ItemsSource="{Binding Path=Items, RelativeSource={RelativeSource TemplatedParent}}" />

                        <StackPanel Grid.Row="1" Orientation="Horizontal">

                            <TextBlock Text="Total: " Foreground="Black" />

                            <TextBlock Text="{Binding}" />

                        </StackPanel>

                    </Grid>

                </Border>

            </ControlTemplate>

        </dxc:Legend.Template>

    </dxc:Legend>

</dxc:ChartControl.Legend>

In the chart’s BoundDataChanged event handler, the summary is calculated and set to the legend’s DataContext property. The value is then assigned to the TextBlock’s text property.

void chart_BoundDataChanged(object sender, RoutedEventArgs e) {

    double total = 0;

    foreach (SeriesPoint point in series.Points)

        total += point.Value;

    chart.Legend.DataContext = total;

}

When launched, the application will calculate the total sum of all the legend items and display it in the specified text block:

WPF_Charts_Custom_Legend

Give it a try…

Download the source code for this example from CodeCentral: http://www.devexpress.com/Support/Center/e/E2409.aspx

Posted Aug 19 2010, 03:56 PM by Emil Mesropian (DevExpress) with 2 comment(s)

Filed under: WPF, Charts, DXCharts

Loading external XAML content into DocumentPanels – Docking Control for WPF (DXDocking)

In the midst of all the v2010.2 announcements, let’s a take a look at a feature that was introduced for the WPF Docking Library in the 2010.1 release of DXperience and deserves some attention.

To quickly summarize... a DocumentPanel is used to create either tabbed or MDI interfaces in our WPF Docking Library. You can populate each DocumentPanel by defining the content in XAML within the the appropriate tag. While this approach is ok, you may end up with lengthy and difficult to maintain XAML code if you are creating a complex interface using DXDocking.

To remedy this situation, we’ve developed another approach where you can define a Window, Page or UserControl in a separate XAML file, populate it with the appropriate content, then load it into the desired DocumentPanels at design time or runtime. This results in a more modularized application structure making it easier to maintain.

WPF_Docking_DocumentPanels

So in the above screenshot, you can see an example of multiple external XAML files being used to load the content for several DocumentPanels by setting their content to a Uri object referencing the external XAML file.

This feature can also be used to load external content when creating a new DocumentPanel object through code. The loaded UserControl can be accessed and modified using the DocumentPanel’s Control property.

WPF_Docking_DocumentPanels_Object

Note that when loading XAML files to define a Window or Page object, the objects are neither created nor accessible once loaded. In this case however, the root element of the loaded file can be accessed using the DocumentPanels’s Control property.

See it in action...

To see this feature in action and to learn from the sample code, please download the corresponding CodeCentral example: http://www.devexpress.com/Support/Center/e/E2410.aspx

Posted Aug 17 2010, 11:54 AM by Emil Mesropian (DevExpress) with no comments

Filed under: WPF, Docking, XAML, DXDocking, DocumentPanels

This Blog

Recent Posts

Archives

The Progress Bar - DevExpress XPF Blog