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

7 posts, 0 answers
  1. Rob
    Rob avatar
    238 posts
    Member since:
    Jan 2009

    Posted 13 Apr 2012 Link to this post

    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
        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 

  2. Rob
    Rob avatar
    238 posts
    Member since:
    Jan 2009

    Posted 13 Apr 2012 Link to this post

    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.
  3. DevCraft banner
  4. Rob
    Rob avatar
    238 posts
    Member since:
    Jan 2009

    Posted 13 Apr 2012 Link to this post

    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
     
    }



  5. Rob
    Rob avatar
    238 posts
    Member since:
    Jan 2009

    Posted 13 Apr 2012 Link to this post

    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...
  6. Ivo
    Admin
    Ivo avatar
    390 posts

    Posted 19 Apr 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  7. Rob
    Rob avatar
    238 posts
    Member since:
    Jan 2009

    Posted 19 Apr 2012 Link to this post

    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.
  8. Ivo
    Admin
    Ivo avatar
    390 posts

    Posted 23 Apr 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top
DevCraft banner