Blogs

The Progress Bar - DevExpress XPF Blog

August 2010 - Posts

  • 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.

    WPF_Project_Wizard_VB_Video

  • 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.

    WPF_Bars_Layout_Persistence_Video

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

  • 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.

    Silverlight_Bars_Layout_Persistence_Tutorial

  • 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:

    WPF_Project_Wizard_Template_VB_NET

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

    WPF_Project_Wizard

    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.

  • 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:):

       1: <UserControl xmlns:lc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"  xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
       2:     xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
       3:     xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"  x:Class="SilverlightBarsApp.MainPage"
       4:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       5:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       6:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       7:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       8:     mc:Ignorable="d"
       9:     d:DesignHeight="300" d:DesignWidth="400">
      10:     <Grid x:Name="LayoutRoot" Background="White" dx:StyleManager.ApplyApplicationTheme="True">
      11:         <Grid.RowDefinitions>
      12:             <RowDefinition Height="Auto"/>
      13:             <RowDefinition Height="*"/>
      14:         </Grid.RowDefinitions>
      15:         <StackPanel Orientation="Horizontal" Margin="10" Height="40" Grid.Row="0">
      16:             <Button x:Name="saveMemory" Content="Save to Memory Stream" Width="200" Click="saveMemory_Click" />
      17:             <Button x:Name="loadMemory" Content="Load from Memory Stream" Width="200" Click="loadMemory_Click" />
      18:             <Button x:Name="loadExternal" Content="Load External Layout" Width="200" Click="loadExternal_Click" />
      19:             <Button x:Name="saveIsolated" Content="Save to Isolated Storage" Width="200" Click="saveIsolated_Click" />
      20:             <Button x:Name="loadIsolated" Content="Load from Isolated Storage" Width="200" Click="loadIsolated_Click" />
      21:         </StackPanel>
      22:             <dxb:BarManager x:Name="barManager1" CreateStandardLayout="False" Grid.Row="1">
      23:                 <dxb:BarManager.Items>
      24:                     <dxb:ToolbarListItem Name="toolbarListItemCore" Content="Toolbars"/>
      25:  
      26:                     <dxb:BarButtonItem Name="bNew" Content="New" Glyph="/SilverlightBarsApp;component/Images/Icons/new-16x16.png"/>
      27:                     <dxb:BarButtonItem Name="bOpen" Content="Open" Glyph="/SilverlightBarsApp;component/Images/Icons/open-16x16.png"/>
      28:                     <dxb:BarButtonItem Name="bClose" Content="Close" Glyph="/SilverlightBarsApp;component/Images/Icons/close-16x16.png"/>
      29:                     <dxb:BarButtonItem Name="bSave" Content="Save" Glyph="/SilverlightBarsApp;component/Images/Icons/save-16x16.png"/>
      30:                     <dxb:BarButtonItem Name="bSaveAs" Content="Save As..." Glyph="/SilverlightBarsApp;component/Images/Icons/save-as-16x16.png"/>
      31:                     <dxb:BarButtonItem Name="bPrint" Content="Print" Glyph="/SilverlightBarsApp;component/Images/Icons/print-16x16.png"/>
      32:                     <dxb:BarButtonItem Name="bExit" Content="Exit"/>
      33:  
      34:                     <dxb:BarButtonItem Name="bUndo" Content="Undo" Glyph="/SilverlightBarsApp;component/Images/Icons/undo-16x16.png"/>
      35:                     <dxb:BarButtonItem Name="bCut" Content="Cut" Glyph="/SilverlightBarsApp;component/Images/Icons/cut-16x16.png"/>
      36:                     <dxb:BarButtonItem Name="bCopy" Content="Copy" Glyph="/SilverlightBarsApp;component/Images/Icons/copy-16x16.png"/>
      37:                     <dxb:BarButtonItem Name="bPaste" Content="Paste" Glyph="/SilverlightBarsApp;component/Images/Icons/paste-16x16.png"/>
      38:                     <dxb:BarButtonItem Name="bClear" Content="Clear"/>
      39:                     <dxb:BarButtonItem Name="bSelectAll" Content="Select All"/>
      40:                     <dxb:BarButtonItem Name="bFind" Content="Find" Glyph="/SilverlightBarsApp;component/Images/Icons/find-16x16.png"/>
      41:                     <dxb:BarButtonItem Name="bReplace" Content="Replace" Glyph="/SilverlightBarsApp;component/Images/Icons/replace-16x16.png"/>
      42:  
      43:                     <dxb:BarButtonItem Name="bFont" Content="Font..." Glyph="/SilverlightBarsApp;component/Images/Icons/font-16x16.png"/>
      44:                     <dxb:BarButtonItem Name="bFontColor" Content="Font Color" Glyph="/SilverlightBarsApp;component/Images/Icons/font-color-16x16.png"/>
      45:  
      46:                     <dxb:BarCheckItem Name="bBullets" Content="Bullets" Glyph="/SilverlightBarsApp;component/Images/Icons/bullets-16x16.png"/>
      47:  
      48:                     <dxb:BarButtonItem Name="bHome" Content="Developer Express on the Web"/>
      49:                     <dxb:BarButtonItem Name="bAbout" Content="About"/>
      50:  
      51:  
      52:                     <dxb:BarCheckItem Name="bBold" Content="Bold" Glyph="/SilverlightBarsApp;component/Images/Icons/bold-16x16.png"/>
      53:                     <dxb:BarCheckItem Name="bItalic" Content="Italic" Glyph="/SilverlightBarsApp;component/Images/Icons/italic-16x16.png"/>
      54:                     <dxb:BarCheckItem Name="bUnderline" Content="Underline" Glyph="/SilverlightBarsApp;component/Images/Icons/underline-16x16.png"/>
      55:                     <dxb:BarCheckItem Name="bLeft" Content="Left" GroupIndex="1" Glyph="/SilverlightBarsApp;component/Images/Icons/left-align-16x16.png"/>
      56:                     <dxb:BarCheckItem Name="bCenter" Content="Center" GroupIndex="1" Glyph="/SilverlightBarsApp;component/Images/Icons/center-align-16x16.png"/>
      57:                     <dxb:BarCheckItem Name="bRight" Content="Right" GroupIndex="1" Glyph="/SilverlightBarsApp;component/Images/Icons/right-align-16x16.png"/>
      58:  
      59:                     <dxb:BarStaticItem Name="bInfo" Content="Info" Glyph="/SilverlightBarsApp;component/Images/Icons/info-16x16.png" ItemWidth="150"/>
      60:                     <dxb:BarStaticItem Name="bEmpty" ItemWidth="100" Content="Static Text" />
      61:  
      62:                     <dxb:BarEditItem Name="eFontFamily" EditWidth="150" Content="Font:">
      63:                         <dxb:BarEditItem.EditSettings>
      64:                             <dxe:ComboBoxEditSettings IsTextEditable="False"/>
      65:                         </dxb:BarEditItem.EditSettings>
      66:                     </dxb:BarEditItem>
      67:                     <dxb:BarEditItem Name="eFontSize" EditWidth="60" Content="Font Size:">
      68:                         <dxb:BarEditItem.EditSettings>
      69:                             <dxe:ComboBoxEditSettings PopupMaxHeight="250" IsTextEditable="False"/>
      70:                         </dxb:BarEditItem.EditSettings>
      71:                     </dxb:BarEditItem>
      72:  
      73:                     <dxb:BarSubItem Name="bsFile" Content="File">
      74:                         <dxb:BarSubItem.ItemLinks>
      75:                             <dxb:BarButtonItemLink BarItemName="bNew"/>
      76:                             <dxb:BarButtonItemLink BarItemName="bOpen"/>
      77:                             <dxb:BarButtonItemLink BarItemName="bClose"/>
      78:                             <dxb:BarItemLinkSeparator/>
      79:                             <dxb:BarButtonItemLink BarItemName="bSave"/>
      80:                             <dxb:BarButtonItemLink BarItemName="bSaveAs"/>
      81:                             <dxb:BarItemLinkSeparator/>
      82:                             <dxb:BarButtonItemLink BarItemName="bPrint"/>
      83:                             <dxb:BarItemLinkSeparator/>
      84:                             <dxb:BarButtonItemLink BarItemName="bExit"/>
      85:                         </dxb:BarSubItem.ItemLinks>
      86:                     </dxb:BarSubItem>
      87:                     <dxb:BarSubItem Name="bsEdit" Content="Edit">
      88:                         <dxb:BarSubItem.ItemLinks>
      89:                             <dxb:BarButtonItemLink BarItemName="bUndo"/>
      90:                             <dxb:BarItemLinkSeparator/>
      91:                             <dxb:BarButtonItemLink BarItemName="bCut"/>
      92:                             <dxb:BarButtonItemLink BarItemName="bCopy"/>
      93:                             <dxb:BarButtonItemLink BarItemName="bPaste"/>
      94:                             <dxb:BarItemLinkSeparator/>
      95:                             <dxb:BarButtonItemLink BarItemName="bClear"/>
      96:                             <dxb:BarButtonItemLink BarItemName="bSelectAll"/>
      97:                             <dxb:BarItemLinkSeparator/>
      98:                             <dxb:BarButtonItemLink BarItemName="bFind"/>
      99:                             <dxb:BarButtonItemLink BarItemName="bReplace"/>
     100:                         </dxb:BarSubItem.ItemLinks>
     101:                     </dxb:BarSubItem>
     102:                     <dxb:BarSubItem Name="bsFormat" Content="Format">
     103:                         <dxb:BarSubItem.ItemLinks>
     104:                             <dxb:BarButtonItemLink BarItemName="bFont"/>
     105:                             <dxb:BarButtonItemLink BarItemName="bFontColor"/>
     106:                             <dxb:BarItemLinkSeparator/>
     107:                             <dxb:BarCheckItemLink BarItemName="bBullets"/>
     108:                         </dxb:BarSubItem.ItemLinks>
     109:                     </dxb:BarSubItem>
     110:                     <dxb:BarSubItem Name="bsToolBars" Content="Toolbars">
     111:                         <dxb:BarSubItem.ItemLinks>
     112:                             <dxb:ToolbarListItemLink BarItemName="toolbarListItemCore"/>
     113:                         </dxb:BarSubItem.ItemLinks>
     114:                     </dxb:BarSubItem>
     115:                     <dxb:BarSubItem Name="bsHelp" Content="Help">
     116:                         <dxb:BarSubItem.ItemLinks>
     117:                             <dxb:BarButtonItemLink BarItemName="bHome"/>
     118:                             <dxb:BarItemLinkSeparator/>
     119:                             <dxb:BarButtonItemLink BarItemName="bAbout"/>
     120:                         </dxb:BarSubItem.ItemLinks>
     121:                     </dxb:BarSubItem>
     122:                 </dxb:BarManager.Items>
     123:                 <dxb:BarManager.Bars>
     124:                     <dxb:Bar Caption="MainMenu" x:Name="MainMenu" IsMainMenu="True" UseWholeRow="True">
     125:                         <dxb:Bar.DockInfo>
     126:                             <dxb:BarDockInfo ContainerType="Top"/>
     127:                         </dxb:Bar.DockInfo>
     128:                         <dxb:Bar.ItemLinks>
     129:                             <dxb:BarSubItemLink BarItemName="bsFile"/>
     130:                             <dxb:BarSubItemLink BarItemName="bsEdit"/>
     131:                             <dxb:BarSubItemLink BarItemName="bsFormat"/>
     132:                             <dxb:BarSubItemLink BarItemName="bsToolBars"/>
     133:                             <dxb:BarSubItemLink BarItemName="bsHelp"/>
     134:                         </dxb:Bar.ItemLinks>
     135:                     </dxb:Bar>
     136:                     <dxb:Bar Caption="Standard">
     137:                         <dxb:Bar.DockInfo>
     138:                             <dxb:BarDockInfo Row="1" Column="0" ContainerName="TopDockControl"/>
     139:                         </dxb:Bar.DockInfo>
     140:                         <dxb:Bar.ItemLinks>
     141:                             <dxb:BarButtonItemLink BarItemName="bNew"/>
     142:                             <dxb:BarButtonItemLink BarItemName="bOpen"/>
     143:                             <dxb:BarButtonItemLink BarItemName="bSave"/>
     144:                             <dxb:BarItemLinkSeparator/>
     145:                             <dxb:BarButtonItemLink BarItemName="bPrint"/>
     146:                             <dxb:BarItemLinkSeparator/>
     147:                             <dxb:BarButtonItemLink BarItemName="bCut"/>
     148:                             <dxb:BarButtonItemLink BarItemName="bCopy"/>
     149:                             <dxb:BarButtonItemLink BarItemName="bPaste"/>
     150:                             <dxb:BarItemLinkSeparator/>
     151:                             <dxb:BarButtonItemLink BarItemName="bUndo"/>
     152:                         </dxb:Bar.ItemLinks>
     153:                     </dxb:Bar>
     154:                     <dxb:Bar Caption="Font">
     155:                         <dxb:Bar.DockInfo>
     156:                             <dxb:BarDockInfo Row="2" Column="1" ContainerName="TopDockControl"/>
     157:                         </dxb:Bar.DockInfo>
     158:                         <dxb:Bar.ItemLinks>
     159:                             <dxb:BarEditItemLink BarItemName="eFontFamily" />
     160:                             <dxb:BarEditItemLink BarItemName="eFontSize"/>
     161:                         </dxb:Bar.ItemLinks>
     162:                     </dxb:Bar>
     163:                     <dxb:Bar Caption="Format">
     164:                         <dxb:Bar.DockInfo>
     165:                             <dxb:BarDockInfo Row="2" Column="0" ContainerName="TopDockControl"/>
     166:                         </dxb:Bar.DockInfo>
     167:                         <dxb:Bar.ItemLinks>
     168:                             <dxb:BarCheckItemLink BarItemName="bBold"/>
     169:                             <dxb:BarCheckItemLink BarItemName="bItalic"/>
     170:                             <dxb:BarCheckItemLink BarItemName="bUnderline"/>
     171:                             <dxb:BarItemLinkSeparator/>
     172:                             <dxb:BarCheckItemLink BarItemName="bLeft"/>
     173:                             <dxb:BarCheckItemLink BarItemName="bCenter"/>
     174:                             <dxb:BarCheckItemLink BarItemName="bRight"/>
     175:                             <dxb:BarItemLinkSeparator/>
     176:                             <dxb:BarCheckItemLink BarItemName="bBullets"/>
     177:                         </dxb:Bar.ItemLinks>
     178:                     </dxb:Bar>
     179:                     <dxb:Bar Caption="Font">
     180:                         <dxb:Bar.DockInfo>
     181:                             <dxb:BarDockInfo ContainerName="RightDockControl"/>
     182:                         </dxb:Bar.DockInfo>
     183:                         <dxb:Bar.ItemLinks>
     184:                             <dxb:BarButtonItemLink BarItemName="bFont"/>
     185:                             <dxb:BarButtonItemLink BarItemName="bFontColor"/>
     186:                             <dxb:BarItemLinkSeparator/>
     187:                             <dxb:BarSubItemLink BarItemName="bsEdit"/>
     188:                         </dxb:Bar.ItemLinks>
     189:                     </dxb:Bar>
     190:                     <dxb:Bar Caption="Status Bar" IsStatusBar="True" UseWholeRow="True">
     191:                         <dxb:Bar.DockInfo>
     192:                             <dxb:BarDockInfo ContainerName="BottomDockControl"/>
     193:                         </dxb:Bar.DockInfo>
     194:                         <dxb:Bar.ItemLinks>
     195:                             <dxb:BarStaticItemLink BarItemName="bInfo"/>
     196:                             <dxb:BarStaticItemLink BarItemName="bEmpty"/>
     197:                         </dxb:Bar.ItemLinks>
     198:                     </dxb:Bar>
     199:                 </dxb:BarManager.Bars>
     200:                 <Grid>
     201:                     <Grid.ColumnDefinitions>
     202:                         <ColumnDefinition Width="Auto"/>
     203:                         <ColumnDefinition Width="*"/>
     204:                         <ColumnDefinition Width="Auto"/>
     205:                     </Grid.ColumnDefinitions>
     206:                     <Grid.RowDefinitions>
     207:                         <RowDefinition Height="Auto"/>
     208:                         <RowDefinition Height="*"/>
     209:                         <RowDefinition Height="Auto"/>
     210:                     </Grid.RowDefinitions>
     211:                     <dxb:BarContainerControl Name="LeftDockControl" Grid.Row="1" Orientation="Vertical"/>
     212:                     <dxb:BarContainerControl Name="TopDockControl" Grid.ColumnSpan="3"/>
     213:                     <dxb:BarContainerControl Name="RightDockControl" Grid.Column="2" Grid.Row="1" Orientation="Vertical"/>
     214:                     <dxb:BarContainerControl Name="BottomDockControl" Grid.Row="2" Grid.ColumnSpan="3"/>
     215:                 </Grid>
     216:             </dxb:BarManager>        
     217:     </Grid>
     218: </UserControl>

    This is what the UI looks like…

    Silverlight_Bars_Persistence_UI

    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:

       1: ...
       2: using System.IO;
       3: using System.IO.IsolatedStorage;
       4: using DevExpress.Xpf.Core.Serialization;
       5: using System.Reflection;
       6: ...
       7:  
       8: namespace SilverlightBarsApp {
       9:     public partial class MainPage : UserControl {
      10:         Stream stream;
      11:         string IsolatedStorageFileName = "SilverlightBarsApp.Layout";
      12:         IsolatedStorageFileStream isolatedStorageStream;
      13:  
      14:         public MainPage() {
      15:             InitializeComponent();
      16:             DXSerializer.SetSerializationID(barManager1, "BarManager");
      17:             this.isolatedStorageStream = IsolatedStorageFile.GetUserStoreForApplication().OpenFile(
      18:                 IsolatedStorageFileName, FileMode.OpenOrCreate);
      19:         }
      20:  
      21:         private void saveMemory_Click(object sender, RoutedEventArgs e) {
      22:             stream = new MemoryStream();
      23:             barManager1.SaveLayoutToStream(stream);
      24:             MessageBox.Show("Layout has been saved", "Layout", MessageBoxButton.OK);
      25:         }
      26:  
      27:         private void loadMemory_Click(object sender, RoutedEventArgs e) {
      28:             stream.Position = 0;
      29:             barManager1.RestoreLayoutFromStream(stream);
      30:             MessageBox.Show("Layout has been restored", "Layout", MessageBoxButton.OK);
      31:         }
      32:  
      33:         private void loadExternal_Click(object sender, RoutedEventArgs e) {
      34:             Assembly thisExe = Assembly.GetExecutingAssembly();
      35:             Stream file = thisExe.GetManifestResourceStream("SilverlightBarsApp.Layouts.layout3.xml");
      36:             barManager1.RestoreLayoutFromStream(file);
      37:         }
      38:  
      39:         private void saveIsolated_Click(object sender, RoutedEventArgs e) {
      40:             isolatedStorageStream.SetLength(0);
      41:             barManager1.SaveLayoutToStream(isolatedStorageStream);
      42:         }
      43:  
      44:         private void loadIsolated_Click(object sender, RoutedEventArgs e) {
      45:             isolatedStorageStream.Position = 0;
      46:             barManager1.RestoreLayoutFromStream(isolatedStorageStream);
      47:         }
      48:     }
      49: }

    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.

  • 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…

    WinForms_Pivot_Charts_Data_Selection

    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

  • 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.

       1: private void chartControl1_BoundDataChanged(object sender, RoutedEventArgs e) {
       2:     seriesAnimation.Animations.Clear();
       3:     foreach (Series series in chartControl1.Diagram.Series) {
       4:         SeriesAnimation tmpSeriesAnim = new SeriesAnimation();
       5:         SeriesAnimationAction seriesAction = new SeriesUnwindingAction();
       6:         tmpSeriesAnim.Actions.Add(seriesAction);
       7:         seriesAnimation.Animations.Add(tmpSeriesAnim);
       8:         tmpSeriesAnim.TargetSeries = series;
       9:     }
      10:     DoubleAnimation animation = new DoubleAnimation(0, 1, new Duration(TimeSpan.FromSeconds(5)));
      11:     seriesAnimation.BeginAnimation(ChartAnimationRecord.ProgressProperty, animation, HandoffBehavior.SnapshotAndReplace);
      12: }

    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.

  • 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:

    Reporting_Suite_MDI_Ribbon_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:

       1: <dxc:ChartControl.Legend>
       2:     <dxc:Legend>
       3:         <dxc:Legend.Template>
       4:             <ControlTemplate TargetType="dxc:Legend">
       5:                 <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" 
       6:                                     BorderBrush="{TemplateBinding BorderBrush}" Padding="{TemplateBinding Padding}">
       7:                     <Grid>
       8:                         <Grid.RowDefinitions>
       9:                             <RowDefinition />
      10:                             <RowDefinition />
      11:                         </Grid.RowDefinitions>
      12:                         <ItemsControl ItemsPanel="{TemplateBinding ItemsPanel}" ItemTemplate="{TemplateBinding ItemTemplate}" 
      13:                                                   ItemsSource="{Binding Path=Items, RelativeSource={RelativeSource TemplatedParent}}" />
      14:                         <StackPanel Grid.Row="1" Orientation="Horizontal">
      15:                             <TextBlock Text="Total: " Foreground="Black" />
      16:                             <TextBlock Text="{Binding}" />
      17:                         </StackPanel>
      18:                     </Grid>
      19:                 </Border>
      20:             </ControlTemplate>
      21:         </dxc:Legend.Template>
      22:     </dxc:Legend>
      23: </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.

       1: void chart_BoundDataChanged(object sender, RoutedEventArgs e) {
       2:     double total = 0;
       3:     foreach (SeriesPoint point in series.Points)
       4:         total += point.Value;
       5:     chart.Legend.DataContext = total;
       6: }

    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

  • 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

  • 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
  • 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:

    How to Create an MDI Reports Designer and to upgrade from an existing single document End-User Designer

  • 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:

    Report_Designer_MDI

    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:

    Report_Designer_Ribbon_MDI

    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:

    Report_Designer_MDI_Tile_Horizontal

    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

  • 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...

    1. Calculators
    2. Color Pickers
    3. 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
      Silverlight_WPF_Calculator_Editor
    • Calculator displayed within a dropdown window (PopupCalcEdit)
      Silverlight_WPF_Popup_Calculator_Editor

    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)
      Silverlight_WPF_Color_Picker_Editor
    • Color picker displayed within a dropdown window (PopupColorEdit)
      Silverlight_WPF_Popup_Color_Picker_Editor

    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 Charyou can specify any character which is echoed in the password box.
    • Maximum Password Lengthrestricts passwords typed by an end-user.
    • Input Validation
  • 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…

    1. Syntax Highlighting
    2. Line Numbering
    3. Matching Bracket Identification
    4. Error Highlighting
    5. Inclusion of the “Find” and “Find & Replace” items in the context menu
    6. 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:

    XtraReports_Script_Editor

    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

Next page »
More from DevExpress
Live Chat
Have a pre-sales question?
Need assistance with your evaluation?
We are here to help.
Chat is one of the many ways you can contact members of the DevExpress Team. We are available Monday-Friday between 8:30am and 5:00pm Pacific Time.
If you need additional product information, require pre-sales assistance, or want help with your order, write to us at info@devexpress.com or call us at
+1 (818) 844-3383.