Programmatic access to diagram clipboard

[HDC]

Hello,

I have been trying to integrate the diagram control into my application. It is a great control but I have encountered a problem for copying shapes. Our shapes contain usercontrols that are embeded as content of the shape.

This works wonderfully well until i tried to copy-paste shapes. The shape itself is copied, but it's content is not. I believe this would be very hard to implement from the side of telerik, but i could solve this myself if i had better control over the paste process more specifically if i could access the items on the clipboard.

Is there any way, at current, to access the items that have been put on the clipboard?

If not, can this be added to the control?

Best Regards,

Peter

[HDC]

I figured out how this can be done, though it could be made easier in the future to translate this clipboard to a usable shape/connection collection

var serializationString = Telerik.Windows.Controls.Clipboard.GetText();

XDocument doc = XDocument.Parse(serializationString);
var results = doc.XPathSelectElements("/Items/Shapes/RadDiagramShape");
foreach (var result in results)
{
  if ((result as XElement).HasAttributes == true)
  {
    foreach (XAttribute attrib in (result as XElement).Attributes())
    {
      if (attrib.Name == "Id")
      {
        ...
      }
    }
  }

}

[Francois Vanderseypen]

Peter,

take a look at the article "A financial dashboard designer based on RadDiagram", you will find plenty of custom shapes with embedded controls there. They all support serialization (with includes copy/paste, undo-redo and so on) because they make use of the open serialization of RadDiagram. For example, the GaugeShape you will find there stores the stock symbol ans some text as follows;

public override void Deserialize(SerializationInfo info)
{
    base.Deserialize(info);
    if (info[TextTag] != null) this.Text = info[TextTag].ToString();
    if (info[SymbolTag] != null) this.Symbol = info[SymbolTag].ToString();
}

public override SerializationInfo Serialize()
{
    var info = base.Serialize();
    info[TextTag] = this.Text ?? "";
    info[SymbolTag] = this.Symbol ?? "";
    return info;
}

In essence you can store anything you like/need in the SerializationInfo. Hence, if you have a control inside a shape you need to supply these bits of code so that at runtime things get (de)serialized properly. The actual details depend, of course, on the control under consideration but I'm convinced that the stuff you'll find in the article referenced above will get you on the right track.

Hope this helps, Fr.

[HDC]

Hi Francois,

Thanks for your speedy reply.

However, I don't just need to serialize the embeded content. Each time i execute a copy-paste operation, i need to give the pasted shape a new content.

I explain:

I'm embedding textboxes/images/... in the shapes... each time i copy-paste a shape, i need to create a new textbox/image with a new unique id. This is necessary so i could save the content of those shapes to a database without having to serialize those shapes litterally into my database.

I don't immediately see how i could do this with the serialization you are proposing.

Best Regards,

Peter

[Francois Vanderseypen]

Peter,

in that case I'd simply listen to the ItemsChanged event, filter out the type you want and then change the Id or the Content.
No need to change the pasted XML in this scenario, you post-process the item added.

A better solution?

Fr.

[HDC]

Hi Francois,

That's the first thing i tried, however i'm using the same shape for every embeded usercontrol so i don't know which was the original shape from which the shape was copied (since the content was not there). I suppose that i could solve that problem by the serialization that you are proposing, so the combination of both your suggestions may also give me a solution.

I will look further into this.

Best Regards,

Peter

[HDC]

Hi Francois,

I tried downloading the code but it doesn't compile, it's missing a file and there are other problems prevent it to run.

I have tried to reproduce some of the code in my application but i'm having problems there too, following line doesn't compile:

<Style TargetType="{x:Type local:TextShape}" BasedOn="{StaticResource {x:Type telerik:RadDiagramShape}}">

This doesn't work in silverlight.  

How do you translate this to silverlight?

Best Regards,

Peter

[Francois Vanderseypen]

Peter,
the financial dashboard is a WPF application and it's unlikely that it can be ported without some efforts to Silverlight. If it doesn't compile as a WPF application it's most probably due to the missing reference of the Features library. The Features library is part of the QSF (Quick Start Framework) and is installed in the Telerik directory (C:\Program Files (x86)\Telerik\RadControls for WPF Q1 2012\Demos\Deploy).
The (de)serialization mechanism I referred to in my earlier post is however available in Silverlight and WPF.

With kind regards, Fr.

[Alex Fidanov]

Hello Peter,

If I could chime in, have you tried using the ShapeSerialized and ShapeDeserialized events of the RadDiagram control? These will be always raised when a shape is copied/pasted or the diagram is saved/loaded for each shape. Using this event you will have better control over when and what is changed in the diagram.

Regards,
Alex Fidanov
the Telerik team

[HDC]

Hi Francois,

I tried, but just don't succeed in translating your code to Silverlight. Would it be possible to make a silverlight demo that demonstrates how you can create custom shapes just like the "TextShape" but then in silverlight?
 
I'm sure many people would be interested in seeing this in a blog entry.

Best Regards,

Peter

[Tina Stancheva]

Hello Peter,

We've included a How To Create a Custom Shape article in our online documentation that will be uploaded by the end of the week. In the meantime you can find a sample project in our CodeLibrary that can get you started. Please give it a try and let us know if it helps and if we can further assist you.

Regards,
Tina Stancheva
the Telerik team

[HDC]

Hi Tina,

Yes that definately is helping me on my way. But i discovered you can actually do following:

<telerik:RadDiagramShape x:Class="ExqiPresenter.Views.ExqiSlidedeck.SlideObjects.SlideTextBoxShape"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:converter="clr-namespace:ExqiPresenter.Convertors.ExqiSlidedeck"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d"
    MouseLeftButtonDown="LBL_MouseLeftButtonDown"
    BeginEdit="RadDiagramShape_BeginEdit"
    Canvas.ZIndex="{Binding ZIndex}"
    Height="{Binding Dimention.Height}"
    Width="{Binding Dimention.Width}"
                         >

  <telerik:RadDiagramShape.Resources>
    <converter:BrushToColorConverter x:Key="brushToColor" />
    <converter:TextDecorationsToStringConverter x:Key="textDecorationToString" />
  </telerik:RadDiagramShape.Resources>

  <Grid x:Name="LayoutRoot">

    <TextBlock Name="LBL"
                       Text="{Binding Text}"
                       FontFamily="{Binding FontFamily}"
                       FontSize="{Binding FontSize}"
                       Foreground="{Binding TextColor, Converter={StaticResource brushToColor}}"
                       FontStyle="{Binding FontStyle}"
                       FontWeight="{Binding FontWeight}"
                       TextDecorations="{Binding TextDecoration, Converter={StaticResource textDecorationToString}}"
                       TextAlignment="{Binding Alignment}"
                       TextWrapping="Wrap"
                       Padding="10 10 10 10" ></TextBlock>
    <TextBox Name="TXT" Visibility="Collapsed"
                            FontFamily="{Binding FontFamily}"
                            FontSize="{Binding FontSize}"
                            Foreground="{Binding TextColor, Converter={StaticResource brushToColor}}"
                            FontStyle="{Binding FontStyle}"
                            FontWeight="{Binding FontWeight}"
                            TextAlignment="{Binding Alignment}"
                            Background="Transparent"
                            BorderThickness="0"
                            Width="auto"
                            Padding="10 10 10 10"
                            TextWrapping="Wrap"
                            AcceptsReturn="True"
                            KeyDown="TxtKeyDown" TextChanged="TxtTextChanged"
                            LostFocus="TxtLostFocus"
                         ></TextBox>
  </Grid>

</telerik:RadDiagramShape>

What i'm doing here is i'm making a new control based on the RadDiagramShape, it works, but Is this a valid way of working?

Best Regards,

Peter

[Tina Stancheva]

Hello Peter,

Yes your approach is valid and it will work but to a certain degree. What I mean by this is that some of the built-in features in the RadDiagram may not work properly with your custom shape control as its content is customized in a way that the RadDiagram serialization implementation won't be able to serialize it out-of-the-box. The advantage of my approach is that the custom content of the shape is part of it ControlTemplate and this is why it can easily be serialized.

However it really depends on the final goal and requirements of your solution. In a sample scenario your approach will work just fine but if you need to take advantage of the RadDiagram cut, copy, paste, drag and drop features you'll need to customize the serialization process to work with your custom content. You can do that in the event handlers of the RadDiagram ShapeDeserialized  and ShapeSerialized events.

Regards,
Tina Stancheva
the Telerik team

[HDC]

Hi Tina,

Yes this is something that i noticed already but i do believe that i can work out a solution for these problems. The reason that i'm working like this is that i need to be able to capture a few events. In my case i have a label that i want to turn into a textbox whenever the user double clicks the label. I understand you already have this ability out of the box, but i want to do more with a radshape... but i want to be able to assign a font, color, alignment, etc... properties to both the label and the textbox.

To be clear... what i'm trying to achieve can be seen from the TextBox on a PowerPoint presentation, accept that you don't double click there... you just click. I could do this by simply adding a textbox to the diagram, but i was not able to move the shape anymore because i could not grab hold of the corners of the shape anymore... and to be honest, if i could change one thing to PowerPoint, it would be "double click" to edit because now it is quite a drag to move textboxes on a PowerPoint presentation.

Anyways, thanks for your help and i will be looking into those serialized events. Please let me know if there are more easier ways to achieve what i explained above (i'll even take the PowerPoint way if need be).

Best Regards,

Peter

[HDC]

Hi Tina,

I have been able to integrate the textbox without needing double click or the label and it seems to work even better then PowerPoint!

Nevertheless, i'm looking forward to read this new section in the on-line documentation.

Best Regards and thanks a lot for your help,

Peter