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

C#

public event QueryUniqueItemIdEventHandler QueryUniqueItemId

VB.NET

Public Event QueryUniqueItemId As QueryUniqueItemIdEventHandler

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

SVG

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

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.

C#

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

VB.NET

Sub OnQueryUniqueItemId(ByVal sender As Object, ByVal e As QueryUniqueItemIdEventArgs) Handles svgImageBox1.QueryUniqueItemId
    e.Id = $"{e.Id}_{e.UseElementId}"
End Sub

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