Dynamically add floating panel

[Xaria D]

How to add a floating panel from code behind.
Also how to add other controls to this panel like image?

[Pana]

Hi Xaria,

Imagine you have that 'TheDocking' instance of RadDocking defined somewhere in XAML or in code... It does not matter. You can create a floating Pane like this:

RadPaneGroup rpg = new RadPaneGroup();
RadPane rp = new RadPane() { Header = "Code pane", Content = "Content of codepane" };
rpg.Items.Add(rp);
this.TheDocking.Items.Add(rpg);
rp.MakeFloatingDockable();

You have to modify the Header and Content. You can create an instance of your own UserControl and pass it as Content.

Sincerely yours,
Panayot
the Telerik team

[Xaria D]

I think I will need to create  a splitContainer on the fly. I have a few graphics in my application. Upon first click of each graphic a new split container should be created, if for particular graphic a split container is created then everytime the same should be displayed..

Can I get some sample code for this please.

[Pana]

Hi Xaria D,

If you send me a screenshot of the dock with the things you need drawn in paint over it I will have a better idea how to help you.

You can add a SplitContainer with RadPanes in the floating RadPaneGroup and in each RadPane you can set the Content to be an Image.

Regards,
Panayot
the Telerik team

[Xaria D]

Attached image of what I what to achieve.

Thanks a lot for your help. :)

[Xaria D]

How to do the above?

[Pana]

Hello Xaria D,

I have created a gallery example using dock and MVVM. You can see how custom RadPanes are defined and reused. I believe it is close to the solution you would like to create.

Greetings,
Panayot
the Telerik team

[Xaria D]

It is quite close, but I don't understand how to achieve the following
IF I click on Image1 then the Radpane should be created only on first click on subsequent  clicks it should show the same RadPane. IN your example every time I click on Image1 a new RadPane is created.

Also you have binded the ImageBrush to the Image in the MainWindow, but my Image will be dynamic. So how can I reference the Image element of RadImageDetailsPane and update the image?

[Pana]

Hi Xaria D,

The idea of a the view model is to separate the data from the controls. The RequestDetails command fires the DetailsRequested event on the Image. The MainPage listens for these events and opens RadPanes with details for the images. You can pretty much put each new open RadPane in a dictionary with the image data as key and if an image tries to open its details while it still exist in the dictionary you can prevent the opening of the new RadPane. Also when you close a RadPane you can clear it from the dictionary so a new one could be created if the image is clicked in future. All of this is an application logic and it has nothing to do with the dock itself.

Sincerely yours,
Panayot
the Telerik team

[Jeff]

I've downloaded and built your example, On x64 Windows7 using VS 2010 and RadControls for WPF version 2011.3.1116.40, and it's not working.

It compiles just fine, and when I click on an image the img_DetailsRequested handler executes cleanly.  But I'm assuming that the point of:

ImageDescription id = sender as ImageDescription;

RadPaneGroup rpg = new RadPaneGroup();
RadPane rp = new RadImageDetailsPane() { DataContext = id };
rpg.Items.Add(rp);
this.Dock.Items.Add(rpg);
rp.MakeFloatingDockable();

is to display a RadImageDetailsPane - and it doesn't show.  No errors, just new new pane.

[Jeff]

OK: First, the example had applied a name only at the RadDocking level of the xaml.  I added a name to the RadPaneGroup:

    <Grid>
        <telerik:RadDocking x:Name="Dock">
            <telerik:RadDocking.DocumentHost>
                <telerik:RadSplitContainer>
                    <telerik:RadPaneGroup x:Name="radPaneGroup">
                        <local:RadImagesPane x:Name="ImagesPane" />
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking.DocumentHost>
        </telerik:RadDocking>
    </Grid>

Then, in the code-behind, instead of creating a new RadPaneGroup, and adding it to this.Dock (the instance of RadDocking, above), I used the named radPaneGroup.  I then added my new RadImageDetailsPane to it, in img_DetailsRequested(), and they displayed fine.

Seems to me that if you want to add a new RadPaneGroup for each image, you'd need to add it to the DocumentHost or perhaps to the RadSplitContainer - adding it directly to the RadDocking doesn't seem to work.

[Konstantina]

Hello Jeff,

Yes, there always should be a SplitContainer above the RadPaneGroup. For more information about the structure of the Docking control please refer to this help article.

Greetings,
Konstantina
the Telerik team