[Solved] Apply style to RadPane

[Dan]

I'm creating a floating RadPane with custom style, but the width, height and content changes are not visible, only header change and I'm wondering why this code isn't working. Here is the sample

<UserControl x:Class="SilverlightApplication4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:radDocking="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <Grid x:Name="LayoutRoot">
        <StackPanel>
        <Button Height="100" Width="100" Content="Click" Click="Button_Click" />
        <radDocking:RadDocking x:Name="Docking1" >
        </radDocking:RadDocking>
            </StackPanel>
        <Grid.Resources>
            <Style x:Name="PaneStyle" TargetType="radDocking:RadPane">
                <Setter Property="Header" Value="New Pane" />
                <Setter Property="Width" Value="300" />
                <Setter Property="Height" Value="300" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="radDocking:RadPane">
                            <ListBox>
                                <ListBoxItem Content="Item1" />
                                <ListBoxItem Content="Item2" />
                                <ListBoxItem Content="Item3" />
                            </ListBox>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
    </Grid>
</UserControl>

namespace SilverlightApplication4
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Click( object sender, RoutedEventArgs e )
        {
            RadPane pane = new RadPane();
            pane.Style = (Style) LayoutRoot.Resources["PaneStyle"];
            RadPaneGroup group = new RadPaneGroup();
            group.Items.Add(pane);
            RadSplitContainer split = new RadSplitContainer();
            split.InitialPosition = Telerik.Windows.Controls.Docking.DockState.FloatingDockable;
            split.Items.Add(group);
            Docking1.Items.Add(split);
        }
    }
}

[Miroslav Nedyalkov]

Hi Dan,

The RadPane is a descendent of the RadTabItem control. That means that has a Header that is displayed at the bottom of the parent PaneGroup if there is more then one or at the top if the Pane is in the DocumentHost area. It also has a content that is displayed in the middle of the PaneGroup that at the other hand is a descendent of the RadTabControl control and acts in a similar way - displays all its children and the content of only one of  them.

Hope this information helps you better understand how the Panes work.

If you could describe what you are trying to achieve we will try to help.

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.

[Dan]

Using the code above, instead of getting this: Good I'm getting this: Bad. What is wrong with the code ?

[Miroslav Nedyalkov]

Hello Dan,

The code you sent displays a ListBox as a Header of the Pane. In your example you have just one Pane and its header is not displayed. If need to have a ListBox as content of the Pane (as shown on the "Good" image) you could either set the list box as Content of ContentTemplate not as Template.

Please, take a look at the following style:

<Style x:Name="PaneStyle" TargetType="telerikDocking:RadPane">
    <Setter Property="Header" Value="New Pane" />
    <Setter Property="Width" Value="300" />
    <Setter Property="Height" Value="300" />
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <ListBox>
                    <ListBoxItem Content="Item1" />
                    <ListBoxItem Content="Item2" />
                    <ListBoxItem Content="Item3" />
                </ListBox>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

Hope this solves the problem.

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.