This is a migrated thread and some comments may be shown as answers.

Some issues in vertical orientation?

4 Answers 122 Views
CoverFlow
This is a migrated thread and some comments may be shown as answers.
Marco
Top achievements
Rank 1
Marco asked on 12 Apr 2011, 10:12 PM
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.

4 Answers, 1 is accepted

Sort by
0
Marco
Top achievements
Rank 1
answered on 14 Apr 2011, 08:37 AM
Uhmm...any help from the fantastic guys of Telerik...? :-)
0
Miroslav Nedyalkov
Telerik team
answered on 18 Apr 2011, 08:42 AM
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
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"
    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
Pana
Telerik team
answered on 02 Aug 2011, 07:16 AM
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:

              
    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 >>
Tags
CoverFlow
Asked by
Marco
Top achievements
Rank 1
Answers by
Marco
Top achievements
Rank 1
Miroslav Nedyalkov
Telerik team
a
Top achievements
Rank 1
Pana
Telerik team
Share this question
or