HTML Place Holder PlaneProjection RotationY="90" Does not work

[Tony]

I have downloaded a sample piece of code from the site that does the same transforms as you move from the code view to example view on your demo site.  In the example code you will see that I place 2 grids side by side --If you run the story board the grid on the left rotates and disappears while the grid on the right rotates and appears.

If I repleace the Grid on the right with the HTML Place Holder (see the code commented with the label  "PlaceholderCommented out") - the transform when the screen is loaded has the placehlder shifted down and to the right, instead of  rotated on the y axis.

How do I fix the issue?

<UserControl xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"  xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"  x:Class="LBMX_SampleSite.Views.InvioceInbox"
    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" xmlns:telerikRibbonBar="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.RibbonBar" xmlns:telerikGridView="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
             Width="auto" Height="auto"

             >


    <UserControl.Resources>


        <Storyboard x:Name="Transition" BeginTime="0:0:2">

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="InvoiceGrid"
                    Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" Value="0"
                        KeySpline="0,0,0.389999985694885,1" />
                <SplineDoubleKeyFrame
                        KeyTime="00:00:00.8190000" Value="-90" />
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="InvoiceGrid"
                    Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationZ)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" Value="0"
                        KeySpline="0,0,0.389999985694885,1" />
                <SplineDoubleKeyFrame KeySpline="0.200000002980232,0,0.400000005960464,1"
                        KeyTime="00:00:01.3000000" Value="0" />
                <SplineDoubleKeyFrame
                        KeySpline="0.170000001788139,0,0.379999995231628,0.990000009536743"
                        KeyTime="00:00:01.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="InvoiceGrid"
                    Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetZ)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" Value="-525"
                        KeySpline="0,0,0.389999985694885,1" />
                <SplineDoubleKeyFrame KeySpline="0.200000002980232,0,0.400000005960464,1"
                        KeyTime="00:00:01.3000000" Value="-525" />
                <SplineDoubleKeyFrame
                        KeySpline="0.170000001788139,0,0.379999995231628,0.990000009536743"
                        KeyTime="00:00:01.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="InvoiceGrid"
                    Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"
                        KeySpline="0.200000002980232,0,0.379999995231628,1" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.7000000" Value="0" />
                <EasingDoubleKeyFrame KeyTime="00:00:01.3000000" Value="1" />
            </DoubleAnimationUsingKeyFrames>



            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.3000000" Storyboard.TargetName="PDFViewer"
                    Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" Value="90"
                        KeySpline="0,0,0.389999985694885,1" />
                <SplineDoubleKeyFrame KeySpline="0.200000002980232,0,0.400000005960464,1"
                        KeyTime="00:00:00.7190000" Value="0" />
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PDFViewer"
                    Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationZ)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" Value="0"
                        KeySpline="0,0,0.389999985694885,1" />
                <SplineDoubleKeyFrame KeySpline="0.200000002980232,0,0.400000005960464,1"
                        KeyTime="00:00:01.3000000" Value="0" />
                <SplineDoubleKeyFrame
                        KeySpline="0.170000001788139,0,0.379999995231628,0.990000009536743"
                        KeyTime="00:00:01.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PDFViewer"
                    Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetZ)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" Value="-525"
                        KeySpline="0,0,0.389999985694885,1" />
                <SplineDoubleKeyFrame KeySpline="0.200000002980232,0,0.400000005960464,1"
                        KeyTime="00:00:01.3000000" Value="-525" />
                <SplineDoubleKeyFrame
                        KeySpline="0.170000001788139,0,0.379999995231628,0.990000009536743"
                        KeyTime="00:00:01.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PDFViewer"
                    Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.8190000" Value="1"
                        KeySpline="0.200000002980232,0,0.379999995231628,1" />
                <EasingDoubleKeyFrame KeyTime="00:00:01.3000000" Value="1" />
            </DoubleAnimationUsingKeyFrames>

        </Storyboard>


        <Storyboard x:Name="TransitionReverse" BeginTime="0:0:2">

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PDFViewer"
                    Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" Value="0"
                        KeySpline="0,0,0.389999985694885,1" />
                <SplineDoubleKeyFrame
                        KeyTime="00:00:00.8190000" Value="-90" />
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PDFViewer"
                    Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationZ)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" Value="0"
                        KeySpline="0,0,0.389999985694885,1" />
                <SplineDoubleKeyFrame KeySpline="0.200000002980232,0,0.400000005960464,1"
                        KeyTime="00:00:01.3000000" Value="0" />
                <SplineDoubleKeyFrame
                        KeySpline="0.170000001788139,0,0.379999995231628,0.990000009536743"
                        KeyTime="00:00:01.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PDFViewer"
                    Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetZ)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" Value="-525"
                        KeySpline="0,0,0.389999985694885,1" />
                <SplineDoubleKeyFrame KeySpline="0.200000002980232,0,0.400000005960464,1"
                        KeyTime="00:00:01.3000000" Value="-525" />
                <SplineDoubleKeyFrame
                        KeySpline="0.170000001788139,0,0.379999995231628,0.990000009536743"
                        KeyTime="00:00:01.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PDFViewer"
                    Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"
                        KeySpline="0.200000002980232,0,0.379999995231628,1" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.7000000" Value="0" />
                <EasingDoubleKeyFrame KeyTime="00:00:01.3000000" Value="1" />
            </DoubleAnimationUsingKeyFrames>



            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.3000000" Storyboard.TargetName="InvoiceGrid"
                    Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" Value="90"
                        KeySpline="0,0,0.389999985694885,1" />
                <SplineDoubleKeyFrame KeySpline="0.200000002980232,0,0.400000005960464,1"
                        KeyTime="00:00:00.7190000" Value="0" />
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="InvoiceGrid"
                    Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationZ)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" Value="0"
                        KeySpline="0,0,0.389999985694885,1" />
                <SplineDoubleKeyFrame KeySpline="0.200000002980232,0,0.400000005960464,1"
                        KeyTime="00:00:01.3000000" Value="0" />
                <SplineDoubleKeyFrame
                        KeySpline="0.170000001788139,0,0.379999995231628,0.990000009536743"
                        KeyTime="00:00:01.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="InvoiceGrid"
                    Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetZ)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" Value="-525"
                        KeySpline="0,0,0.389999985694885,1" />
                <SplineDoubleKeyFrame KeySpline="0.200000002980232,0,0.400000005960464,1"
                        KeyTime="00:00:01.3000000" Value="-525" />
                <SplineDoubleKeyFrame
                        KeySpline="0.170000001788139,0,0.379999995231628,0.990000009536743"
                        KeyTime="00:00:01.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="InvoiceGrid"
                    Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.8190000" Value="1"
                        KeySpline="0.200000002980232,0,0.379999995231628,1" />
                <EasingDoubleKeyFrame KeyTime="00:00:01.3000000" Value="1" />
            </DoubleAnimationUsingKeyFrames>

        </Storyboard>
    </UserControl.Resources>



    <Grid x:Name="LayoutRoot" Background="White" Height="auto">
        <Grid.Projection>
            <PlaneProjection CenterOfRotationX="0.5" CenterOfRotationY=".5" CenterOfRotationZ="0.5"></PlaneProjection>
        </Grid.Projection>
        <Grid.RowDefinitions>
            <RowDefinition Height="100"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="30"></RowDefinition>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.527*"/>
            <ColumnDefinition Width="0.473*"/>
        </Grid.ColumnDefinitions>


        <ScrollViewer BorderThickness="0" VerticalScrollBarVisibility="Auto" Padding="12,0,12,0" Margin="12" d:IsHidden="True" Grid.ColumnSpan="2"/>

        <telerikRibbonBar:RadRibbonBar   Name="radRibbonBar1"   Grid.Row="0"  Grid.ColumnSpan="2"/>



        <Grid x:Name="MainGrid" Grid.Row="1" Grid.ColumnSpan="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.527*"/>
                <ColumnDefinition Width="0.473*"/>
            </Grid.ColumnDefinitions>



            <telerikGridView:RadGridView x:Name="InvoiceGrid" Grid.Row="1" Grid.Column="0" Visibility="Visible">

                <telerikGridView:RadGridView.Projection>
                    <PlaneProjection />
                </telerikGridView:RadGridView.Projection>



            </telerikGridView:RadGridView>

            <!-- PlaceholderCommented out

            <telerikGridView:RadGridView x:Name="PDFViewer" Grid.Row="1" Grid.Column="1" Visibility="Visible" Background="AliceBlue">

                <telerikGridView:RadGridView.Projection>
                    <PlaneProjection RotationY="90" />
                </telerikGridView:RadGridView.Projection>

            </telerikGridView:RadGridView>-->


            <telerik:RadHtmlPlaceholder x:Name="PDFViewer" Grid.Row="1" Grid.Column="1" Visibility="Visible"   >
                    <telerik:RadHtmlPlaceholder.Projection>
                        <PlaneProjection RotationY="90" />
                    </telerik:RadHtmlPlaceholder.Projection>
            </telerik:RadHtmlPlaceholder>
        </Grid>

        <telerikGridView:RadDataPager Source="{Binding ItemsSource, ElementName=InvoiceGrid}"  VerticalAlignment="Bottom" d:LayoutOverrides="Height" Grid.ColumnSpan="2" DisplayMode="All" Grid.Row="3"/>

    </Grid>
</UserControl>

[Valentin.Stoychev]

Hi Tony,

You can't rotate the html placeholder. It is not part from the Silverlight visual tree - it is rendered in the html page in order to display the html. This is a limitation by design and can't be workarounded.

Regards,
Valentin.Stoychev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.