Custom settings pan

[Hyunho]

Dear sir,

I want to make a own custom settings pan to a custom diagram shape.
I referred to a Mindmap example in the  WPF demo. 
I tried to make SettingsPane.xaml like the Mindmap sample, but RadTabControl in SettingsPane.xaml seems to be worked abnormally.
It display a RadTabControl but it can not display RadTabItem content.

Could you tell me how to make a custom settings pan with TabControl?

I tested it with your demo source as follows.

[SettginsPan.xaml of Diagrams.WPF project in Demo]
<UserControl x:Class="Telerik.Windows.Examples.Diagrams.MindMap.SettingsPane"
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:local="clr-namespace:Telerik.Windows.Examples.Diagrams.MindMap"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" d:DesignHeight="300" d:DesignWidth="300"
mc:Ignorable="d">
<Border MouseLeftButtonDown="Border_MouseLeftButtonDown">
<Grid Margin="15 15 0 15">
            <telerik:RadTabControl>
                <telerik:RadTabItem Header="General" Content="hello"/>
                <telerik:RadTabItem Header="Video Profiles"  Content="hello2"/>
            </telerik:RadTabControl>
       </Grid></Border>

It can't display content of RadTabItem. Actually I want to insert RadGridView into RadTabItem, but It doesn't work.
My custom shape should display fully customized settings pan content with tab control.

Thank you.

[Pavel R. Pavlov]

Hello Hyunho,

In our MindMap example we use a customized RadGeometryDropDownButton (RadDropDownButton with a proper style will also do the work) to show the SettingsPane. Actually, the user control defined in the SettingsPane.xaml file is visualized as DropDownContent of the button. For more details you can take a closer look at the style called "rootShapeStyle", defined in the "MindMapStyles.xaml" file. Please note that the style changes the Template property, rather than the ContentTemplate property.

In order to follow this approach you can customize the ContentTemplate of your custom shapes using a Style like this:

<Style x:Key="shapeStyle" TargetType="telerik:RadDiagramShape">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="30" />
                    </Grid.ColumnDefinitions>

                    <!-- your custom template -->

                    <telerik:RadDropDownButton Grid.Column="1" Grid.Row="0" HorizontalAlignment="Right" VerticalAlignment="Top">
                        <telerik:RadDropDownButton.DropDownContent>
                            <local:CustomPane Width="235" Height="205" />
                        </telerik:RadDropDownButton.DropDownContent>
                    </telerik:RadDropDownButton>
                </Grid>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

Where local:CustomPane is the user control used as SettingsPane.

Please give this approach a try and let me know if you have any other questions.

Regards,
Pavel R. Pavlov
the Telerik team

[Hyunho]

Hello Pavel,
Thank you for your response.

I have tried to use ContentTemplate not Template as you mentioned, but it is showing only second tab content.
Please see a attached image.
It only show second content and I can't move first tab.

* diagram:CameraShape is just a custom shape class derived from RadDiagramShape.
<Style x:Key="shapeStyle" TargetType="diagram:CameraShape">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="30" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="30" />
                        </Grid.ColumnDefinitions>

                        <!-- your custom template -->

                        <telerik:RadDropDownButton Grid.Column="1" Grid.Row="0" HorizontalAlignment="Right" VerticalAlignment="Top">
                            <telerik:RadDropDownButton.DropDownContent>
                                <local:CameraSettingsPane Width="235" Height="205" />
                            </telerik:RadDropDownButton.DropDownContent>
                        </telerik:RadDropDownButton>
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

[Pavel R. Pavlov]

Hi Hyunho,

I tried to reproduce your issue with our latest official release (Q1 SP1 2013) and it seems that the code works as expected. Can you please try to reproduce your issue in a separate project and send it to us so we will be able to fully understand what causes it. If you do so we will to advice you how to implement your requirements.

Thank you for your cooperation.

Kind regards,
Pavel R. Pavlov
the Telerik team

[Hyunho]

Hello Pavel,
Thank you for your reply.
I found a problem in my application, and I fixed it.
As you mentioned, now tab control works.
Thank you for your help.

[Hyunho]

I'm sorry, I have one more question.

But I found strange part in connection with tab control in a settings pan.

I tested it with MindMap sample and I modified RadGeometryDropDownButton.DropDownContent of firstLevelShapeStyle it can call my usercontrol including tab control. (I didn't change other parts)

<telerik:RadGeometryDropDownButton.DropDownContent>
         <local:MySettingsPaneWithTabControl Width="235" Height="205" />
</telerik:RadGeometryDropDownButton.DropDownContent>

It couldn't display content of tab control, but when I fixed RadGeometrySmallDropDownButtonStyle as follows, it works well.

<Style x:Key="RadGeometrySmallDropDownButtonStyle" TargetType="telerik:RadGeometryDropDownButton">
    <Setter Property="IsOpen" Value="False" />
    <Setter Property="ShouldCenterPopup" Value="false" />
    <Setter Property="Width" Value="16" />
    <Setter Property="Height" Value="16" />
    <Setter Property="DropDownPlacement" Value="Right" />
    <Setter Property="Geometry"
            Value="M3.6943,11.9199L4.1323,9.5549C4.1443,9.4019,4.1953,9.2459,4.2973,9.1289L9.4233,4.0049L11.8853,6.4669L6.7593,11.5919C6.7043,11.6469,6.4893,11.7749,6.4183,11.7869L4.0083,12.2339C3.7943,12.2749,3.6533,12.1349,3.6943,11.9199 M4.8903,11.4789L6.2383,11.2519L10.9273,6.5619L10.3673,6.0059L5.7093,10.6679L4.8153,9.7169L4.5693,11.1329C4.7253,11.1989,4.8253,11.3219,4.8903,11.4789 M12.4513,5.9019L9.9893,3.4399L10.7863,2.6439C11.0063,2.4229,11.3643,2.4229,11.5853,2.6439L13.2483,4.3069C13.4683,4.5269,13.4683,4.8849,13.2483,5.1059z" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="CloseOnClick" Value="False" />
    <Setter Property="Margin" Value="0" />
    <Setter Property="FontFamily" Value="Segoe UI" />
    <!--<Setter Property="Foreground" Value="White" />-->
    <Setter Property="Template">

Could you tell me why Propery::Foreground effect the child user control?

[Pavel R. Pavlov]

Hello Hyunho,

By default the Foreground property of the RadGeometryDropDownButton is inherited by its DropDownContent. When you set it to White (same as the Background of the RadTabControl) you are not able to see it because the colors are not antithetic. Actually you are trying to read white text on white paper.

Regards,
Pavel R. Pavlov
the Telerik team