Some issues in vertical orientation?

5 posts, 0 answers
  1. Marco
    Marco avatar
    3 posts
    Member since:
    Apr 2011

    Posted 12 Apr 2011 Link to this post

    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.
  2. Marco
    Marco avatar
    3 posts
    Member since:
    Apr 2011

    Posted 14 Apr 2011 Link to this post

    Uhmm...any help from the fantastic guys of Telerik...? :-)
  3. DevCraft banner
  4. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 18 Apr 2011 Link to this post

    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
  5. a
    a avatar
    1 posts
    Member since:
    Jul 2011

    Posted 27 Jul 2011 Link to this post

    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>
  6. Pana
    Admin
    Pana avatar
    748 posts

    Posted 02 Aug 2011 Link to this post

    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 >>
Back to Top
DevCraft banner