Skip to main content
All docs
V24.1

SvgImageBox.QueryUniqueItemId Event

Allows you to assign unique Ids to cloned elements that the control creates when the SVG file contains use elements.

Namespace: DevExpress.XtraEditors

Assembly: DevExpress.Utils.v24.1.dll

NuGet Packages: DevExpress.Utils, DevExpress.Wpf.Core

Declaration

public event QueryUniqueItemIdEventHandler QueryUniqueItemId

Event Data

The QueryUniqueItemId event's data class is QueryUniqueItemIdEventArgs. The following properties provide information specific to this event:

Property Description
Id Gets or sets the Id of the currently processed element.
ItemIds Gets the current collection of item Ids.
UseElementId Gets the use element’s Id.

Remarks

The SVG use element allows you to reuse an SVG shape from elsewhere in an SVG document.

For instance, see the following sample SVG file where nine use elements all reference the key group (a rounded rectangle with the “[key]” text inside).

<?xml version="1.0" encoding="utf-8"?>
<svg width="230" height="230" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <g id="key">
      <path d="M0, 5A5 5 0 0 1 5, 0L45, 0A5 5 0 0 1 50, 5L50, 45A5 5 0 0 1 45, 50L5, 50A5 5 0 0 1 0, 45z" 
            fill="#FFFFFF" stroke="#41719C" fill-rule="evenodd" />
      <text x="25" text-anchor="middle" y="17" fill="#41719C" font-size="10pt" font-family="Calibri">
        <tspan id="txt" x="25" dy="12.5">[key]</tspan>
      </text>
    </g>
  </defs>
  <g id="keys">
    <use id="7" href="#key" transform="matrix(1, 0, 0, 1, 30, 30)"/>
    <use id="8" href="#key" transform="matrix(1, 0, 0, 1, 90, 30)"/>
    <use id="9" href="#key" transform="matrix(1, 0, 0, 1, 150, 30)"/>
    <use id="4" href="#key" transform="matrix(1, 0, 0, 1, 30, 90)"/>
    <use id="5" href="#key" transform="matrix(1, 0, 0, 1, 90, 90)"/>
    <use id="6" href="#key" transform="matrix(1, 0, 0, 1, 150, 90)"/>
    <use id="1" href="#key" transform="matrix(1, 0, 0, 1, 30, 150)"/>
    <use id="2" href="#key" transform="matrix(1, 0, 0, 1, 90, 150)"/>
    <use id="3" href="#key" transform="matrix(1, 0, 0, 1, 150, 150)"/>
  </g>
</svg>

When you load this file to the SvgImageBox control, it creates a clone of the key group for each use element.

svgimageitem

The control’s default behavior is to reset the Ids of the cloned elements, as these Ids are duplicate.

Handle the QueryUniqueItemId event to assign unique Ids to the cloned copies of elements. You can use these Ids later for item identification (for example, see SvgImageBox.FindItemById). The QueryUniqueItemId event fires for each SVG element (including their nested elements) referenced by use elements. The QueryUniqueItemId event does not fire for elements that have no Ids in the SVG file.

The following example generates unique Ids based on a use element’s Id, and the Id of the use element’s target.

void OnQueryUniqueItemId(object sender, QueryUniqueItemIdEventArgs e) {
    e.Id = $"{e.Id}_{e.UseElementId}";
}

This code generates the following Ids for the sample SVG file above: “key_7”, “txt_7”, “key_8”, “txt_8”, “key_9”, “txt_9”, “key_4”, “txt_4”, “key_5”, “txt_5”, “key_6”, “txt_6”, “key_1”, “txt_1”, “key_2”, “txt_2”, “key_3”, “txt_3”.

See the following example for the complete code:

View Example

See Also