Problem with Generic control based on RadDocumentPane

[Bruno]

HI all!

I'm trying to implement a generic user control which extends RadDocumentPane. The idea behind this is to define a header and title template with a custom icon, a title and a close button (simillar to what firefox TabItems look like). You can find the code at the end of the post.

So far I've managed to get this partially working. On the HeaderTemplate, I define a DataTemplate for the header with a 3 column Grid.
Column 0: Has an Image with its source binded to the IconPath property of the DataContext
Column 1: Has a TextBlock with the text binded to the Title property of the DataContext
Column 2: Has a Button

and another DataTemplate for the TitleTemplate with everything as before, except for the button.

On the load event of the Image and TextBlock elements, I set their DataContext to be the instance of the generic user control where they are defined.

On a separate UserControl I'm creating two instances of my user control inside a RadDocking > DocumentHost.

If I specify an http url for the IconPath, everything works fine. The problem is if I set IconPath with a local image resource, I can only see the icon if I first change the RadDocumentPane to FloatingMode and then back to TabbedMode.

Am I missing something :-)? Thanks in advance,
Bruno.

RadDocumentPaneTest.xaml:
-------------------------------------

<UserControl x:Class="Sandbox.RadDocumentPaneTest"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sandbox="clr-namespace:Sandbox.Controls"
    xmlns:telerikDocking="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking"
    Width="400" Height="300">

    
    <Grid x:Name="LayoutRoot" Background="White">
        <telerikDocking:RadDocking x:Name="docking">
            <telerikDocking:RadDocking.DocumentHost>
                <telerikDocking:RadSplitContainer>
                    <telerikDocking:RadPaneGroup x:Name="PagesWindowGroup">


                        <sandbox:ExtendedRadDocumentPane
                            Title="Tab 01"
                            IconPath="http://seekdotnethosting.files.wordpress.com/2009/02/silverlight.png"
                            CanUserClose="True">
                        </sandbox:ExtendedRadDocumentPane>

                        <sandbox:ExtendedRadDocumentPane
                            Title="Tab 02"
                            IconPath="Images/Calendar.png"
                            CanUserClose="True">
                        </sandbox:ExtendedRadDocumentPane>
                        
                    </telerikDocking:RadPaneGroup>
                </telerikDocking:RadSplitContainer>
            </telerikDocking:RadDocking.DocumentHost>
        </telerikDocking:RadDocking>
    </Grid>
    
</UserControl>


ExtendedRadDocumentPane.xaml:
-------------------------------------------

<telerik:RadDocumentPane x:Class="Sandbox.Controls.ExtendedRadDocumentPane"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="clr-namespace:Sandbox.Controls"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking">
    
    <telerik:RadDocumentPane.HeaderTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="20" />
                </Grid.RowDefinitions>                

                <Image Source="{Binding IconPath}" Height="14" Width="14" Margin="0,1,5,0" Loaded="element_Loaded"></Image>
                <TextBlock Grid.Column="1" Text="{Binding Title}" Margin="0,2,15,0" Loaded="element_Loaded"/>
                <Button Grid.Column="2" Height="14" Width="14" Loaded="btnClose_Loaded" />
            </Grid>
        </DataTemplate>
    </telerik:RadDocumentPane.HeaderTemplate>
    
    <telerik:RadDocumentPane.TitleTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding IconPath}" Height="12" Width="12" Loaded="element_Loaded" />
                <TextBlock Text="{Binding Title}" Margin="10,0,10,0" Loaded="element_Loaded" />
            </StackPanel>
        </DataTemplate>
    </telerik:RadDocumentPane.TitleTemplate>
</telerik:RadDocumentPane>

ExtendedRadDocumentPane.xaml.cs:
-----------------------------------------------

public partial class ExtendedRadDocumentPane : RadDocumentPane
    {
        public string IconPath { get; set; }

        public ExtendedRadDocumentPane()
        {
            InitializeComponent();
        }

        private void element_Loaded(object sender, RoutedEventArgs e)
        {
            FrameworkElement element = sender as FrameworkElement;
            element.DataContext = this;
        }

        private void btnClose_Loaded(object sender, RoutedEventArgs e)
        {
            Button candidate = sender as Button;
            candidate.Visibility = this.CanUserClose ? Visibility.Visible : Visibility.Collapsed;
        }
    }

 

[Miroslav Nedyalkov]

Hi Bruno,

I can see in your code that you have set your DocumentPane as a DataContext of the components. This is not working in Silverlight 2 if the DocumentPane is already in the visual tree. The other thing is that you have set the DataContentexts multiple times.

I created a project with your code and I also refactored some things. You can find it attached to this post. Unfortunately, we weren't thinking about this scenario when we were designing the Docking control and it is not really easy to be done in the right way. The right way to do this is only by using styles and themes. This is still not possible, but we will add this task to our TODO list, because it would be extremely useful to simplify this task.

However, I used your approach, but tried to reduce the code-behind and event handlers that are hooked up to the events of the DataTemplate parts. I also created DocumentPaneVM that is a view-model of the pane - it holds the properties you need to pass down as a DataContext - Title, IconPath and CanUserClose. I also created an IValueConverter that converts bool to Visibility (for the Close button in the template).

In the page, I edited your code to work with this view-model. Now you need to just set the Header property of the new type of Pane and everything will be bound to it.

When I did the changes and put a local image with build action "Resource" everything worked fine.

Hope this information is helpful.

Kind regards,
Miroslav Nedyalkov
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[Bruno]

Hi Miroslav,

Thanks very much for the help! It works like a charm!

Best regards,
Bruno

[Tushar]

Hi,

I downloaded this solution and yes it works fine. I have a related question about docking RadPanes. When i drag the RadPane i see a Close button (X) in red on the top right corner of the RadPane window. How do i disable this button or handle events on this button?

With the current solution, if you click on X (Close) button in red both the RadPanes would be lost. Will highly appreciate your solution on this one.

Tushar

[Miroslav Nedyalkov]

Hi Tushar,

When the close button of the ToolWindow (I believe that this is the red button in the top right corner) is clicked, the WindowClose event of the Docking control is fired and could handle it and reopen the ToolWindow.

In the latest internal build we changed the logic of this button a little - it closes all the panes in the ToolWindow that can be closed and if there is some panes left open - it stays open, so you can stop the ToolWindow to close by stopping the close of the panes. These changes are included in the version of the latest internal build (2009.2.828.1030).

Hope this helps.

Regards,
Miroslav Nedyalkov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.