Panorama Control in WindowsFormsHost

[Patrick]

I am building a WPF app where I work and I want to use the RadPanorama for the Start Screen or "Launching Pad" for the App.  I understand, and have seen the numerous threads, that there is no RadPanorama for WPF. 

However, is there any reason I cannot embed one in a WindowsFormsHost? 

Seems to work after a VERY quick little test but I am wondering if anyone has any feedback on doing it this way?  Somethings are very 'messy' to get at with out the Design Time support.  Is there a way around that? 

Additionally, doesn't seem to be a ton of documentation for manipulating a RadPanorama in Code Only, am I missing it?

P.S. I appologize if this is not the correct Forum.  With the whole WPF, RadPanoram, WindowsFormHost gammit I wasn't sure.

[Ivan Todorov]

Hi Patrick,

Thank you for contacting us.

There should not be any issues with using RadPanorama in a WPF application. We have not tested this scenario before but it appears that it works correctly. As to the documentation, yes, there is space for improvements in manipulating RadPanorama with code. We will try to improve the existing documentation with the future updates.

I am sending a small sample project which demonstrates using RadPanorama in a WPF application as well as some simple manipulations like adding tiles and groups. I hope you find it useful.

Do not hesitate to ask if you have any additional questions.

Regards,
Ivan Todorov
the Telerik team

[Patrick]

Thank you very much, sorry I didn't see that myself.  I'm guessing the one caveat is that I will not have access to the Visual Designer for these doing it this way?  I can work around that I just thought I'd ask as Telerik makes such good Visual Designer's.

[Patrick]

I see how to do Groups in Code, thanks to the provided sample, however I wonder if it is possible through XAML?  I can't seem to get it quite right is why I ask.
I have something similar to this:

<WindowsFormsHost Height="400" HorizontalAlignment="Left" Margin="12,12,0,0" Name="windowsFormsHost1" VerticalAlignment="Top" Width="579" >
            <wincontrols:RadPanorama x:Name="radPanorama1" Size="200,200" RowsCount="3" ShowGroups="True">
                <wincontrols:RadPanorama.Groups>
                    <wincontrols:TileGroupElement Name="Group1" Text="This is a Group" ></wincontrols:TileGroupElement>                   
                </wincontrols:RadPanorama.Groups>
                <wincontrols:RadPanorama.Items>
                    <wincontrols:RadTileElement Text="Tile1" Column="0" Row="0" Click="RadTileElement_Click_1" />
                    <wincontrols:RadTileElement Text="Tile2" Row="1" />
                    <wincontrols:RadTileElement Text="Tile3" Row="2" />
                </wincontrols:RadPanorama.Items>
            </wincontrols:RadPanorama>
</WindowsFormsHost>

I can't seem to assign the items to a Group this way.  TileGroupElement says it doesn't take 'content'.  Am I missing something or do I simply need to settle for using code?

[Ivan Todorov]

Hi Patrick,

You need to specify the property you are setting content to (TileGroupElement.Items), otherwise WPF will automatically try to set the Content property which is not available in TileGroupElement. Here is how you can assign a tile to a group with markup:

<wincontrols:RadPanorama x:Name="radPanorama1" Size="200,200" RowsCount="3" ShowGroups="True">
    <wincontrols:RadPanorama.Groups>
        <wincontrols:TileGroupElement Name="Group1" Text="This is a Group" >
            <wincontrols:TileGroupElement.Items>
                <wincontrols:RadTileElement Name="GroupedTile1" Text="This is a Tile" Row="0" />
            </wincontrols:TileGroupElement.Items>
        </wincontrols:TileGroupElement>
    </wincontrols:RadPanorama.Groups>
</wincontrols:RadPanorama>

In regards to the designer, yes, we have very convenient designers and design-time wizards in RadPanorama but unfortunately they cannot be utilized in a WindowsFormsHost in WPF. It appears that this is a limitation of Visual Studio which cannot initiate different design surfaces (WinForms and WPF).

I hope I was able to help. Feel free to ask if you have any additional questions.

Regards,
Ivan Todorov
the Telerik team

[Patrick]

Thanks, you can probably tell, I'm new to WPF.  Coming from Winforms and trying to make my way in the wonderful world of XAML.

Anyway, last question, I believe, on this.  How would I apply one of Teleriks Themes to both my WPF App and to the embedded RadPanorama?

To be clear, I am mainly asking about setting the WinForm Controls Theme while embedded in the WindowsFormHost control as setting WPF Themes is crazy simple.

Thanks


PS: I lied, another question.  How do I increase the Tile Size?  In a Winform app I see a Size Property for the RadTile but in my embedded XAML I cannot seem to get it.

[Ivan Todorov]

Hello Patric,

Our themes just need to be instantiated once and then you just need to set the ThemeName property of your control:

new TelerikMetroBlueTheme();
this.radPanorama1.ThemeName = "TelerikMetroBlue";

Note that each of our themes is defined in a separate assembly and you need to add a reference to it.

This can also be achieved with XAML by using the static resource dictionary. I am attaching a sample project which demonstrates this.

As to changing the size of the tile, the property is called CellSize. Setting the size of the cells and not the tiles in the case of RadPanorama is more convenient because tiles can have RowSpan and ColSpan. The CellSize property is available on the TileGroupElement for grouped tiles and on the RadPanorama for ungrouped ones.

Do not hesitate to ask if you have any other questions.

Regards,
Ivan Todorov
the Telerik team

[Patrick]

A couple things. 
First, I am guessing I still need to assign a WPF theme separately, like so --> StyleManager.ApplicationTheme = new Windows8Theme();

Second, When I try and add CellSize to my TileGroupElement I get the following at Design Time --> "The member 'CellSize' is not recognized or is not accessible.", thoughts?  Here is my code -->

<wincontrols:TileGroupElement Name="AdminGroup" Text="Administration" RowsCount="3" ColumnsCount="2" CellSize="150,150">
  <wincontrols:TileGroupElement.Items>
    <wincontrols:RadTileElement Name="AdminFrequencyTile" Text="Frequency" Row="0" Column="0" ColSpan="2" />
    <wincontrols:RadTileElement Name="AdminPlaceOfServiceTile" Text="Place Of Service" Row="0" Column="2" ColSpan="2" />
    <wincontrols:RadTileElement Name="AdminCountyTile" Text="County Codes" Row="1" Column="0" ColSpan="2" />
    <wincontrols:RadTileElement Name="AdminTerminationReasonTile" Text="Termination Reason" Row="1" Column="2" ColSpan="2" />
    <wincontrols:RadTileElement Name="AdminMaritalStatusTile" Text="Marital Status" Row="2" Column="0" ColSpan="2" />
    <wincontrols:RadTileElement Name="AdminGenderTile" Text="Gender" Row="2" Column="2" ColSpan="2" />
  </wincontrols:TileGroupElement.Items>
</wincontrols:TileGroupElement>

[Ivan Todorov]

Hello Patrick,

Yes, the WPF themes does not have anything in common with the WinForms themes so you should set them separately.

As to CellSize property, I have copied and pasted your code into the sample application I have sent with my previous post and I was able to compile and run it without any difficulties. Can you please verify this on your end. Also, please check if all referenced assemblies are available. If you continue experiencing difficulties, please send me a sample project which demonstrates them. This will let me investigate it and provide you with further support.

Let me know if I can be of further assistance.

Kind regards,
Ivan Todorov
the Telerik team

[Patrick]

Okay, hopefully this makes sense to you.  In the end I needed to add a Reference to System.Drawing, which your example project had, to get CellSize as a recognized attribute of TileGroupElement.  Not sure why, I triple verified that it was that specifc Reference.  What's even stranger is that if I use a "JustFind All Dependent Code" on System.Drawing it says there isn't any.  Go figure....

Thanks for all the help, if you have an explanation for the above I'd love to hear it, inquiring minds and all that.

[Patrick]

If I am using the LiveTile instead, how do I go about setting the "Flip" Text or Frame's as they seem to be called in the Winform app.  I can't seem to find that anywhere.

Thanks

[Ivan Todorov]

Hi Patrick,

The "Just Find All Dependent Code" checks if there is any code in your application that uses any types from that assembly. In your case, it is the Telerik.WinControls assemblies that depend on the System.Drawing and your application depends on System.Drawing indirectly. For this reason the "Just Find All Dependent Code" command does not find anything. The CellSize property is of type System.Drawing.Size and maybe this is the reason why you were getting an error for this exact property.

As to the RadLiveTileElement, it has an Items collection that can contain LiveTileFrameElement instances. Here is a sample code that demonstrates how to setup a live tile with three frames:

<wincontrols:TileGroupElement Name="Group1" Text="This is a Group" CellSize="150,150">
    <wincontrols:TileGroupElement.Items>
        <wincontrols:RadLiveTileElement Name="GroupedTile1" Text="" Row="0" TransitionType="SlideLeft" ContentChangeInterval="1500">
            <wincontrols:RadLiveTileElement.Items>
                <wincontrols:LiveTileFrameElement Name="Frame1" Text="Frame 1" />
                <wincontrols:LiveTileFrameElement Name="Frame2" Text="Frame 2" />
                <wincontrols:LiveTileFrameElement Name="Frame3" Text="Frame 3" />
            </wincontrols:RadLiveTileElement.Items>
        </wincontrols:RadLiveTileElement>
    </wincontrols:TileGroupElement.Items>
</wincontrols:TileGroupElement>

I hope this helps. Feel free to write back if you have any additional questions.

Greetings,
Ivan Todorov
the Telerik team

[Patrick]

Thank you, you have been so much help.  I'm sorry that one question seems to keep leading to another!

So, how would I set the Text property on my Frame Element in code?  I have a working Live Tile created in XAML and I want to dynamically set the Text of the 2nd Frame in code, based on some internal event.  I can't do typical WPF Binding, as far as I know, because these controls are actually WinForm controls and therefore not DependencyObjects...correct.  Also, when I try and access my LiveTileFrameElement in the Code Behind, like so -->

this.PendingAuthsFrame2.Text = "33";

I get the following Compile Exception (Auctorne is the name of my app) -->

Error 2 'Auctorne.MainWindow' does not contain a definition for
'PendingAuthsFrame2' and no extension method 'PendingAuthsFrame2' accepting a
first argument of type 'Auctorne.MainWindow' could be found (are you missing a
using directive or an assembly reference?)

[Patrick]

Ignore my last question, I'd delete it if I could figure out how.  I got my answer elsewhere, thanks.

[Terragile]

How do I add an image to a RadTileElement in a Panorama control hosted in a WindosFormsHost?

<wincontrols:RadTileElement  Name="GroupedTile1" Text="This is a Tile1"

             Row="0"

            BackColor="Green"

            Image = ???????                                                            

                                                            />

Thanks,

Ed

[Ivan Todorov]

Hello Ed,

WinForms image classes are different than the WPF ones and they cannot be created declaratively. Therefore, you should set your images in code behind:

this.GroupedTile1.Image = System.Drawing.Image.FromFile(@"C:\image.png");

Also, please note that when declaring tiles, groups, etc. in the XAML files, you should use the x:Name property instead of just Name in order to be able to access the tiles in the code behind. This is needed because RadTileElement also has a Name property which is different than the one that WPF uses.

I hope you find this useful. Feel free to ask if you have other questions.

Regards,
Ivan Todorov
the Telerik team

[Terragile]

Thank you for your help.  That worked perfectly!

Ed