Home / Community & Support / Developer Productivity Tools Forums / Silverlight > CoverFlow > Some issues in vertical orientation?

• Marco

  Posted on Apr 12, 2011 (permalink)

  Hello,
  I would like to use the cover flow control in vertical orientation but trying to reproduce your sample in demos I've noticed the following:
  - when I bound the CoverFlowItemTemplate to a dinamic image, the image is rotated of 90° when seen in vertical orientation while if I list manually each image in the Content area of the control, they are displayed correctly.
  - If I apply a RenderTransform to rotate the image of 90° in the vertical orientation, the image is now displayed in the correct position correctly but I have a lot of artifact (a strange rectangulare bigger area exceeding the area of the image)
  - Anyway, we lost some nice capability of the coverflow control when seend horizontally, namely the reflection.
  
  Do you have a nice sample to obtain a correct behavior of this control when used vertically?
  
  Thanks in advance for your kind answer.
  Marco.
  

  Reply

• Marco

  Posted on Apr 14, 2011 (permalink)

  Uhmm...any help from the fantastic guys of Telerik...? :-)

  Reply

• Miroslav Nedyalkov Miroslav Nedyalkov

  Posted on Apr 18, 2011 (permalink)

  Hello Marco,

   I tried to reproduce the problem you are observing, but I couldn't. Please refer to the attached project that displays 4 image using data binding and item template. Please let me know if I'm missing something.
  
  The reflection is missing, because we decided that it will not look good in vertical mode. Where the reflection should appear in your opinion?

  Greetings,
  Miroslav Nedyalkov
  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

  Attached files

  • VerticalCoverFlow.zip

  Reply

• a

  Posted on Jul 27, 2011 (permalink)

  Hi, one problem is still there in Orientation= Vertical property of RadCoverflow. If you put only itemTemplate for that RadCoverFlow, its working fine in Vertical orientation. But if u assign ItemcontainerStyle, then it shows items 90 degree transformed. As shown in below sample. I have taken the same sample as u have uploaded here. Can you please guide , how to solve this issue? As we have to set ItemContainerStyle for VSM that does some styling when item is selected or mouse over.....
  

  <UserControl x:Class="VerticalCoverFlow.MainPage"

      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"

      xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

      mc:Ignorable="d"

      d:DesignHeight="300" d:DesignWidth="400">

      <UserControl.Resources>

          <Style x:Key="itemStyle" TargetType="ListBoxItem">

              <Setter Property="Template" >

                  <Setter.Value>

                      <ControlTemplate TargetType="ListBoxItem">

                          <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/>

                      </ControlTemplate>

                  </Setter.Value>

              </Setter>

          </Style>

      </UserControl.Resources>

          <Grid x:Name="LayoutRoot" Background="White">

          <telerik:RadCoverFlow ItemContainerStyle="{StaticResource itemStyle}" Orientation="Vertical" CameraViewpoint="Center" ItemsSource="{Binding}">

              <telerik:RadCoverFlow.ItemTemplate>

                  <DataTemplate>

                      <Image Source="{Binding}" Width="150" Height="150"/>

                  </DataTemplate>

              </telerik:RadCoverFlow.ItemTemplate>

          </telerik:RadCoverFlow>

      </Grid>

  </UserControl>

  Reply

• Pana Pana

  Posted on Aug 2, 2011 (permalink)

  Hi,
  
  We are useing that magical template part "layoutTransform" that should be a LayoutTransformControl to set up rotation. If your items' ControlTemplate have no such part you will lose the rotation of the RadCoverFlow's children.
  
  In the defult RadCoverFlowItem's Style it is defined like:
  

  <telerikPrimitives:LayoutTransformControl x:Name="layoutTransform">

  And all the content is inside.
  
  You could use this style from Q2 2011 as refference:
  
  

  <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

                

      xmlns:animation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls"

      xmlns:telerikTransitions="clr-namespace:Telerik.Windows.Controls.TransitionEffects;assembly=Telerik.Windows.Controls"

      xmlns:telerikChromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"

    

    

      xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"

      xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"

      xmlns:telerikNavigationPrimitives="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls.Navigation"

      xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls"

      xmlns:telerikToolBar="clr-namespace:Telerik.Windows.Controls.ToolBar;assembly=Telerik.Windows.Controls.Navigation"

      xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

      xmlns:mscorlib="clr-namespace:System;assembly=mscorlib" 

      xmlns:dragDrop="clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls"

      xmlns:animationNavigation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls.Navigation"

      xmlns:treeView="clr-namespace:Telerik.Windows.Controls.TreeView;assembly=Telerik.Windows.Controls.Navigation"

      xmlns:telerikTabControl="clr-namespace:Telerik.Windows.Controls.TabControl;assembly=Telerik.Windows.Controls.Navigation"

      xmlns:book="clr-namespace:Telerik.Windows.Controls.Book;assembly=Telerik.Windows.Controls.Navigation"

      xmlns:outlookBarPrimitives="clr-namespace:Telerik.Windows.Controls.OutlookBar;assembly=Telerik.Windows.Controls.Navigation"

      xmlns:primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows"

      xmlns:sys="clr-namespace:System;assembly=mscorlib"

      xmlns:Telerik_Windows_Controls_TileView="clr-namespace:Telerik.Windows.Controls.TileView;assembly=Telerik.Windows.Controls.Navigation"

      xmlns:telerikBreadcrumb="clr-namespace:Telerik.Windows.Controls.Breadcrumb;assembly=Telerik.Windows.Controls.Navigation"

    

  >

      <SolidColorBrush x:Key="DisabledBrush" Color="#99FFFFFF"></SolidColorBrush>

    

        

    

      <Style TargetType="telerikNavigation:RadCoverFlow">

          <Setter Property="Background" Value="Transparent" />

          <Setter Property="IsTabStop" Value="False" />

          <Setter Property="TabNavigation" Value="Once" />

          <Setter Property="ItemsPanel">

              <Setter.Value>

                  <ItemsPanelTemplate>

                      <telerikNavigation:CoverFlowPanel />

                  </ItemsPanelTemplate>

              </Setter.Value>

          </Setter>

          <Setter Property="Template">

              <Setter.Value>

                  <ControlTemplate TargetType="telerikNavigation:RadCoverFlow">

                      <Grid>

                          <VisualStateManager.VisualStateGroups>

                              <VisualStateGroup x:Name="CommonStateGroup">

                                  <VisualState x:Name="Disabled">

                                      <Storyboard>

                                          <ObjectAnimationUsingKeyFrames

                                                  Storyboard.TargetName="DisabledBox"

                                                  Storyboard.TargetProperty="Visibility" Duration="0">

                                              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />

                                          </ObjectAnimationUsingKeyFrames>

                                      </Storyboard>

                                  </VisualState>

                                  <VisualState x:Name="Normal" />

                              </VisualStateGroup>

                          </VisualStateManager.VisualStateGroups>

                            

                          <Border Background="{TemplateBinding Background}"

                                  BorderBrush="{TemplateBinding BorderBrush}"

                                  BorderThickness="{TemplateBinding BorderThickness}">

                              <telerikPrimitives:LayoutTransformControl x:Name="layoutTransform">

       

                                      <ItemsPresenter Margin="{TemplateBinding Padding}" />

             

                              </telerikPrimitives:LayoutTransformControl>

                          </Border>

    

                          <Rectangle x:Name="DisabledBox" Fill="{StaticResource DisabledBrush}"

                                  Visibility="Collapsed" />

                      </Grid>

                  </ControlTemplate>

              </Setter.Value>

          </Setter>

      </Style>

    

      <Style TargetType="telerikNavigation:RadCoverFlowItem">

          <Setter Property="Template">

              <Setter.Value>

                  <ControlTemplate TargetType="telerikNavigation:RadCoverFlowItem">

                      <Border Background="{TemplateBinding Background}"

                              BorderBrush="{TemplateBinding BorderBrush}"

                              BorderThickness="{TemplateBinding BorderThickness}">

                          <vsm:VisualStateManager.VisualStateGroups>

                              <VisualStateGroup x:Name="CommonStates">

                                  <VisualState x:Name="Focused" />

                                  <VisualState x:Name="Disabled">

                                      <Storyboard>

                                          <ObjectAnimationUsingKeyFrames

                                                  Storyboard.TargetName="PART_DisabledBox"

                                                  Storyboard.TargetProperty="Visibility" Duration="0">

                                              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />

                                          </ObjectAnimationUsingKeyFrames>

                                      </Storyboard>

                                  </VisualState>

                                  <VisualState x:Name="MouseOver" />

                                  <VisualState x:Name="Normal" />

                              </VisualStateGroup>

                              <VisualStateGroup x:Name="SelectionStates">

                                  <VisualState x:Name="Selected" />

                                  <VisualState x:Name="Unselected">

                                      <Storyboard>

                                          <ObjectAnimationUsingKeyFrames

                                                  Storyboard.TargetName="ContentElement"

                                                  Storyboard.TargetProperty="IsHitTestVisible"

                                                  Duration="0">

                                              <DiscreteObjectKeyFrame KeyTime="0" Value="False" />

                                          </ObjectAnimationUsingKeyFrames>

                                      </Storyboard>

                                  </VisualState>

                              </VisualStateGroup>

                              <vsm:VisualStateGroup x:Name="ContentStates">

                                  <vsm:VisualState x:Name="Loaded" />

                                  <vsm:VisualState x:Name="Loading">

                                      <Storyboard>

                                          <ObjectAnimationUsingKeyFrames

                                                  Storyboard.TargetName="LoadingVisual"

                                                  Storyboard.TargetProperty="Visibility" Duration="0">

                                              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />

                                          </ObjectAnimationUsingKeyFrames>

                                          <DoubleAnimation From="0" To="359" Duration="0:0:2"

                                                  RepeatBehavior="Forever"

                                                  Storyboard.TargetName="LoadingVisualAngleTransform"

                                                  Storyboard.TargetProperty="Angle" />

                                          <DoubleAnimation To="0" Duration="0"

                                                  Storyboard.TargetName="ContentElement"

                                                  Storyboard.TargetProperty="Opacity" />

                                      </Storyboard>

                                  </vsm:VisualState>

                                  <vsm:VisualState x:Name="InvalidContent">

                                      <Storyboard Duration="0">

                                          <ObjectAnimationUsingKeyFrames

                                                  Storyboard.TargetName="ErrorElement"

                                                  Storyboard.TargetProperty="Visibility">

                                              <DiscreteObjectKeyFrame Value="Visible" KeyTime="0" />

                                          </ObjectAnimationUsingKeyFrames>

                                      </Storyboard>

                                  </vsm:VisualState>

                              </vsm:VisualStateGroup>

                          </vsm:VisualStateManager.VisualStateGroups>

                          <telerikPrimitives:LayoutTransformControl x:Name="layoutTransform">

                              <Grid Background="Transparent">

                                  <ContentPresenter x:Name="ContentElement"

                                      Content="{TemplateBinding Content}"

                                      ContentTemplate="{TemplateBinding ContentTemplate}" />

    

                                  <Grid x:Name="LoadingVisual" RenderTransformOrigin="0.5,0.5"

                                      Visibility="Collapsed" VerticalAlignment="Center"

                                      HorizontalAlignment="Center" MaxWidth="50" MaxHeight="50">

                                      <Grid.RenderTransform>

                                          <RotateTransform x:Name="LoadingVisualAngleTransform" Angle="0"

                                              CenterX="0.5" CenterY="0.5" />

                                      </Grid.RenderTransform>

    

                                      <Path Stretch="UniformToFill" 

                                          Stroke="Gray" StrokeThickness="6"

                                          StrokeStartLineCap="Flat" StrokeEndLineCap="Triangle"

                                          Data="M1,0 A1,1,90,1,1,0,-1" HorizontalAlignment="Center"

                                          VerticalAlignment="Center" />

                                  </Grid>

    

                                  <Image x:Name="ErrorElement" Stretch="None" Visibility="Collapsed"

                                      Source="/Telerik.Windows.Controls.Navigation;component/images/CoverFlowError.png"

                                      HorizontalAlignment="Center" VerticalAlignment="Center" />

    

                                  <Rectangle x:Name="PART_DisabledBox"

                                      Fill="{StaticResource DisabledBrush}" Visibility="Collapsed" />

                              </Grid>

                          </telerikPrimitives:LayoutTransformControl>

                      </Border>

                  </ControlTemplate>

              </Setter.Value>

          </Setter>

          <Setter Property="CacheMode">

              <Setter.Value>

                  <BitmapCache />

              </Setter.Value>

          </Setter>

      </Style>

        

  </ResourceDictionary>

  
  
  
  Best wishes,
  Pana
  the Telerik team

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

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > CoverFlow > Some issues in vertical orientation?