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.
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.
4 Answers, 1 is accepted
0
Marco
Top achievements
Rank 1
answered on 14 Apr 2011, 08:37 AM
Uhmm...any help from the fantastic guys of Telerik...? :-)
0
Hello Marco,
Miroslav Nedyalkov
the Telerik team
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?
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
0
a
Top achievements
Rank 1
answered on 27 Jul 2011, 12:50 PM
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: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
>
0
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:
And all the content is inside.
You could use this style from Q2 2011 as refference:
Best wishes,
Pana
the Telerik team
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"
>
You could use this style from Q2 2011 as refference:
<
ResourceDictionary
xmlns
=
"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
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 >>