[Solved] Is it possible to change the text orientation from "BottomToTop" to "TopToBottom" on a RadPage/Header?

[Rob]

Hello,

Please see the following sample.  My goal is to flip the header (when the RadPane is not pinned) so that it's text is written from TopToBottom (notice "h3").  The problem is that when the RadPane is pinned, the same HeaderTemplate is used which displays the text upside down (notice "h1").  "h2" and "h4" are the default telerik orientations which are backwards when compared to a docking application like Visual Studio, for example...

Is there a simple orientation property that I am missing?  Or is there a better way to accomplish this?  I noticed the HeaderTemplateSelector - I think I could get around it with a converter bound to RadPane.IsPinned and a template selector but that might be a little too hacky.

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    x:Class="SilverlightApplication12.MainPage"
    Width="400" Height="300"
>

<UserControl.Resources>

   <DataTemplate x:Key="dt_TitleTemplate">
      <TextBlock Text="{Binding}" Foreground="#FF455B75" FontSize="11" FontWeight="Bold" FontFamily="Century Gothic" VerticalAlignment="Center" />
   </DataTemplate>

   <DataTemplate x:Key="dt_HeaderTemplate">
      <TextBlock Text="{Binding}" Foreground="#FF455B75" FontSize="11" FontFamily="Century Gothic" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
         <TextBlock.RenderTransform>
            <CompositeTransform ScaleX="-1" ScaleY="-1" />
         </TextBlock.RenderTransform>
      </TextBlock>
   </DataTemplate>

</UserControl.Resources>


<Border x:Name="LayoutRoot" Background="White" Padding="10" >

   <telerik:RadDocking>

      <telerik:RadDocking.DocumentHost>
         <telerik:RadSplitContainer>
            <telerik:RadPaneGroup>
               <telerik:RadPane Title="tMAIN" Header="hMAIN" CanUserClose="False" CanFloat="False" CanUserPin="False">
                  <Border Background="YellowGreen" BorderBrush="Green" BorderThickness="2">
                     <TextBlock Text="MAIN" Foreground="Green" FontSize="30" VerticalAlignment="Center"       HorizontalAlignment="Center" TextAlignment="Center" />
                  </Border>
               </telerik:RadPane>
            </telerik:RadPaneGroup>
         </telerik:RadSplitContainer>
      </telerik:RadDocking.DocumentHost>

      <telerik:RadSplitContainer InitialPosition="DockedRight">
         <telerik:RadPaneGroup x:Name="grpRight" telerik:RadDocking.SerializationTag="grpRight"       TabOrientation="Horizontal" TabStripPlacement="Bottom">

            <telerik:RadPane IsPinned="True" Title="t1" TitleTemplate="{StaticResource dt_TitleTemplate}" Header="h1" HeaderTemplate="{StaticResource dt_HeaderTemplate}" CanUserClose="False" CanFloat="False" CanDockInDocumentHost="False" ContextMenuTemplate="{x:Null}">
               <Border Background="Pink" BorderBrush="Red" BorderThickness="2">
                  <TextBlock Text="1" Foreground="Red" FontSize="30" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" />
               </Border>
            </telerik:RadPane>

            <telerik:RadPane IsPinned="True" Title="t2"  Header="h2"  CanUserClose="False" CanFloat="False" CanDockInDocumentHost="False" ContextMenuTemplate="{x:Null}" telerik:RadDocking.SerializationTag="paneNotes">
               <Border Background="LightBlue" BorderBrush="Blue" BorderThickness="2">
                  <TextBlock Text="2" Foreground="Blue" FontSize="30" VerticalAlignment="Center"    HorizontalAlignment="Center" TextAlignment="Center" />
               </Border>
            </telerik:RadPane>

            <telerik:RadPane IsPinned="False" Title="t3" TitleTemplate="{StaticResource dt_TitleTemplate}" Header="h3"    HeaderTemplate="{StaticResource dt_HeaderTemplate}" CanUserClose="False" CanFloat="False" CanDockInDocumentHost="False" ContextMenuTemplate="{x:Null}">
               <Border Background="PaleGoldenrod" BorderBrush="Gold" BorderThickness="2">
                  <TextBlock Text="3" Foreground="Gold" FontSize="30" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" />
               </Border>
            </telerik:RadPane>

            <telerik:RadPane IsPinned="False" Title="t4" Header="h4" CanUserClose="False" CanFloat="False" CanDockInDocumentHost="False" ContextMenuTemplate="{x:Null}">
               <Border Background="Plum" BorderBrush="Fuchsia" BorderThickness="2">
                  <TextBlock Text="4" Foreground="Fuchsia" FontSize="30" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" />
               </Border>
            </telerik:RadPane>

         </telerik:RadPaneGroup>

      </telerik:RadSplitContainer>

   </telerik:RadDocking>

</Border>
</UserControl>

asdasd 

[Rob]

Hmmm.

I found this post which basically says that the HeaderTemplateSelector sucks...

http://www.telerik.com/community/forums/silverlight/docking/programmatic-headertemplateselector-in-radpane-not-working.aspx#1989111

Have to find another way I guess.

[Rob]

Solved it with a pretty trick converter...

<telerik:RadPane x:Name="p2" Title="x2" Header="{Binding ElementName=p2, Path=IsPinned, Converter={StaticResource rhc}, ConverterParameter='x2'}" ContextMenuTemplate="{x:Null}">
   ...
</telerik:RadPane>

public class RadPaneRotatedHeaderConverter : IValueConverter
{

    #region IValueConverter Members

    static TextBlock tb = new TextBlock()
    {
        Foreground = new SolidColorBrush(CommonUtility.HexToColor("#FF455B75")),
        FontSize = 11,
        FontFamily = new FontFamily("Century Gothic"),
        VerticalAlignment = VerticalAlignment.Center,
        RenderTransformOrigin = new Point(0.5, 0.5),
    };

    static CompositeTransform ct = new CompositeTransform()
    {
        ScaleX = -1,
        ScaleY = -1
    };

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {

        bool b = (bool)value;
        string p = (string)parameter;

        tb.Text = p.ToUpper();

        if (!b)
        {
            tb.RenderTransform = ct;
        }

        return tb;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return DependencyProperty.UnsetValue;
    }

    #endregion IValueConverter Members

}

[Rob]

Unfortunately, I spoke too soon.  There's an "ArgumentException" thrown from within the telerik controls once you add more than one RadPane into the group...

[Ivo]

Hi,

In order to accomplish this you will have to use the RadPane's style included with your binaries and modify it for your needs. First of all I would suggest you to place the TabItemContentPresenter with name "HeaderElement" into a Telerik's LayoutTransformControl. After this into the "Unpinned" Visual State a single animation will do the trick. Here is sample code:

<telerikPrimitives:LayoutTransformControl x:Name="PaneTxtTransform">
    <Telerik_Windows_Controls_Primitives:TabItemContentPresenter x:Name="HeaderElement"
                                                                ContentTemplate="{TemplateBinding HeaderTemplate}"
                                                                Content="{TemplateBinding Header}"
                                                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                                Padding="{TemplateBinding Padding}"
                                                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</telerikPrimitives:LayoutTransformControl>

<VisualState x:Name="Unpinned">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ChromeUnpinned">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Visible</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>

        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="HeaderElement">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
        </ObjectAnimationUsingKeyFrames>

        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneTxtTransform"
            Storyboard.TargetProperty="LayoutTransform">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <RotateTransform Angle="180" />
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

There is also a sample project attached.

All the best, Ivo
the Telerik team

[Rob]

Hello Ivo,

It looks like this only works once...  If I start with the items initally pinned, and then unpin them, it is fine.  If I pin/unpin them again, it goes back to the bottom-to-top orientation.

I tried putting a reset back into the "Pinned" state changing the angle back to "0" but it failed to solve the problem.

[Ivo]

Hello Rob,

Yes you are right, this is an issue at our side. However if you make the style implicit it will work as expected. You can find the editted project attached.

All the best, Ivo
the Telerik team