Oliver's Blog
  • React Data Grid - Tree Data and Banded Columns (v1.2)

    Our upcoming release v1.2 of the React Grid contains two new big features: support for hierarchical data, and banded columns.

    Hierarchical Data Support

    Hierarchical data can be displayed in a tree structure. This feature is made available through three new plugins: TreeDataState, CustomTreeData and TableTreeColumn.

    Tree Data

    A guide for the Tree Data feature as well as an online sample are already available. You can see in the demo that other Grid functionality like Sorting, Filtering, Selection etc. can be used in conjunction with Tree Data.

    Banded Columns

    The second big new feature is Banded Columns, which are visual groups of columns. The TableBandHeader plugin is responsible for the implementation.

    Banded Columns

    A guide page is available for Banded Columns, which includes samples. This online demo also includes a Banded Columns configuration. Note that columns can still be resized and rearranged when they are included in a band!

    Availability

    At this time, a beta version of React Grid v1.2 is available. You can install it using the next tag:

    npm i --save @devexpress/dx-react-core@next @devexpress/dx-react-grid@next
    npm i --save @devexpress/dx-react-grid-material-ui@next
    

    As usual, any feedback is greatly appreciated!

  • DevExtreme - New React Wrappers vs Native React Components (v18.1)

    This is exciting news: in our upcoming v18.1 release, we will have the full set of more than 65 new React components available, based on our existing DevExtreme widgets! This includes Charts, DataGrid, Scheduler, PivotGrid, and many others. The feature set, functionality and appearance of these React components is the same as that of the DevExtreme widgets.

    The new React components “wrap” the core implementations of the existing DevExtreme widgets, adapting them to the React core API. That’s why we call this new library DevExtreme React Wrappers. You can follow the development progress in this GitHub repo.

    DevExtreme Native React Components vs React Wrappers

    Two Sets of Components for React

    The availability of this new set of React components means that we now offer two different libraries for the platform. The library we released first currently has just one component (the React Data Grid), and we call it DevExtreme Reactive Components for React. Admittedly, the name is a bit complicated, but we need to distinguish from the same components that will be available for Vue in the near future! Charts and Scheduler are going to be released soon, and there is overall a lot of traction in this ongoing development.

    The DevExtreme Reactive Components were written from the ground up targeting the React and Vue libraries with a shared core. On the other hand, DevExtreme React Wrappers reuse our DevExtreme widgets and make them available as React components.

    Both approaches have their advantages. Please read on for more detailed explanations.

    Comparing Our Two Offerings

    To help you decide which of our libraries for React better suits your development needs, we categorized some of the differences:

    Core UI Packages (Building Blocks)

    DevExtreme Reactive Components are built on top of popular third party React UI libraries (react-bootstrap, reactstrap and material-ui). This means that our native components use the theming approaches supplied by these libraries, as well as included and third-party themes. Your application will benefit from the controls, the consistent APIs and the look&feel technologies that come with the libraries.

    The DevExtreme React Wrappers don’t rely on third-party UI building blocks. They are built with their own markup and style-sheets. They support our own theming system, which supplies customizable themes including Bootstrap and Material Design. You can also import any Bootstrap LESS file to customize these controls with your favorite paid or free Bootstrap theme.

    Level of Control

    DevExtreme Reactive Components use the native React approach where all UI state is exposed via component properties. This gives you complete control over all aspects of state, and the components can be fully controlled or uncontrolled or anywhere in between. The rendering layers of the components are separate packages, and they can be replaced partially or completely. Reactive Components are configured by composing ‘plugins’, providing granular configuration choices for individual use cases in your application.

    DevExtreme React Wrappers do not use this native React technique and therefore appear more like black boxes, components that perform some configuration work internally and invisibly. This can result in reduced manual control, but the automated mechanisms are smart, and you may well find it easier to configure root component properties rather than composing and configuring individual plugins. In the React sense, Wrappers can be used as uncontrolled and partially — not fully, since they expose only parts of their state! — controlled components.

    You may prefer one approach over the other — we feel that both have their merits.

    Feature Sets and Extensibility

    DevExtreme Reactive Components are less than a year old and offer fewer components, less functionality and a smaller feature set than DevExtreme React Wrappers. The individual components are growing and so is the library as a whole. This set of components is young, but due to the modular plugin-based concept, extensibility is fantastic, with the best possible opportunities for you to add your own features or customize built-in ones.

    DevExtreme React Wrappers are new for the upcoming v18.1 release, but since they are based on the DevExtreme widgets, they come with a much large feature set. However, some extensibility scenarios are not easy due to the comparatively monolithic component architecture — for instance, it’s not easy to replace the pager for the Data Grid with a custom one. Fortunately the Grid supports pager customization in itself, so you probably don’t need to replace the pager! This is meant as an illustrative example of a complicated customization scenario.

    Here is a table with some comparison aspects.

    Aspect DevExtreme React Wrappers DevExtreme Reactive Components
    Components 65+ React Components. Option to use feature/widget from the growing DevExtreme library. React Data Grid, Charts and Scheduler planned. Option to use native React components from react-bootstrap, reactstrap or material-ui.
    Performance Built-in features provide rich high-performance functionality. Features modularized in plugins, immutable state, memoization, React optimizations, Virtual DOM and lightweight markup result in extreme performance.
    Server-Side Rendering Not Available Yet Available
    Using Redux Available Available
    Ease of Configuration Easy, configuration via root component properties Moderate, configuration via plugin composition

    Code Examples

    To leave you with an impression of the structure used for configuration purposes by the two component libraries, we have prepared the following examples. Both are shown using uncontrolled (stateful) modes.

    DevExtreme Data Grid React Wrapper

    <DataGrid
      dataSource={rows}
      paging={{ pageSize: 10 }}
      filterRow={{ visible: true }}
      columns={[
        { dataField: 'orderId', caption: 'Order ID' },
        { dataField: 'country', sortOrder: 'asc' },
        { dataField: 'region' },
        { dataField: 'date', dataType: 'date', filterValue: '2013/04/01' },
        { dataField: 'amount', format: 'currency' }
      ]}
    />
    

    DevExtreme Native React Data Grid

    <Grid
      rows={rows}
      columns={[
        { name: 'orderId', title: 'Order ID' },
        { name: 'country', title: 'Country' },
        { name: 'region', title: 'Region' },
        { name: 'date', title: 'Date' },
        { name: 'amount', title: 'Amount' },
      ]}>
      <FilteringState
        defaultFilters={[{ columnName: 'date', value: '2013/04/01' }]} />
      <SortingState
        defaultSorting={[
        { columnName: 'country', direction: 'asc' } ]} />
      <PagingState
        defaultPageSize={10} />
      <IntegratedFiltering />
      <IntegratedSorting />
      <IntegratedPaging />
      <CurrencyTypeProvider for={['amount']} />
      <Table />
      <TableHeaderRow showSortingControls />
      <TableFilterRow />
      <PagingPanel />
      <Toolbar />
    </Grid>
    

    What Do You Think?

    We are excited about the launch of this full set of new React Components. We would love to see the great React apps you’ll build with our DevExtreme React Wrappers. In v18.1, they will be in a CTP stage. We are considering further improvements, such as server-side rendering support, Virtual DOM utilization for rendering, better state management capabilities, etc. Please try the components, and let us know which improvements you would like to see in the RTM release.

    If you have any questions about the distinction between the two libraries for React, please describe your use cases and we will do our best to help you choose the appropriate DevExtreme Components for React.

    Join the Webinar

    Sign up for our upcoming “New in v18.1 - DevExtreme HTML / JS Controls” webinar where you’ll have a chance to see our React libraries demonstrated live and ask any questions about our React, Vue, or other client-side offerings.

    Join the webinar: https://attendee.gotowebinar.com/register/9186007723238099714

  • .NET Charts - Data Aggregation Improvements (v18.1)

    The details in this post apply to the ChartControl in WPF and Windows Forms, the WebChartControl in ASP.NET WebForms, and the control created by the DevExpress.Chart() function when using ASP.NET MVC Extensions.

    Additional flexibility for MeasureUnit

    When visualizing DateTime values using a chart, it is possible to customize the detail level by setting the DateTimeScaleOptions.MeasureUnit property to a predefined unit (e.g. day, hour, minute, second, etc).

    For our upcoming v18.1 release, we extended this functionality by introducing the property MeasureUnitMultiplier, which accepts an integer value. For instance, by setting the MeasureUnit to Minute and the MeasureUnitMultiplier to 15, you configure a measure unit of 15 minutes.

    MeasureUnitMultiplier

    It is important to mention that this feature is not currently compatible with work time and work day options. When a custom measure unit is specified, i.e. with a MeasureUnitMultiplier other than 1, these features are disabled.

    Custom aggregation functions

    In addition to custom measure units, we also improved the Data Aggregation mechanism by introducing a custom aggregation function API.

    To enable this feature, set the AggregateFunction property for the axis scale to Custom and specify a callback that calculates aggregated values.

    Custom Aggregate Function

    Below is the sample custom aggregation function that transforms values into OHLC format for the image above.

    XYDiagram diagram = chartControl.Diagram as XYDiagram;
    diagram.AxisX.DateTimeScaleOptions.AggregateFunction = AggregateFunction.Custom;
    diagram.AxisX.DateTimeScaleOptions.CustomAggregateFunction = new OhlcAggregateFunction();
    
    class OhlcAggregateFunction : CustomAggregateFunction {
      public override double[] Calculate(GroupInfo groupInfo) {
        double open = groupInfo.Values1.First();
        double close = groupInfo.Values1.Last();
        double high = Double.MinValue;
        double low = Double.MaxValue;
    
        foreach (double value in groupInfo.Values1) {
          if (high < value) high = value;
          if (low > value) low = value;
        }
    
        return new double[] { high, low, open, close };
      }
    }
    
  • WinForms Map Control - Runtime Editor for Vector Items (v18.1)

    Our Map Control can display several standard types of vector items: lines, ellipses, polygons, pushpins, callouts and others. We have had feedback from users of the control that indicated a need for more interactive capabilities, and so we decided to take our feature set to the next level in our upcoming v18.1 release by providing built-in support for vector item editing at runtime.

    Runtime editing UI

    We developed a special toolbar panel to provide quick access to most common editor functions:

    Map Editor Toolbar Panel

    The toolbar supports these operations:

    • Undo/Redo
    • Select/Transform/Edit
    • Add new elements (Pushpin, Path, Polyline, Dot, Ellipse, Rectangle, Line)

    An end user can switch to Edit mode, draw new elements and edit or delete vertices. Here is an illustration showing some editing steps:

    Editing Operations

    Modified vector layer data can be persisted to a file using one of the supported formats (Shapefile, SVG and KML). This enables scenarios where end users load custom shapefiles in a mapping application and modify the shapefile data in place, without requiring a third-party tool.

    Programmatic feature set

    If you would like to provide your own toolbar or similar custom UI, you can take advantage of new MapControl API members to trigger the functionality from code:

    private void OnDefaultModeChecked(object sender, ItemClickEventArgs e) {
      mapControl1.MapEditor.ResetEditMode();
    }
    
    private void OnTransformModeChecked(object sender, ItemClickEventArgs e) {
      mapControl1.MapEditor.SetTransformMode();
    }
    
    private void OnEditModeChecked(object sender, ItemClickEventArgs e) {
      mapControl1.MapEditor.SetEditMode();
    }
    
    private void OnCreatePathClicked(object sender, ItemClickEventArgs e) {
      mapControl1.MapEditor.SetCreateMode(CreatableMapItemKind.Path);
    }
    

    Allowing runtime editing

    To activate the new feature in MapControl, use the MapControl.MapEditor.ShowEditorPanel property. Each layer can be excluded individually by setting the property VectorItemsLayer.AllowEditItems to false.

    Finally, it is important to mention that the editing feature is compatible with Geographical and Cartesian coordinate systems, as well as the newly introduced Circular Scrolling functionality.

  • Reporting - Table and Cross-Tab Enhancements (v18.1)

    Pivot Grid - Improved Cross-Tab Report Rendering

    When you create a cross-tab report that contains a lot of data and spans multiple pages horizontally, the pivot grid displays row headers on the first document page only. This is inconvenient while viewing such a document since you need to navigate to the first page when you want to determine what row data the report shows:

    Old cross-tab rendering

    This issue is due to a limitation of our report generation engine. Customers have asked us to improve the situation for many years and we finished this feature implementation in v18.1:

    Improved cross-tab rendering

    We extended the PivotGridOptionsPrint class with the PrintRowAreaOnEveryPage property to allow you to manage this behavior for the PivotGridControl and the Reporting XRPivotGrid control. Do not forget to set theXtraReport.VerticalContentSplitting property to Smart to render the best possible document appearance.

    XRTable — Improved Hidden Column Processing

    A common case for reports representing invoices is that a Discount column must be shown conditionally (e.g. only if a client has discounts available, or depending on an application setting), and column sizes must be recalculated taking presence or absence of the column into account. In the past, we didn’t have a good solution for this scenario, so that results were often ugly:

    Showing Discount column Discount column hidden

    For v18.1, we extended the XRTable class with the new property ProcessHiddenCellMode, which defines how empty space is redistributed when table cells are hidden.

    ProcessHiddenCellMode options

    The ProcessHiddenCellMode property is in effect for cells that are hidden using one of the following approaches:

    • The Visible property of a cell is set to False at design time using the Visual Studio Properties window
    • An expression is specified for the Visible property of a cell
    • The Visible property of a cell is set to false at runtime (e.g. by handling the event XRControl.BeforePrint).
    • In an XRControl.BeforePrint event handler, the Cancel property on the event args is set to true.

    The following modes are available for processing hidden cells:

    • StretchPreviousCell: The cell located to the left of the hidden cell is stretched to occupy the available space. If the hidden cell is the first in the row, the next cell to the right is stretched.

    StretchPreviousCell

    • StretchNextCell: The cell located to the right of the hidden cell is stretched to occupy the available space. If the hidden cell is the last in the row, the previous cell to the left is stretched.

    StretchNextCell

    • ResizeCellsEqually: All visible cells are resized to equally share the space that a hidden cell frees up.

    ResizeCellsEqually

    • ResizeCellsProportionally: All visible cells are resized to proportionally share the space that a hidden cell frees up, based on their individual widths compared to the table width.

    ResizeCellsProportionally

    • DecreaseTableWidth: The table width is decreased and visible cells are shifted close the gap left by the hidden cell. Cell sizes don’t change.

    DecreaseTableWidth

    • LeaveEmptySpace (the default mode, corresponding to previous behavior): Empty space remains where the cell is hidden, other cells are not affected.
  • WinForms Charts - Performance Improvements (v18.1)

    For our Windows Forms ChartControl, performance is one of our highest development priorities. In the upcoming v18.1 release, we had the goal of improving rendering performance for High DPI resolutions. We also optimized the internal data processing algorithms to minimize the amount of memory allocated by the ChartControl.

    DirectX Rendering

    To render 2D charts, the existing ChartControl implementation used the GDI+ API exclusively. Given the performance of this API, large data visualizations on 4K displays were slow, especially in real-time applications.

    We examined some possible solutions and decided to use hardware accelerated DirectX rendering, which is already supported by our Grid Control.

    In our tests, the resulting rendering speed is up to nine times as fast as GDI+ mode in UHD resolution (up to four times as fast in Full HD).

    Rendering Speed

    Please note that while the rendering in DirectX mode is meant to be the same as in GDI+ mode, there are a few minor exceptions. For example, we’re having some issues with scale break rendering at this time, which we hope to resolve before release time. It is probably to be expected that a different rendering platform can generate slightly different results for complex visualizations, so we can’t guarantee pixel-perfect copies of the GDI+ renditions.

    Optimized Data Processing

    We have redesigned internal data structures used to store information in data-bound mode, in order to minimize memory consumption of the ChartControl. This chart illustrates the impressive results, with memory consumption down about 60%.

    Memory Usage

    Crosshair Cursor Optimization

    We achieved a final remarkable improvement in our Crosshair Cursor implementation. In v18.1, the Crosshair Cursor is displayed immediately and without lag, even in real-time charting applications where a large numbers of Series items are displayed simultaneously.

    The following animated image is quite large, my apologies in case it takes a few moments to load! I decided to include it anyway since it illustrates our improvements nicely. Note how, for the v17.2 chart, the horizontal scrolling of values stops completely when the mouse with the Crosshair Cursor is being moved. For v18.1, the same scrolling animation continues unchanged in the same scenario.

    Crosshair Cursor Optimization

  • WinForms Accordion Control - Hamburger Menu and Navigation Pane support (v18.1)

    The Hamburger Menu

    The Hamburger Menu has a long history. It was introduced by Norm Cox in the early 1990s as a part of the user interface for the Xerox Star, but became much more popular in the last decade when mobile app developers were looking for ways to accommodate complex user interfaces on small mobile phone screens. The Hamburger Menu has become a universal UI element: three stacked horizontal bars are instantly recognized by end users today as “the main menu”. The metaphor is widely used in web and desktop applications, including modern UWP ones. For example, here’s a screenshot from a Microsoft Store “Mail” app:

    Mail App

    With our v18.1 release, the Hamburger Menu makes its way into the WinForms controls suite. Since our WinForms package already included lots of navigation and menu controls, we decided to extend existing feature sets rather than add a new control.

    We integrated the Hamburger Menu in our Accordion Control: Set the ViewType property to HamburgerMenu and the Accordion Control supports a collapsed state where it mimics the behavior of Windows 10 apps and shows a narrow strip of icons.

    Narrow Strip of Icons

    Depending on the property OptionsHamburgerMenu.DisplayMode, the Hamburger Menu expands in three different modes. In Overlay mode, the expanded Accordion is drawn on top of the neighboring content.

    Overlay Mode

    Expanding the Hamburger Menu with the Inline mode applied forces the adjoining content to squeeze, making way for the Accordion.

    Inline Mode

    Finally, the option Minimal is similar to Overlay when the menu is expanded, but it reminds of mobile devices when the Accordion Control collapses, leaving the Hamburger Menu button as the only visible control part.

    Minimal Mode

    The Accordion Control has been a useful modern replacement for the original Navigation Bar ever since we first introduced it. It has several important advantages — in a nutshell, in case you have missed out so far:

    • Rich item header customization capabilities, enabling custom controls element-specific context buttons
    • DirectX rendering with support for visual effects like Acrylic (this will be available in v18.1)
    • An intuitive object hierarchy with AccordionElement objects as the only child elements used by the control
    • A modern appearance with visually minimalistic items

    However, the early Accordion Control didn’t support the Navigation Pane View, a well-known navigation bar view inspired by Outlook and commonly used in modern applications.

    In the upcoming v18.1 release, the Accordion Control now supports the Navigation Pane appearance, in the latest style shown in Microsoft UWP applications. To enable it, simply switch the RootDisplayMode property to AccordionControlRootDisplayMode.Footer.

    Navigation Pane

    As always, your feedback counts

    Tell us what you think! Do you see these features making their way into your future projects? How do you feel about the Hamburger Menu in classic desktop apps?

    Before I let you go, just a quick question - are you guys using 24/7 app monitoring services such as Logify? Our support team plans on using Logify with some of our enterprise customers and we’d love to know what you guys think of 24/7 app monitoring.

  • DevExtreme Angular - Server Side Rendering Support (v18.1)

    In DevExtreme v17.2, we made the jQuery dependency optional. In that context, we were talking about Server Side Rendering (SSR) for Angular in our blog post. Now we have finished implementing this feature for the DevExtreme v18.1 release, which means that you can use any DevExtreme widget in your Angular Universal (SSR) application. We have prepared an article in our documentation to help you create your own Angular Universal applications with DevExtreme Angular Components, or to add Server-Side Rendering into an existing Angular application.

    Transfer State for better performance

    Additionally, we have implemented caching of AJAX requests on page loading to make the Server-Side Rendering more effective since data can be loaded from a cache when it is accessed a second time from the client. Caching uses Server Transfer State, so this module must be imported into the server module of your application as described in our documentation. With the caching mechanism in place, client-side components are initialized much faster and display issues due to the swap of server-side and client-side markup are mostly eliminated.

    Impressive performance gains

    Check out the improved loading speed in our Golf Club demo. We have also prepared a new technical example universal-angular.

    Golf Club Demo

    Performance Comparison

    Limitations

    The Server Side environment has some technical limitations. The most important one is that it is impossible to detect the size of a client window. As a result, the rendering of some widgets is not exactly the same on the server as it would be on a client. For example:

    • The Scheduler renders its general container structure, but not the appointments.
    • The Form uses the “desktop” layout, which may turn out to be the incorrect one in case the user is on a mobile device.
    • The Toolbar renders completely, not taking any adaptivity considerations into account (which determine hidden items based on available space).

    The visualization widgets and the PivotGrid will render only a placeholder on the server, with the full rendering taking place on the client.

    Overlays, such as Popup, Popover, Toast, Tooltip etc. are not displayed on the server, since this is unnecessary for SSR purposes.

    We are interested in your feedback

    We don’t intend to stop working on this feature just yet! Please let us know your thoughts and your specific use cases or priorities, and we’ll do our very best to keep moving DevExtreme in the right direction.

  • Reporting - Designer Improvements (v18.1)

    We have implemented several Report Designer enhancements that will become available with the upcoming v18.1 release. Wherever you invoke the Report Designer, in Visual Studio, a desktop application or a web application, the new features are available.

    Adjusting sizes of labels and label content

    Two new context menu commands are available to automatically adjust the sizes of labels and their content. Right-click a label and select the Fit Bounds To Text command to resize the label to the minimum size required to accommodate its static text content.

    Fit Bounds to Text

    And vice versa, use the Fit Text to Bounds command to adjust the label font size so that the static text content occupies the entire available space in the label.

    Fit Text to Bounds

    Note that if you enable the WordWrap option for the label, long text may wrap to multiple lines while the Fit Text to Bounds command changes the font size.

    We also introduced an API that performs similar operations in case you are interested in fitting dynamic label data at runtime. We’ll provide details on this API in our documentation soon.

    Resizing table columns and rows proportionally

    When you include tables in your reports, you can now use new context menu commands to set the same size for multiple rows and columns, just like similar table formatting commands in Microsoft Word.

    Select the required rows, or an entire table, right-click the selected area and choose Distribute Rows Evenly in the context menu.

    Distribute Rows Evenly

    If cell content is partially visible in the resulting row, the row automatically increases its height to fit the content, and also adjusts the other rows accordingly.

    Similarly, use the command Distribute Columns Evenly with multiple selected columns.

    Distribute Columns Evenly

    Adjusting report control bounds to fit the parent container

    When you need to insert a control (e.g. an XRPictureBox or an XRRichText) into a container (e.g. a table cell), you can use the new Fit Bounds to Container command to position the control perfectly within the container.

    Fit Bounds to Container

    Note that by setting the AnchorHorizontal and/or AnchorVertical properties, a control can remain anchored while you resize its container.

    Tables that include controls in their cells are exported to XLS and XLSX formats perfectly after the Fit Bounds to Container command has been used to adjust control sizes. This result was more difficult to achieve in the past, and export files often contained superfluous extra rows or columns.

    Line Widths are now given in pixels

    The type used for the XRLine.LineWidth property is changed in v18.1, from Int32 to Single. More importantly, line width is now considered a pixel value, not a value in report units anymore. This change was introduced for consistency with the XRControl.BorderWidth property, and the change means that report designs can accommodate very thin lines now, and that line thickness will always be consistent throughout a report.

    Note that this is a breaking change! We will soon provide adequate breaking change documentation, including details about a switch that reverts to the old behavior.

    Smart copy/paste operations

    When you copy report controls to the clipboard and then paste them to a new container or band, the original positions of the controls are now preserved.

    Smart Copy/Paste

    If another control already occupies the target position, the pasted controls are repositioned by an offset of 10 units on both axes.

  • WinForms Overlay Forms - Coming soon in v18.1

    Many of you are probably familiar with the Splash Screen Manager and its Wait Forms. These tiny elements implement a solution for the popular scenario of displaying a loading panel to indicate that the application is currently busy.

    Wait Forms are good enough when all code executes in the UI thread and the application UI locks up. However, with asynchronous operations natively supported in C# using the async and await keywords, more programmers employ background threads to execute long-running processes, such as massive calculations or data retrieval operations. In these scenarios, the application UI remains responsive, and even when a Wait Form is being shown, end users can still drag and drop child form elements, modify editor content, press Ribbon buttons etc. This is undesirable and a different solution is required for these scenarios.

    Responding to your requests, the Splash Screen Manager supports a new element, the Overlay Form, starting with the v18.1 release. The Overlay Form is a semi-transparent splash screen that runs in a background thread and prevents access to a control or form by displaying an overlay.

    An associated control is grayed out when the Overlay Form is active, providing a clear visual message indicating that this control is currently unavailable. The control can be a Form, but you can also pass a basic Control. For instance, it would make sense to pass a root control on a form to ShowOverlayForm, so that the form itself could still be dragged by its title bar.

    Overlay Form

    To show and hide Overlay Forms, call the static ShowOverlayForm and CloseOverlayForm methods in code.

    using DevExpress.XtraSplashScreen;
    
    // ... Inside a form class,
    // two small helper methods:
    
    IOverlaySplashScreenHandle ShowProgressPanel() {
      // Pass "this" to use the current form as the "parent"
      return SplashScreenManager.ShowOverlayForm(this);
    }
    
    void CloseProgressPanel(IOverlaySplashScreenHandle handle) {
      if(handle != null)
        SplashScreenManager.CloseOverlayForm(handle);
    }
    
    // Finally, within the context of a long-running operation:
    
    IOverlaySplashScreenHandle handle = null;
    
    try {
      handle = ShowProgressPanel();
    
      // Now perform the long-running operation while
      // the Overlay Form overlaps the current form.
    }
    finally {
      CloseProgressPanel(handle);
    }
    

    You don’t need to manually modify Overlay Form appearance, as it automatically adapts to the current application skin. However, if required, you can edit look-and-feel settings or implement a custom painter to change the appearance of an Overlay Form completely.

1
2 3 4 5 6 7 8
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, Delphi, HTML5 or iOS & Android development. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2018 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners