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

New Image Editor Controls for WPF and Silverlight (Coming in v2010 vol 2)

In my previous post, I introduced the calculators, color pickers and password box editor controls that will be released in v2010.2 as part of the DXEditors library for both WPF and Silverlight.

Today, I’ll present two new image editor controls that are designed to allow you to quickly load and display images. To reiterate, these controls will also be available for WPF as well as Silverlight.

The standalone image editor (ImageEdit):
WPF_Silverlight_Image_Editor

Image displayed within a dropdown window (PopupImageEdit):
WPF_Silverlight_Popup_Image_Editor

Both image editor controls include the following features:

Supported Image Formats – Bitmap, JPEG, GIF and PNG.
Configurable Image Size – An image can be resized to fill the image box, stretched or shrunk to fit the size of the box.
Built-in Menu –end-users can cut, copy, paste, delete, load or save an image. It’s also possible to remove the default commands and/or add custom commands. This menu is automatically shown when the mouse pointer enters the image, and is automatically hidden when the mouse pointer leaves the image.
Easy Image Loading – clicking within an image editor shows the Open dialog allowing you to select and load an image file.
Auto-Sizing Image Popup – if the size of an image is smaller than the size of an editor’s popup window, the image popup is automatically resized to fit the image size.
Localizable UI

Posted Aug 17 2010, 10:15 AM by Emil Mesropian (DevExpress) with 9 comment(s)

Filed under: WPF, Silverlight, v2010.2, Editors, DXEditors

How to build a new MDI Reports Designer or upgrade an existing one – XtraReports (Coming in v2010 vol 2)

In my previous post, I wrote about the multiple document interface support in the End-User Reports Designer that’ll be shipped with the upcoming 2010.2 release of DXperience. In addition to the reports designer that is installed as part of XtraReports, we provide you with the ability to create your own designer so that it can be further customized and/or integrated into your application project.

Creating a new reports designer with multiple document support is easy and fast. Check out the following video that demonstrates how to build a new designer as well as how to upgrade an existing SDI designer to support working with multiple reports:

Posted Aug 12 2010, 02:56 PM by Emil Mesropian (DevExpress) with 1 comment(s)

Filed under: XtraReports, Reporting, ExMedia, MDI, Reports Designer, 2010.2

MDI End-User Reports Designer for XtraReports (Coming in v2010 vol 2)

Up until now, the only way to work with multiple reports in a single application environment was to load and edit the reports using the XtraReports designer for Visual Studio. The End-User Reports Designer was limited to one report per application instance.

With the upcoming v2010 vol 2 release of DXperience, we have upgraded the End-Use Reports Designer to support the Multiple-Document Interface (MDI). What does this let you do? It allows you to load as many reports as you’d like into the same report designer instance, quickly switch between them and copy/paste data and controls across multiple report layouts. By default, reports are loaded and displayed as tabs:

As you can see from the above example (you may click the image for a larger version), a report, containing a sub-report has been loaded into the end-user designer. The sub-report control on “masterReport1” was double-clicked to display the embedded sub-report “DetailReport1” in a separate tab. There are of course, five other reports loaded as well.

This feature is also supported by the Ribbon End-User Report Designer:

You can choose to display the reports in one of the following MDI views: Cascade, Tile Horizontal, and Tile Vertical. Here’s a screenshot of two reports tiled horizontally:

This functionality is also available for you to create your own End-User Designer and include it in your application. We’ll take a look at how to accomplish that in the next blog post and training video.

Note that the report designer cannot be compiled against or launched using the .NET Framework Client Profile. The full .NET Framework is required for the end-user designer to function.

To see these features in action, check out the corresponding video on the DevExpress Channel: http://tv.devexpress.com/XtraReportsMDIEndUserDesigner.movie

Posted Aug 11 2010, 10:25 AM by Emil Mesropian (DevExpress) with 11 comment(s)

Filed under: v2010.2

New Editor Controls for WPF and Silverlight (Coming in v2010 vol 2)

The DevExpress Editors Library for WPF as well as Silverlight provide you with a collection of controls that give you the flexibility of using editor controls to display formatted data as well as provide interactive and enhanced editing functionality. To further extend our data editors collection, we have created three new editor controls in the upcoming v2010 vol 2 release of DXperience.

These controls are...

Calculators
Color Pickers
Password Box

Keep reading for each individual control’s features…

1. Calculators

Two variations of a calculator control that can be used to perform arithmetic operations:

Standalone Calculator
Calculator displayed within a dropdown window (PopupCalcEdit)

The following features are included in the calculator control:

Basic Math Functions (add, subtract, multiply, etc.)
Memory Operations - store, recall, add (M+) and subtract (M-)
Keyboard and Mouse Wheel Support
Configurable Display Format (currency, percentage, etc.)
Calculation History
Customizable Error Descriptions
Localizable UI

2. Color Pickers

Two color picker controls allow you to select from the standard color palette or from the RGBA color space.

Standalone color picker (ColorEdit)
Color picker displayed within a dropdown window (PopupColorEdit)

Features included in the color picker control:

20 Preset Color Palettes - Apex, Aspect, Civic, Office, Grayscale, Urban, etc.
Standard Colors Palette - includes standard colors (e.g. Red, Green, Yellow, etc.)
Recent Colors Palette - includes custom colors which can be added using the “More Colors” dialog.
Unlimited Number of Color Palettes - you can replace default palettes (Theme Colors, Gradient Theme Colors and Standard Colors) or append any number of custom color palettes.
Configurable Palette Layout - you can manually specify the number of color columns. Alternatively, the number of columns is automatically calculated.
Customizable Default Color
Optional Empty Color
Localizable UI

3. Password Box

The new PasswordBoxEdit control lets you handle password entry.
Silverlight_WPF_Password_Box_Editor

Features included in the password box control:

Configurable Password Char – you can specify any character which is echoed in the password box.
Maximum Password Length – restricts passwords typed by an end-user.
Input Validation

Posted Aug 11 2010, 09:40 AM by Emil Mesropian (DevExpress) with 6 comment(s)

Filed under: WPF, Silverlight, v2010.2, Editors, DXEditors

Script Editor Enhancements in XtraReports – v2010 vol 2

In the 2009.3 release of DXperience, we introduced a new script editor for XtraReports. While it was a major improvement over the previous version, it still lacked some features that we as developers have come to expect from conventional development environments.

With the upcoming v2010 vol 2 release of DXperience, we’ll be introducing a number of features to the script editor that are designed to enhance the developer experience. These features are as follows…

Syntax Highlighting
Line Numbering
Matching Bracket Identification
Error Highlighting
Inclusion of the “Find” and “Find & Replace” items in the context menu
Code-Awareness of the Property Grid

Click on the image below to see the first five features highlighted on the Ribbon End-User Designer interface:

So what is the “Code-Awareness” feature?

Let’s say you’ve created a method that is wired to a certain event (in this case the BeforePrint event of Report1). You’ve added some code and would like to use the same method for the Detail band’s BeforePrint event. Previously, you would have to manually select the script event and either create a new event handler using the “New” item in the combo-box or type in the name of the existing method yourself. In this version, we have incorporated a lightweight code analysis feature that allows XtraReports to determine if there are already methods with the appropriate signature. If so, XtraReports will add these methods to the combo-box of the event in the Property Grid.

How does all this work?

The visual improvements such as line numbering, error highlighting, and matching bracket identification are now possible because we’ve integrated our advanced XtraRichEdit control into the script editor. The “code-awareness” or code-analysis features are powered by functionality that has been extracted from our award-winning CodeRush and Refactor! Pro tools into a stand-alone assembly called “DevExpress.CodeParser.dll”. Therefore, when creating your own End-User Designer, you’ll need to deploy this additional assembly as well.

See it in action:

Check out the corresponding video on the DevExpress Channel: http://tv.devexpress.com/XtraReportsNewScriptEditor.movie

To learn how to create your own End User Designer, follow the steps in the following video: http://tv.devexpress.com/XtraReportsEUDesigner.movie

Posted Aug 04 2010, 03:44 PM by Emil Mesropian (DevExpress) with 12 comment(s)

Filed under: v2010.2

This Blog

Recent Posts

Archives

The Progress Bar - DevExpress XPF Blog