[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Expand]Controls and Libraries
 [Expand]Common Features
  Get More Help
 [Collapse]API Reference
  [Expand]DevExpress.DataAccess.UI
  [Expand]DevExpress.DataAccess.UI.Design
  [Expand]DevExpress.DataAccess.UI.EntityFramework
  [Expand]DevExpress.DataAccess.UI.Excel
  [Expand]DevExpress.DataAccess.UI.ObjectBinding
  [Expand]DevExpress.DataAccess.UI.Sql
  [Expand]DevExpress.DataAccess.UI.Wizard
  [Expand]DevExpress.DataAccess.UI.Wizard.Services
  [Expand]DevExpress.DataAccess.UI.Wizard.Views
  [Expand]DevExpress.DocumentView
  [Expand]DevExpress.DocumentView.Controls
  [Expand]DevExpress.LookAndFeel
  [Expand]DevExpress.LookAndFeel.Helpers
  [Expand]DevExpress.Skins
  [Expand]DevExpress.Snap
  [Expand]DevExpress.Snap.API.Native
  [Expand]DevExpress.Snap.Core
  [Expand]DevExpress.Snap.Core.API
  [Expand]DevExpress.Snap.Core.Fields
  [Expand]DevExpress.Snap.Core.Forms
  [Expand]DevExpress.Snap.Core.Options
  [Expand]DevExpress.Snap.Core.Services
  [Expand]DevExpress.Snap.Extensions
  [Expand]DevExpress.Snap.Extensions.Localization
  [Expand]DevExpress.Snap.Extensions.UI
  [Expand]DevExpress.Snap.Localization
  [Expand]DevExpress.Snap.Options
  [Expand]DevExpress.Snap.Services
  [Expand]DevExpress.Utils
  [Expand]DevExpress.Utils.Animation
  [Expand]DevExpress.Utils.Behaviors
  [Expand]DevExpress.Utils.Controls
  [Expand]DevExpress.Utils.DragDrop
  [Expand]DevExpress.Utils.Drawing
  [Expand]DevExpress.Utils.Filtering
  [Expand]DevExpress.Utils.Layout
  [Expand]DevExpress.Utils.Menu
  [Expand]DevExpress.Utils.MVVM
  [Expand]DevExpress.Utils.Taskbar
  [Expand]DevExpress.Utils.Taskbar.Core
  [Expand]DevExpress.Utils.UI.Localization
  [Expand]DevExpress.Utils.VisualEffects
  [Expand]DevExpress.Utils.Win
  [Expand]DevExpress.XtraBars
  [Expand]DevExpress.XtraBars.Alerter
  [Expand]DevExpress.XtraBars.Docking
  [Expand]DevExpress.XtraBars.Docking2010
  [Expand]DevExpress.XtraBars.Docking2010.Base
  [Expand]DevExpress.XtraBars.Docking2010.Customization
  [Expand]DevExpress.XtraBars.Docking2010.Views
  [Expand]DevExpress.XtraBars.Docking2010.Views.NativeMdi
  [Expand]DevExpress.XtraBars.Docking2010.Views.Tabbed
  [Expand]DevExpress.XtraBars.Docking2010.Views.Widget
  [Expand]DevExpress.XtraBars.Docking2010.Views.WindowsUI
  [Expand]DevExpress.XtraBars.FluentDesignSystem
  [Expand]DevExpress.XtraBars.Localization
  [Expand]DevExpress.XtraBars.Navigation
  [Expand]DevExpress.XtraBars.Ribbon
  [Expand]DevExpress.XtraBars.Ribbon.Gallery
  [Expand]DevExpress.XtraBars.Ribbon.ViewInfo
  [Expand]DevExpress.XtraBars.ToastNotifications
  [Expand]DevExpress.XtraBars.ToolbarForm
  [Expand]DevExpress.XtraBars.Utils
  [Expand]DevExpress.XtraBars.WinRTLiveTiles
  [Expand]DevExpress.XtraCharts
  [Expand]DevExpress.XtraCharts.Designer
  [Expand]DevExpress.XtraCharts.Wizard
  [Expand]DevExpress.XtraDataLayout
  [Expand]DevExpress.XtraDiagram
  [Expand]DevExpress.XtraDiagram.Docking
  [Expand]DevExpress.XtraDiagram.Options
  [Collapse]DevExpress.XtraEditors
   [Expand]AreaChartRangeControlClientView Class
   [Expand]AutoCloseOptions Class
   [Expand]BarCodeControl Class
   [Expand]BaseButton Class
   [Expand]BaseCheckEdit Class
   [Expand]BaseCheckedListBoxControl Class
   [Expand]BaseControl Class
   [Expand]BaseDateControl Class
   [Expand]BaseEdit Class
   [Expand]BaseImageListBoxControl Class
   [Expand]BaseListBoxControl Class
   [Expand]BaseSpinEdit Class
   [Expand]BaseStyleControl Class
   [Expand]BlobBaseEdit Class
   [Expand]BreadCrumbEdit Class
   [Expand]BreadCrumbHistory Class
   [Expand]BreadCrumbHistoryItem Class
    BreadCrumbMode Enumeration
   [Expand]BreadCrumbNode Class
   [Expand]BreadCrumbNodeCollection Class
   [Expand]ButtonEdit Class
   [Expand]CalcEdit Class
   [Expand]ChartRangeControlClientBase Class
   [Expand]ChartRangeControlClientDataProvider Class
   [Expand]ChartRangeControlClientGridOptions Class
   [Expand]ChartRangeControlClientRange Class
   [Expand]ChartRangeControlClientView Class
   [Expand]CheckButton Class
   [Expand]CheckedComboBoxEdit Class
   [Expand]CheckEdit Class
   [Expand]CheckedListBoxControl Class
   [Expand]ClientDataSourceProviderCustomizeSeriesEventArgs Class
   [Expand]ColorDialogOptions Class
   [Expand]ColorEdit Class
   [Expand]ColorPickEdit Class
   [Expand]ColorPickEditBase Class
   [Expand]ColorPickEditTooltipShowingEventArgs Class
    ColorTooltipFormat Enumeration
    ColumnFilterPopupMode Enumeration
   [Expand]ComboBox Class
   [Expand]ComboBoxEdit Class
   [Expand]ControlNavigator Class
   [Expand]ControlNavigatorButtonCollection Class
   [Expand]ControlNavigatorButtons Class
   [Expand]CustomizeTemplatedItemEventArgs Class
   [Expand]DataNavigator Class
   [Expand]DataNavigatorButtonCollection Class
   [Expand]DataNavigatorButtons Class
   [Expand]DateControl Class
   [Expand]DateEdit Class
   [Expand]DateTimeChartRangeControlClient Class
   [Expand]DateTimeChartRangeControlClientGridOptions Class
   [Expand]DateTimeChartRangeControlClientRange Class
    DateTimeFunctionsShowMode Enumeration
   [Expand]DateTimeRangeControlClient Class
    DropDownArrowStyle Enumeration
   [Expand]DropDownButton Class
    ExpressionEditorMode Enumeration
   [Expand]FilterControl Class
    FilterCriteriaDisplayStyle Enumeration
    FilterEditorViewMode Enumeration
    FindMode Enumeration
    FindPanelBehavior Enumeration
   [Expand]FontEdit Class
    FormatCondition Enumeration
    FormatConditionAboveBelowType Enumeration
    FormatConditionAutomaticType Enumeration
   [Expand]FormatConditionCollectionBase Class
    FormatConditionComparisonType Enumeration
    FormatConditionDataUpdateTrigger Enumeration
   [Expand]FormatConditionIconSet Class
   [Expand]FormatConditionIconSetIcon Class
   [Expand]FormatConditionRule2ColorScale Class
   [Expand]FormatConditionRule3ColorScale Class
   [Expand]FormatConditionRuleAboveBelowAverage Class
   [Expand]FormatConditionRuleAppearanceBase Class
   [Expand]FormatConditionRuleBase Class
    FormatConditionRuleChangeType Enumeration
   [Expand]FormatConditionRuleContains Class
   [Expand]FormatConditionRuleDataBar Class
   [Expand]FormatConditionRuleDataUpdate Class
   [Expand]FormatConditionRuleDateOccuring Class
   [Expand]FormatConditionRuleExpression Class
   [Expand]FormatConditionRuleIconSet Class
   [Expand]FormatConditionRuleMinMaxBase Class
   [Expand]FormatConditionRuleTopBottom Class
   [Expand]FormatConditionRuleUniqueDuplicate Class
   [Expand]FormatConditionRuleValue Class
    FormatConditionTopBottomType Enumeration
    FormatConditionUniqueDuplicateType Enumeration
    FormatConditionValueType Enumeration
   [Expand]FormatRuleBase Class
    FormBorderEffect Enumeration
   [Expand]GridLookUpEdit Class
   [Expand]GridLookUpEditBase Class
   [Expand]GroupCaptionCustomDrawEventArgs Class
    GroupCaptionCustomDrawEventHandler Delegate
   [Expand]GroupControl Class
    HighlightStyle Enumeration
    HotTrackSelectMode Enumeration
   [Expand]HScrollBar Class
   [Expand]HScrollBarBase Class
   [Expand]HyperLinkEdit Class
   [Expand]HyperlinkLabelControl Class
   [Expand]HyperlinkLabelControlAppearanceObject Class
   [Expand]HyperlinkLabelControlAppearanceOptions Class
    ImageAlignToText Enumeration
   [Expand]ImageComboBoxEdit Class
   [Expand]ImageEdit Class
   [Expand]ImageListBoxControl Class
    ImageLocation Enumeration
    LabelAutoSizeMode Enumeration
   [Expand]LabelControl Class
   [Expand]LabelControlAppearanceObject Class
   [Expand]LineChartRangeControlClientView Class
   [Expand]ListBoxControl Class
   [Expand]ListBoxDrawItemEventArgs Class
    ListBoxDrawItemEventHandler Delegate
   [Expand]LookUpEdit Class
   [Expand]LookUpEditBase Class
   [Expand]MarqueeProgressBarControl Class
   [Expand]MemoEdit Class
   [Expand]MemoExEdit Class
   [Expand]MRUEdit Class
   [Expand]NavigatorBase Class
   [Expand]NavigatorButton Class
   [Expand]NavigatorButtonBase Class
   [Expand]NavigatorButtonClickEventArgs Class
    NavigatorButtonClickEventHandler Delegate
   [Expand]NavigatorButtonCollectionBase Class
   [Expand]NavigatorButtonsBase Class
    NavigatorButtonsTextLocation Enumeration
    NavigatorButtonType Enumeration
   [Expand]NavigatorCustomButton Class
   [Expand]NavigatorCustomButtons Class
   [Expand]NavigatorExceptionEventArgs Class
    NavigatorExceptionEventHandler Delegate
   [Expand]NumericChartRangeControlClient Class
   [Expand]NumericChartRangeControlClientGridOptions Class
   [Expand]NumericChartRangeControlClientRange Class
   [Expand]NumericRangeControlClient Class
   [Expand]PanelControl Class
   [Expand]PickImage Class
   [Expand]PictureEdit Class
   [Expand]PopupBaseAutoSearchEdit Class
   [Expand]PopupBaseEdit Class
    PopupCloseMode Enumeration
   [Expand]PopupContainerControl Class
   [Expand]PopupContainerEdit Class
    PopupFilterMode Enumeration
   [Expand]PopupGalleryEdit Class
   [Expand]PopupGalleryEditGallery Class
   [Expand]PopupPanelOptions Class
   [Expand]ProgressBarBaseControl Class
   [Expand]ProgressBarControl Class
   [Expand]RadioGroup Class
   [Expand]RangeControl Class
   [Expand]RangeControlClientBase Class
    RangeControlDateTimeGridAlignment Enumeration
    RangeControlTimeSpanGridAlignment Enumeration
   [Expand]RangeTrackBarControl Class
   [Expand]RatingControl Class
   [Expand]ScrollBarBase Class
    ScrollBarType Enumeration
    ScrollUIMode Enumeration
   [Expand]SearchControl Class
   [Expand]SearchLookUpEdit Class
   [Expand]SeparatorControl Class
    ShowNullValuePromptOptions Enumeration
   [Expand]SidePanel Class
   [Expand]SimpleButton Class
   [Expand]SimpleControl Class
   [Expand]SparklineEdit Class
   [Expand]SpinEdit Class
   [Expand]SplitContainerControl Class
    SplitFixedPanel Enumeration
    SplitPanelVisibility Enumeration
   [Expand]SplitterControl Class
   [Expand]StyleController Class
   [Expand]StyleFormatConditionBase Class
   [Collapse]SvgImageBox Class
     SvgImageBox Members
     SvgImageBox Constructor
    [Expand]SvgImageBox Properties
    [Expand]SvgImageBox Events
    [Expand]SvgImageBox Methods
   [Expand]SvgImageBoxOptionsSelection Class
   [Expand]SvgImageItem Class
   [Expand]SvgImageItemAppearance Class
   [Expand]SvgImageItemAppearanceCollection Class
   [Expand]SvgImageItemCollection Class
   [Expand]SvgImageItemEventArgs Class
   [Expand]SvgImagePopupMenuShowingEventArgs Class
   [Expand]SvgImageSelection Class
   [Expand]SvgImageSelectionChangingEventArgs Class
    SvgImageSizeMode Enumeration
   [Expand]TextEdit Class
   [Expand]TileControl Class
    TileControlImageToTextAlignment Enumeration
    TileControlScrollMode Enumeration
   [Expand]TileGroup Class
   [Expand]TileGroupCollection Class
   [Expand]TileItem Class
   [Expand]TileItemAppearances Class
    TileItemCheckMode Enumeration
    TileItemClickEventHandler Delegate
   [Expand]TileItemCollection Class
    TileItemContentAlignment Enumeration
   [Expand]TileItemDragEventArgs Class
    TileItemDragEventHandler Delegate
   [Expand]TileItemElement Class
   [Expand]TileItemElementCollection Class
   [Expand]TileItemEventArgs Class
   [Expand]TileItemFrame Class
   [Expand]TileItemFrameCollection Class
    TileItemImageScaleMode Enumeration
    TileItemSize Enumeration
   [Expand]TimeEdit Class
   [Expand]TimeSpanChartRangeControlClient Class
   [Expand]TimeSpanChartRangeControlClientGridOptions Class
   [Expand]TimeSpanChartRangeControlClientRange Class
   [Expand]TimeSpanEdit Class
   [Expand]ToggleSwitch Class
   [Expand]TokenEdit Class
   [Expand]TrackBarControl Class
   [Expand]TreeListLookUpEdit Class
    VistaCalendarViewStyle Enumeration
   [Expand]VScrollBar Class
   [Expand]VScrollBarBase Class
    WaitAnimationOptions Enumeration
   [Expand]WindowsFormsSettings Class
   [Expand]XtraBaseArgs Class
   [Expand]XtraDialog Class
   [Expand]XtraDialogArgs Class
   [Expand]XtraFolderBrowserDialog Class
   [Expand]XtraForm Class
   [Expand]XtraInputBox Class
   [Expand]XtraInputBoxArgs Class
   [Expand]XtraMessageBox Class
   [Expand]XtraMessageBoxArgs Class
   [Expand]XtraOpenFileDialog Class
   [Expand]XtraPanel Class
   [Expand]XtraSaveFileDialog Class
   [Expand]XtraScrollableControl Class
   [Expand]XtraUserControl Class
   [Expand]ZoomTrackBarControl Class
  [Expand]DevExpress.XtraEditors.ButtonPanel
  [Expand]DevExpress.XtraEditors.Calendar
  [Expand]DevExpress.XtraEditors.Camera
  [Expand]DevExpress.XtraEditors.Container
  [Expand]DevExpress.XtraEditors.Controls
  [Expand]DevExpress.XtraEditors.CustomEditor
  [Expand]DevExpress.XtraEditors.DXErrorProvider
  [Expand]DevExpress.XtraEditors.Filtering
  [Expand]DevExpress.XtraEditors.Mask
  [Expand]DevExpress.XtraEditors.Persistent
  [Expand]DevExpress.XtraEditors.Repository
  [Expand]DevExpress.XtraEditors.ViewInfo
  [Expand]DevExpress.XtraFilterEditor
  [Expand]DevExpress.XtraGantt
  [Expand]DevExpress.XtraGantt.Base.Scheduling
  [Expand]DevExpress.XtraGantt.Exceptions
  [Expand]DevExpress.XtraGantt.Localization
  [Expand]DevExpress.XtraGantt.Scheduling
  [Expand]DevExpress.XtraGauges.Presets.Styles
  [Expand]DevExpress.XtraGauges.Win
  [Expand]DevExpress.XtraGauges.Win.Base
  [Expand]DevExpress.XtraGauges.Win.Gauges.Circular
  [Expand]DevExpress.XtraGauges.Win.Gauges.Digital
  [Expand]DevExpress.XtraGauges.Win.Gauges.Linear
  [Expand]DevExpress.XtraGauges.Win.Gauges.State
  [Expand]DevExpress.XtraGrid
  [Expand]DevExpress.XtraGrid.Columns
  [Expand]DevExpress.XtraGrid.EditForm
  [Expand]DevExpress.XtraGrid.FilterEditor
  [Expand]DevExpress.XtraGrid.Localization
  [Expand]DevExpress.XtraGrid.Views.BandedGrid
  [Expand]DevExpress.XtraGrid.Views.BandedGrid.ViewInfo
  [Expand]DevExpress.XtraGrid.Views.Base
  [Expand]DevExpress.XtraGrid.Views.Base.ViewInfo
  [Expand]DevExpress.XtraGrid.Views.Card
  [Expand]DevExpress.XtraGrid.Views.Card.ViewInfo
  [Expand]DevExpress.XtraGrid.Views.Grid
  [Expand]DevExpress.XtraGrid.Views.Grid.ViewInfo
  [Expand]DevExpress.XtraGrid.Views.Layout
  [Expand]DevExpress.XtraGrid.Views.Layout.Events
  [Expand]DevExpress.XtraGrid.Views.Layout.ViewInfo
  [Expand]DevExpress.XtraGrid.Views.Printing
  [Expand]DevExpress.XtraGrid.Views.Tile
  [Expand]DevExpress.XtraGrid.Views.WinExplorer
  [Expand]DevExpress.XtraGrid.WinExplorer
  [Expand]DevExpress.XtraLayout
  [Expand]DevExpress.XtraLayout.Converter
  [Expand]DevExpress.XtraLayout.Customization
  [Expand]DevExpress.XtraLayout.HitInfo
  [Expand]DevExpress.XtraLayout.Localization
  [Expand]DevExpress.XtraLayout.Utils
  [Expand]DevExpress.XtraMap
  [Expand]DevExpress.XtraMap.Printing
  [Expand]DevExpress.XtraNavBar
  [Expand]DevExpress.XtraNavBar.ViewInfo
  [Expand]DevExpress.XtraPdfViewer
  [Expand]DevExpress.XtraPdfViewer.Commands
  [Expand]DevExpress.XtraPdfViewer.Extensions
  [Expand]DevExpress.XtraPdfViewer.Localization
  [Expand]DevExpress.XtraPivotGrid
  [Expand]DevExpress.XtraPivotGrid.Data
  [Expand]DevExpress.XtraPrinting
  [Expand]DevExpress.XtraPrinting.Control
  [Expand]DevExpress.XtraPrinting.Preview
  [Expand]DevExpress.XtraPrintingLinks
  [Expand]DevExpress.XtraReports.UI
  [Expand]DevExpress.XtraRichEdit
  [Expand]DevExpress.XtraRichEdit.Commands
  [Expand]DevExpress.XtraRichEdit.Export
  [Expand]DevExpress.XtraRichEdit.Import
  [Expand]DevExpress.XtraRichEdit.Menu
  [Expand]DevExpress.XtraScheduler
  [Expand]DevExpress.XtraScheduler.Drawing
  [Expand]DevExpress.XtraScheduler.GoogleCalendar
  [Expand]DevExpress.XtraScheduler.Printing
  [Expand]DevExpress.XtraScheduler.Reporting
  [Expand]DevExpress.XtraScheduler.Reporting.UI
  [Expand]DevExpress.XtraScheduler.Services
  [Expand]DevExpress.XtraScheduler.Services.Implementation
  [Expand]DevExpress.XtraScheduler.UI
  [Expand]DevExpress.XtraSpellChecker
  [Expand]DevExpress.XtraSpellChecker.Localization
  [Expand]DevExpress.XtraSplashForm
  [Expand]DevExpress.XtraSplashScreen
  [Expand]DevExpress.XtraSpreadsheet
  [Expand]DevExpress.XtraSpreadsheet.Services
  [Expand]DevExpress.XtraTab
  [Expand]DevExpress.XtraTab.Buttons
  [Expand]DevExpress.XtraTab.ViewInfo
  [Expand]DevExpress.XtraTabbedMdi
  [Expand]DevExpress.XtraToolbox
  [Expand]DevExpress.XtraTreeList
  [Expand]DevExpress.XtraTreeList.Columns
  [Expand]DevExpress.XtraTreeList.Data
  [Expand]DevExpress.XtraTreeList.Localization
  [Expand]DevExpress.XtraTreeList.Menu
  [Expand]DevExpress.XtraTreeList.Nodes
  [Expand]DevExpress.XtraTreeList.Nodes.Operations
  [Expand]DevExpress.XtraTreeList.StyleFormatConditions
  [Expand]DevExpress.XtraTreeMap
  [Expand]DevExpress.XtraTreeMap.Printing
  [Expand]DevExpress.XtraVerticalGrid
  [Expand]DevExpress.XtraVerticalGrid.Events
  [Expand]DevExpress.XtraVerticalGrid.Localization
  [Expand]DevExpress.XtraVerticalGrid.Rows
  [Expand]DevExpress.XtraWaitForm
  [Expand]DevExpress.XtraWizard
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

SvgImageBox Class

Allows you to customize and display an SVG image and enables end-user interaction with individual image elements.

Namespace:DevExpress.XtraEditors
Assembly:DevExpress.Utils.v19.2.dll

Expanded Syntax

Expanded Remarks

Both the SvgImageBox and PictureEdit controls can display SVG images. Compared to the PictureEdit, the SvgImageBox provides the following additional features:

  • Design-time and runtime access to individual graphical image elements (rectangles, circles, paths, etc.)
  • Customization of the elements' visibility and appearance settings
  • Element hot-tracking
  • Element selection
  • Events allow you to respond to clicks and right-clicks on elements. For instance, you can show a context menu.

Expanded Demos

Expanded Display an SVG Image

You can specify an SVG image and its zoom mode at design time and runtime. Use the SvgImage and SizeMode properties.

Expanded Access and Customize Image Elements

An SVG image typically consists of multiple elements, which can be of two types:

  • Regular elements - Render graphical primitives (rectangles, circles, contours, text, etc.)
  • Group elements - Combine regular and other group elements. These are not visual elements.

Image elements are presented by SvgImageItem class objects. If an SvgImageItem is a group element, its SvgImageItem.IsGroup setting returns true.

At design time, click the control's smart tag and select Customize.

This action opens the control's designer, which allows you to access the hierarchical structure of the image items and change their appearance settings and visibility.

To allow users to customize image items at runtime, you can open this customization dialog in code, as demonstrated below. Ensure your project references the DevExpress.XtraDialogs assembly.

Note

For information on how the SvgImageBox displays image elements defined via the "use" element, see the SvgImageItem.Id topic.

In code, you can access the image elements by iterating through the following item collections:

  • RootItems - Provides access to a collection of root (bottommost) SVG items. Each item in this collection is an SvgImageItem class object.

  • SvgImageItem.Items - Gets the current group's children.

Identify Image Elements

To access individual items in code, you first need to know an item's identifier. The following properties can be helpful in this case.

  • SvgImageItem.Id - Gets or sets the item's unique identifier. The SVG image format allows IDs to be assigned to items via the id attribute. SvgImageItems that correspond to elements with missing id attributes have their Id properties set to null.

  • SvgImageItem.Tag - Use this property to associate custom data with the item. If image items in the source SVG file have empty IDs, use the Tag property to specify custom IDs (when required).

Find Image Elements

Given that you know an item's ID or Tag, you can find this item using the following API:

Example

The following code searches for items whose IDs start with the "background_pressed" sub-string and then hides these items.

Expanded Customize Appearance Settings of Image Elements

Use the following properties to customize items' appearance settings in the normal, hovered and selected states.

  • ItemAppearance - The default appearance settings applied to all image items.

    The same appearance settings are accessible when you select the Image root node in the hierarchy pane in the Designer.

    The following code specifies the Green color as the default background for all image items.

  • SvgImageItem.Appearance - A specific item's appearance settings, which override the default appearance settings. You can customize the appearance settings of individual items in the Designer and in code.

    The following example locates an item whose ID equals to "seat_3" and changes the item's background color.

Expanded Item Hot-tracking

The SvgImageBox control allows you to respond to the mouse cursor moving over image items. When the mouse cursor enters an image element's path or bounds, this element becomes "hovered".

You can access the currently hovered item with the HoveredItem property. To test whether the item is hovered see SvgImageItem.Hovered.

Hovered elements are painted according to the appearance settings specified by the ItemAppearance and SvgImageItem.Appearance properties. These appearance settings are initially empty. Thus, hovered items are not highlighted by default.

The following events fire when the mouse cursor moves over image items:

  • QueryHoveredItem - Allows you to specify a custom item as "hovered" when you move the mouse cursor over items, regardless of their visibility. For instance, you can specify a group as "hovered" when you hover over the group's item.
  • ItemEnter - Fires when the mouse cursor enters the item's graphical path or bounding rectangle.
  • ItemLeave - Fires when the mouse cursor leaves the item's graphical path or bounding rectangle.

Hot-tracking by Graphical Path or Bounding Rectangle

The ItemHitTestType property specifies whether to perform hit-testing by items' graphical paths or bounding boxes. The property accepts the following values:

  • Precise - An item is detected when a point is within the item's graphical path. Groups (see SvgImageItem.IsGroup) do not have visible contours, and, thus, they cannot be hit-tested and selected in this mode.

  • BoundingBox - An item is detected when a point is within the item's bounding rectangle. Groups are hit-tested in this mode when a point is within a rectangle within which all child items lie. This hit-test mode allows groups to be hovered (HoveredItem (see HoveredItem)) and selected.

Note

The SvgImageBox control initially allows users to hot-track and then select any primitive visual element (text, path objects, rectangles, etc.) with the mouse. In default Precise hit-test mode, groups are not hot-tracked and selected. See the QueryHoveredItem topic for an example of how to treat (hover over and select) groups and their inner visual primitives as a whole.

Expanded Item Selection

When a user clicks an item, it is automatically selected. There is no visual difference between selected and non-selected items, unless you specify distinct appearance settings for selected items via the ItemAppearance and/or SvgImageItem.Appearance property.

The SvgImageBox control supports two selection modes (SvgImageBoxOptionsSelection.SelectionMode):

  • Multiple (default) - A user can select multiple items by clicking on them. The SvgImageBoxOptionsSelection.UseCtrlToMultiSelect property specifies whether the CTRL key needs to be pressed to select items in this mode.
  • Single - A user can select one item. When he/she clicks a new item, the previously selected item is deselected.

To access currently selected items, select/deselect items and respond to item selection changes, use the following API:

  • Selection - Provides access to the currently selected items.

    The following code locates and selects an item by its ID (SvgImageItem.Id).

  • Select - Selects the specified item.
  • Unselect - Deselects the specified item.
  • SvgImageItem.Selected - Gets or sets whether the item is selected.
  • SelectionChanging - Fires when the item selection is about to be changed. Allows you to cancel the current operation..
  • SelectionChanged - A notification event, which is raised after the item selection has been changed.
Note

Groups are not selected by default when a user clicks within their bounds, since groups are not visual elements; they are just containers of visual primitives. If you need to treat (hover over and select) a group and its inner visual primitives as a whole, enable BoundingBox (see ItemHitTestType) hit-test mode and handle the QueryHoveredItem event, as demonstrated in the example below.

Example

The SvgImageBox control initially allows users to hover and select primitive visual elements (text, path objects, rectangles, etc.) with the mouse. This example prevents primitive elements from being hovered/selected. A user will be able to only hover and select entire groups. The example also shows how to access the selection in code.

Note

The complete sample code is available in the SvgImage Box module in the XtraEditors MainDemo.

Assume that an SVG image contains 'seat' image elements. Each 'seat' element is a group that consists of multiple elements (text, path objects and nested groups).

The structure of this image element is shown below:

To allow entire groups (seats) to be hovered and selected, use the following steps.

  • Enable the BoundingBox hit-test type via the ItemHitTestType property. This hit-test mode allows groups to be hit-tested, and thus hovered and selected.
  • Specify the appearance settings to paint the hovered and selected image elements.
  • Handle the QueryHoveredItem event. When a user hovers over an inner element of a 'seat' group, the QueryHoveredItem event handler sets the 'seat' group as hovered instead. If a user then clicks the hovered element with the mouse, this element (the 'seat' group) is selected.

  • Access selected elements ('seat' groups) with the Selection property

You can find the complete sample code in the SvgImage Box module in the XtraEditors MainDemo.

Expanded Item Click and Right-Click

The following events allow you to perform actions when an item is clicked and right-clicked:

  • ItemClick - Fires when an item is clicked.
  • PopupMenuShowing - Fires when a user right-clicks with the mouse. Allows you to display a context menu for image items.

Example

The following example shows how to handle the PopupMenuShowing event to display a context menu for image items. The menu contains commands to hide and show image items.

Expanded Inheritance Hierarchy

System.Object
    System.MarshalByRefObject
       System.ComponentModel.Component
          System.Windows.Forms.Control
             ControlBase
                SvgImageBox

Expanded See Also

Is this topic helpful?​​​​​​​