Hello Diagramers,
Can anyone provide advice on how to export the SVG Path from an Illustrator generated SVG file for use in a RadDiagram shape? This works on simple, eg single path shapes using GIMP to export the image path but it does not work for multiple path shapes, eg a rectangle with a domed end. In the latter case the shape displays correctly but mouse clicks are processed over the domed portion and ignored over the rest of the shape. I've attached my Path data and a screen shot of the resulting shape in the hope that someone can shed some light on why I'm getting this behavior.
Regards,
Eric Gilbertson
<Style TargetType="{x:Type telerik:RadDiagramShape}" x:Key="ClipGraphBranchCell">
<Setter Property="Background" Value= "Green"/>
<Setter Property="BorderBrush" Value= "Black"/>
<Setter Property="Geometry" Value=" M 139.54,3.30 C 137.45,1.11 134.53,0.00 130.72,0.00
130.72,0.00 8.77,0.00 8.77,0.00
3.93,0.01 0.01,4.01 -0.00,8.94
-0.00,8.94 0.00,13.03 0.00,13.03
0.01,17.97 3.93,21.97 8.77,21.98
8.77,21.98 130.98,21.98 130.98,21.98
130.98,21.98 131.60,21.98 131.60,21.98
134.72,21.97 137.55,20.69 139.62,18.63
139.62,18.63 146.05,10.97 146.05,10.97
146.05,10.97 139.54,3.30 139.54,3.30 Z
M 1.50,13.03 C 1.51,17.13 4.76,20.44 8.77,20.45
8.77,20.45 130.98,20.45 130.98,20.45
131.15,20.46 131.32,20.46 131.50,20.46
133.75,20.46 135.83,19.69 137.49,18.40
137.49,18.40 137.49,3.52 137.49,3.52
135.72,2.26 133.56,1.52 131.23,1.52
131.06,1.52 130.89,1.53 130.72,1.53
130.72,1.53 8.77,1.53 8.77,1.53
4.76,1.54 1.51,4.85 1.50,8.95
1.50,8.95 1.50,13.03 1.50,13.03 Z" />
<Setter Property="IsEditable" Value="False"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" Value="Green" />
<Setter Property="BorderBrush" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
3 Answers, 1 is accepted
Hello Eric,
Thank you for the provided resources.
I have double-checked , and you are right that you need to click on the shape to move it. This behavior comes from the conversion of the SVG format to WPF Path, and it is not related to the RadDiagram itself. I would suggest checking this blog post, which describes steps to convert SVG to XAML.
Regards,
Dinko
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
Hi Dinko,
The link you provided does indeed describe an alternate mechanism for obtaining a Path from a .svg image but the output from it includes a "Fill" attribute (see below) and it does not appear that that this attribute can be used in conjunction with RadDiagramShape since it accepts only a Geometry value. Is there a way to specify a Fill value with a RadDiagramShape?
Regrads,
Eric Gilbertson
Output from Inkspot extraction link:
<FixedPage Width="816" Height="1056" xmlns="http://schemas.microsoft.com/xps/2005/06" xml:lang="und"> <Path Data="F0 M 4.32,528.8 L 528.8,528.8 528.8,4.32 4.32,4.32 4.32,528.8 z" Fill="#ffff7d00" /> ... snip ... </FixedPage>
Hello Eric,
You are right that the Geometry property does not expose a Fill property to customize the Geometry itself. The color of the Geometry will be taken from the Background property of the shape.
After searching for a possible solution, I think I found one. What I did is to add additional Path element inside the default template of the RadDiagramShape. This Path will be placed under your custom geometry. You can use RectangleGeometry, for example, to fill the whole shape and add some opacity so that it is not visible. This way, when you click in the middle of your custom geometry, you are clicking on the RectangleGeometry, and you will be able to drag the shape.
I have prepared a sample project to demonstrate this. Keep in mind that the project uses NoXAML binaries with the Office_Black theme applied. I hope this approach will work for you.
Regards,
Dinko
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.