custom shape with vector image

4 posts, 2 answers
  1. Hyunho
    Hyunho avatar
    23 posts
    Member since:
    Feb 2013

    Posted 05 Mar 2013 Link to this post

    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,

  2. Answer
    Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 08 Mar 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Hyunho
    Hyunho avatar
    23 posts
    Member since:
    Feb 2013

    Posted 13 Mar 2013 Link to this post

    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,

  5. Answer
    Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 18 Mar 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top