How to customize Shapes in ToolBox item?

17 posts, 1 answers
  1. Shrikant
    Shrikant avatar
    38 posts
    Member since:
    Jul 2011

    Posted 23 Apr 2012 Link to this post

    Hi

    Please check the attached Image, I have to customized toolbox items with Images & Text

    Please I need a help on this, I am not getting any way to do this customization.

    Help me here

    Thanks
  2. Shrikant
    Shrikant avatar
    38 posts
    Member since:
    Jul 2011

    Posted 24 Apr 2012 Link to this post

    I tried with one Custom Shape Class but while dropping shape to Diagram it does not show the Image with Shape.
    Also once dropped the shape reset to default in Toolbox.

    public class CustomizedShapesCollection : List<GalleryItem>
      {
           public CustomizedShapesCollection()
           {
               this.LoadData();          
           }
     
           public IEnumerable<GalleryItem> GetItemsByType(string type)
           {
               return this.Where(i => i.ItemType.Equals(type));
           }
     
           private static string GetShapeName(string typeName)
           {
               typeName = typeName.Replace("Shape", string.Empty);
               StringBuilder builder = new StringBuilder(typeName);
               for (int i = 0; i < builder.Length; i++)
               {
                   if (i != 0 && (char.IsUpper(builder[i]) || char.IsDigit(builder[i])))
                   {
                       builder.Insert(i, " ");
                       i++;
                   }
               }
               return builder.ToString();
           }
     
           private void LoadData()
           {
               ImageBrush imgBrush = new ImageBrush();
               imgBrush.ImageSource = new BitmapImage(new Uri(@"Images/email_send.png", UriKind.Relative));
               imgBrush.Stretch = Stretch.Fill;
               RadDiagramShape tempObj = new RadDiagramShape()
               {
                   Background = imgBrush
               };
               this.Add(new GalleryItem("Send Mail", tempObj, ToolboxCategoryNames.BasicShapes));
     
           }
       }  
    <features:Toolbox x:Name="toolbox" Margin="15" HorizontalAlignment="Right" ItemsSource="{Binding Items}" />


    Please can someone here help me, How can I achieve Customization of Shapes?

  3. DevCraft banner
  4. Alex Fidanov
    Admin
    Alex Fidanov avatar
    636 posts

    Posted 25 Apr 2012 Link to this post

    Hi,

     Dropping a shape from the Toolbox will use the serialization mechanism to create a new shape and add it to the RadDiagram. I can see that you are using an image brush to set the background of the shape. Please note that ImageBrushes do not have built-in serialization support. You would have to serialize/deserialize the image brush manually.

    Another approach that I would recommend, is setting the image's source as content of the shape. Then, you can set the ContentTemplate and use an image, which source will be bound to the shape's content. This way, you would get the serialization out of the box.

    All the best,
    Alex Fidanov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  5. Yoan
    Yoan avatar
    17 posts
    Member since:
    Jan 2012

    Posted 25 Apr 2012 Link to this post

    Alex, could you give a sample of what you mean , because I have similar problem and I am not able to solve it through your solution , may be I am doing something wrong.

    Thanks in advance,
    Yoan
  6. Ambit
    Ambit avatar
    13 posts
    Member since:
    Apr 2012

    Posted 25 Apr 2012 Link to this post

    Hi Alex,

    I am also looking for the same thing , Can you please provide sample solution here?

    Thanks
  7. Alex Fidanov
    Admin
    Alex Fidanov avatar
    636 posts

    Posted 25 Apr 2012 Link to this post

    Hello,

     Here is the DataTemplate and Image approach:

    Populating the toolbox:

                RadDiagramShape item1 = new RadDiagramShape()
    {
        Content = @"Images/Desert.jpg",
    };
    RadDiagramShape item2 = new RadDiagramShape()
    {
        Content = @"Images/Hydrangeas.jpg",
    };
    items.Add(new GalleryItem("Item 1", item1, ToolboxCategoryNames.BasicShapes));
    items.Add(new GalleryItem("Item 2", item2, ToolboxCategoryNames.BasicShapes));
    The RadDiagram and the Shape style:

    <UserControl.Resources>
            <Style TargetType="telerik:RadDiagramShape">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Image Source="{Binding}" MaxWidth="100" MaxHeight="100"/>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <telerik:RadDiagram Grid.Column="1"/>
            <features:Toolbox x:Name="ToolBox"/>
        </Grid>

    Regards,
    Alex Fidanov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  8. Yoan
    Yoan avatar
    17 posts
    Member since:
    Jan 2012

    Posted 25 Apr 2012 Link to this post

    Hello Alex, 

    This sample is really working, but when I try binding TextBlock's Text property to a property of a bussiness object , which I have put in the Content , only the shape in toolbox gets the binding , for the shape which is created after the drop there is Binding error claiming property is not found.

    Example :

             
    RadDiagramShape shape = new RadDiagramShape()
                    {
                        Content = new DataItem() { SomeTestData = "Yes test really" },
                    };
     
     
                GalleryItem git = new GalleryItem("Function module",shape,"MyOwnType");
     
                galleryItems.Add(git);

    <Style TargetType="telerik:RadDiagramShape">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Grid Background="Green" Width="150" Height="150">
                                <TextBlock Text="{Binding SomeTestData}"/>
                            </Grid>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

                
    Result before/after drop are in the attached files.

  9. Shrikant
    Shrikant avatar
    38 posts
    Member since:
    Jul 2011

    Posted 25 Apr 2012 Link to this post

    Hi Alex,
    Thank you so much for a Solution,

    But You have binded Image Path to Content property & while editing Text its showing Image Path which is not good.

    Is there any other way to do the same?

    Thanks again
  10. Shrikant
    Shrikant avatar
    38 posts
    Member since:
    Jul 2011

    Posted 27 Apr 2012 Link to this post

    Any luck here?
  11. Alex Fidanov
    Admin
    Alex Fidanov avatar
    636 posts

    Posted 27 Apr 2012 Link to this post

    Hi,

     Shrikant, you can set the IsEditable property of the RadDiagram or handle the PreviewBeginEdit event of the diagram shape and cancel the beginning of edit mode.

    Yoan, as I said, the content is not serialized if it is a business object. If you want to have a business object (like DataItem) as content, you would have to serialize it manually. For this, you have to inherit the RadDiagramShape class and override the Serialize and Deserialize methods. You can see how to save a custom property with the SerializationInfo here.

    Greetings,
    Alex Fidanov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  12. Shrikant
    Shrikant avatar
    38 posts
    Member since:
    Jul 2011

    Posted 04 May 2012 Link to this post

    Hi Alex,
    1. As per your solution it will not allow me to enter Text on Shapes, so the problem is
    I want Image & Text too on Shapes.
    & User can edit the text also.

    2. The second solution suggested for Yoan, I tried this also for Custom Property but ShapeSerialized event is not working for Diagram.
    Rather ShapeDeserialized is getting fired when shapes get dropped on Diagram.
    Can you please tell one example with Custom property like ImagePath(string),ShapeName(string)?

    please help me bit more,its hard to find sample codes for Diagram Controls here

    Thanks for Support
  13. Answer
    Alex Fidanov
    Admin
    Alex Fidanov avatar
    636 posts

    Posted 09 May 2012 Link to this post

    Hello,

     The edit mode is editting the content of the RadDiagramShape. If you have an image as content, then you will get the image path as editting content. If you want to edit other content, then you must store the image path elsewhere and not as content, for example the Tag property or you can subclass the RadDiagramShape and create a custom property for the image path.

    The ShapeSerialized event is not raised, because the shape is not being serialized by the RadDiagram control. I would recommend inheriting the shape itself and overriding the Serialize and Deserialize methods.

    Kind regards,
    Alex Fidanov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  14. Shrikant
    Shrikant avatar
    38 posts
    Member since:
    Jul 2011

    Posted 10 May 2012 Link to this post

    Hi Alex,
    Thank you so much for your great support,
    I finally did the Custom Shape with Diagram & Toolbox of Diagram using Custom Properties.


    Thanks Again
  15. Hussain
    Hussain avatar
    1 posts
    Member since:
    Feb 2012

    Posted 31 May 2012 Link to this post

    Hi Alex,

       Could you please show me some code snippets on how to bind the image path to the "Tag" property? Thanks!
  16. Alex Fidanov
    Admin
    Alex Fidanov avatar
    636 posts

    Posted 01 Jun 2012 Link to this post

    Hi,

     It depends on how you have defined the image - in the control template or in the content template, but you can use the RelativeSource of the binding expression and one of its options. For example, here you can find how to use the ancestor mode.

    All the best,
    Alex Fidanov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  17. Ayaz
    Ayaz avatar
    2 posts
    Member since:
    Jun 2013

    Posted 18 Jul 2013 Link to this post

    Hi

    Please check the attached Images, I have to customized shapes with Images & Text, I need a help on this, I am not getting any way to do this customization (I want to show default label with dropped shape, user has option to modify label of his choice).

    Help me here, Could you please show me some code snippets on how to acheive this? Thanks!
  18. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 23 Jul 2013 Link to this post

    Hello Аyaz,

     You can find a sample attached demonstrating adding Label below the Shape. It also shows how to add additional TabItem in the SettingsPane which will provide TextBox for editing the Label's Text.
    Let us know if it helps you proceed further.

    Regards,
    Petar Mladenov
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
Back to Top
DevCraft banner