custom shape with vector image

[Hyunho]

Hello,
I'm evaluating RadControls for WPF.
My program need many custom shapes like visio stencil.

I want to convert vector images into custom shapes for diagram.

What I did is as follows.

1. Convert sample wmf file into xaml file with MS Expression Design 4
    Export-Format as XAML WPF Canvas

2. I refered CustomShapeExample and inserted xaml code in Generic.xaml by MSED4 for my own custom shape.
<Style TargetType="local:MyFirstShape">
        <Setter Property="BorderThickness" Value="4" />
        <Setter Property="BorderBrush" Value="#6C666666" />
        <Setter Property="Width" Value="350" />
        <Setter Property="Height" Value="300" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="Margin" Value="0" />


        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:MyFirstShape">
                    <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Document" Width="190.904" Height="179.643" Clip="F1 M 0,0L 190.904,0L 190.904,179.643L 0,179.643L 0,0">
                        <Canvas x:Name="MC900295085" Width="799.598" Height="599.808" Canvas.Left="0" Canvas.Top="0">
                            <Path x:Name="Path" Width="92.3327" Height="66.4918" Canvas.Left="98.5714" Canvas.Top="98.588" Stretch="Fill" Fill="#ED000000" Data="M 190.904,159.906L 190.232,160.002L ..... 190.904,159.906 Z "/>
...
...
...
                        </Canvas>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

3. Then I could load it's image in a diagram, but it didn't resize.

Question.
We need to make custom shapes with vector image. Could you tell me the best way for this?

Regards,

[Zarko]

Hello Hyunho,
The problem is that you can't really resize the canvas' children - you can change the size of the canvas but it won't automatically resize them. To do this you should use Grid but after export to WPF Canvas all paths have Canvas.Top/Left and this won't work either so my advice is to set the export format to XAML WPF Resource Dictionary. This will generate a DrawingBrush instead of a Canvas and Paths so you'll be able to set it as s grid background and everything should work correctly.
I've attached a sample project with two shapes with DrawingBrush so could you please examine it and if you have further questions feel free to ask.

Kind regards,
Zarko
the Telerik team

[Hyunho]

Dear sir,
Thank you so much for your help. It was very helpful!

I need more example for custom shape.

Could you show me how to make custom shape with raster image(jpeg)? I saw this in your sample examples, but It can't contain text description. I want to a custom shape with text description beneath the image.


+--------+
| image |
+--------+
[   text   ]


Best regards,

[Pavel R. Pavlov]

Hello Hyunho,

I noticed that the ControlTemplate used by your custom shape is not complete - there is no ContentPresenter defined. You have to complete the definition of the ControlTemplate in order to set content of your custom shape. As a start you can take a look at the default template of the RadDiagramShape implemented in the Telerik.Windows.Controls.Diagrams.xaml file placed in Themes.Implicit\WPF40\[ThemeName]\Themes folder. Then once you've set the proper ControlTemplate, you can use the Content property of your custom shape and define a panel that contains both an Image and a TextBlock.

Or you can simply modify the ControlTemplate of your custom shape to define both an Image and TextBlocks. You can take a look at this tutorial to get a better understanding of this approach.


All the best,
Pavel R. Pavlov
the Telerik team