windowsforms-devexpress-dot-xtraeditors-dot-svgimagebox-9c4d80d8.md
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.v25.2.dll
NuGet Packages : DevExpress.Utils, DevExpress.Wpf.Core
public event QueryUniqueItemIdEventHandler QueryUniqueItemId
Public Event QueryUniqueItemId As QueryUniqueItemIdEventHandler
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. |
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.
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}";
}
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:
See Also