Title

[tomas]

Hello Telerik.

I have this title dataTemplate.
 

    <DataTemplate x:Key="TitleTemplateWithIcon">
        <StackPanel Orientation="Horizontal">
            <Image Source="images/icons16x16/home.png" Width="16" Height="16" Margin="2 2 5 2" />
            <ContentPresenter Content="{Binding}" VerticalAlignment="Center"/>
        </StackPanel>
    </DataTemplate>

This works. But I need to use this template for more then one pane with different images. Do you know, how to do that, please?

I mean how to pass the image source value as a parameter to this template.

Thank you very much Tom

[Konstantina]

Hello tomas,

Thank you for the question.

If I have correctly understood you, you need to put an image in the RadDocking's header. To do so you can check out the attached example. There, I created a new class, which sets the content and the image source of the RadPane. 

Putting different images in the title of RadDocking is a complicated task as the title is actually a string. We will do our best to improve this functionality for the Q1 release next year.

If you have any further questions please do not hesitate to contact us again.

Best wishes,
Konstantina
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.

[tomas]

Thank you for your replay.

Currently I have no problem with image in panes title, because my dataTemplate works well.

But:

I have 5 panes and I don't want to have special dataTemplate for every pane, just because for that reason that images are different.
 
I am thinking about attached properties and relative binding to read image source...

Thank you Tom

[Konstantina]

Hello tomas,

I am sending you the sample project. There, a new class is made, which acts as a converter. When the binding is evaluated the Convert method gets the value parameter and returns it as a string. This returned value is the value that is set for the ImageSource. This depends on the Title property of the pane. Both Header and Title template can work together, as it is shown in the example.

Hope this will work for you.

Best wishes,
Konstantina
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.

[tomas]

Hello Konstantina.

Thank you very much. It is true your project solves my problem, but it is not very elegant. I would like to have common strategy to decorate your controls with additional properties.

You can read about it here: http://forums.silverlight.net/forums/p/102737/299184.aspx

So please, try to understand my code. It is very short:

Main page has a one new dependency property PaneImgSource:

public partial class MainPage : UserControl
    {
        public static readonly DependencyProperty PaneImgSourceProperty = DependencyProperty.RegisterAttached(
                                         "PaneImgSource",                  //Name of the property
                                         typeof(string),             //Type of the property
                                         typeof(MainPage),                   //Type of the provider of the registered attached property
                                         null);                     //Callback invoked in case the property value has changed

        public static void SetPaneImgSource(DependencyObject obj, string paneImgSource)
        {
            obj.SetValue(PaneImgSourceProperty, paneImgSource);
        }

        public static string GetPaneImgSource(DependencyObject obj)
        {
            return (string)obj.GetValue(PaneImgSourceProperty);
        }

        public MainPage()
        {
            InitializeComponent();
        }

    }

The TitleTemplate looks like this:

    <DataTemplate x:Key="TitleTemplateWithIcon">
        <StackPanel Orientation="Horizontal" xmlns:local="clr-namespace:Fluensis_SL;assembly=Fluensis_SL">
            <Image Source="{Binding Path=(local:MainPage.PaneImgSource), RelativeSource={RelativeSource TemplatedParent}}" Width="16" Height="16" Margin="2 2 5 2" />
            <ContentPresenter Content="{Binding}" VerticalAlignment="Center"/>
        </StackPanel>
    </DataTemplate>

The namespace should be declared because of some Silverlight bug...  (again the same url http://forums.silverlight.net/forums/p/102737/299184.aspx)

The MainPage.xaml contains your docking system with new attached property:

<telerikDocking:RadDocking Grid.Row="1" x:Name="docking"  HasDocumentHost="False">
            <telerikDocking:RadSplitContainer InitialPosition="DockedLeft" local:MainPage.PaneImgSource="images/icons16x16/key.png">
                <telerikDocking:RadPaneGroup   local:MainPage.PaneImgSource="images/icons16x16/key.png" >
                    <telerikDocking:RadPane Title="My content" local:MainPage.PaneImgSource="images/icons16x16/key.png" TitleTemplate="{StaticResource TitleTemplateWithIcon}">
                        <telerikDocking:RadPane.Header>
                            <StackPanel Orientation="Horizontal">
                                <Image Source="images/icons16x16/home.png" Width="16" Height="16" Margin="2 0 5 0" />
                                <TextBlock Text="Můj obsah" />
                            </StackPanel>
                        </telerikDocking:RadPane.Header>
                    </telerikDocking:RadPane>

                    <telerikDocking:RadPane Header="Content"/>
                                </telerikDocking:RadPaneGroup>
            </telerikDocking:RadSplitContainer>


        </telerikDocking:RadDocking>

There is no error, but icon position (space) in Title is empty. IT seems to me, that binding to attached propery is not working.

Thank you very much.

Tom

[Konstantina]

Hi Tomas,

The problem in your code was that you are using RelativeSource of type TemplatedParent that is meant to be used with ControlTemplate, not with DataTemplate. What happens is that you bind the image to the attached property of the ContentPresenter that displays the Title. Unfortunately, you don't have access to the pane that owns the Title from the TitleTemplate. If you want to place your paths in XAML you have one more option - you could create a ValueConvert that separates the Title value and takes the first part as the actual Title text and the second one as an Image path. You are right that it is not very elegant, but this is a work around of the Docking control limitation and it is normal for a work around to be not very elegant.

We are targeting this limitation and we should resolve it soon. I've edited the example I sent to you and added a ValueConverter that does the job. Please, find the attached project.

Kind regards,
Konstantina
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.

[tomas]

Hello Konstantina.

You have really helped me.

Thank you and have a nice day.

Tom