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

Full size items with vertical scroll

8 Answers 138 Views
Carousel
This is a migrated thread and some comments may be shown as answers.
Oliver
Top achievements
Rank 1
Oliver asked on 31 May 2011, 05:15 AM
Hi,

each items in my caroussel come from numerized 8x11 paper image. I use a caroussel because some document contains more than 1 page. I would like to know if it's possible to have each item display using their real size. If an image height are bigger than the display area, of course I would like to have to possibility to scroll  the image vertically to see their missing part.

Maybe I'm not using the right component, I don't know... What we have to consider is the fact that I need to display document with 1 or more pages (max 3 pages) using their real size to see all the infos on the documents.

Thank's

8 Answers, 1 is accepted

Sort by
0
Maya
Telerik team
answered on 31 May 2011, 09:30 AM
Hi Oliver,

Generally, you may change the width and height of the carousel item by defining the following style:

<Style  TargetType="{x:Type telerik:CarouselItem}">
            <SetterProperty="Height"Value="1000"/>
            <SetterProperty="Width"Value="1000"/>
            <SetterProperty="MaxHeight"Value="Auto"/>
            <SetterProperty="MaxWidth"Value="Auto"/>           
</Style>

Depending on your particular requirements, you may also skip setting the Height and Width properties in the style above.  
Please let me know whether this will fit into your scenario and if you need any further assistance. 
On the other hand, you may also take a look at our demos for additional information on our controls.
 

Kind regards,
Maya
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
Oliver
Top achievements
Rank 1
answered on 31 May 2011, 04:47 PM
I think the probelm is 50% solve :) The other 50% is... How I can see the missing parts (top/bottom)??? Does the carousel provide a solution to scroll vertically the images that is bigger than the display area (actually, the top and the bottom of the image is cut)??? Otherwise, does Telerik have another component to do what I have to do???

Thank's
0
Maya
Telerik team
answered on 02 Jun 2011, 01:37 PM
Hello Oliver,

Generally, the possible approach would be to predefine the template of the CarouselItem like follows:

<Style TargetType="{x:Type telerik:CarouselItem}">
        <Setter Property="Height" Value="200"/>
        <Setter Property="Width" Value="400"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:CarouselItem}">
                    <ScrollViewer>                         
                            <ContentPresenter />
                        </ScrollViewer>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        </Style>

However, in this case the functionality of scrolling the carousel with the mouse will be lost.

Greetings,
Maya
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
Oliver
Top achievements
Rank 1
answered on 02 Jun 2011, 08:54 PM

Hi Maya,

the idea seem to be good but honestly, when I try to implement your code into my code, I can't see the scrollbar of the scrollviewer to scroll my image vertically :(

Here is my code and maybe you can help me implementing you piece of code into my code:

 

 

<

 

UserControl x:Class="com.christiegrp.Neuron.ClientApplication.InterDependencyImagesControl"

 

 

 

 

 

 

 

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

 

 

 

 

 

 

 

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

 

 

 

 

 

 

 

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

 

 

 

 

 

 

 

xmlns:self="clr-namespace:com.christiegrp.Neuron.ClientApplication"

 

 

 

Height="Auto" Width="Auto">

 

 

 

 

 

 

 

 

<UserControl.Resources>

 

 

 

 

 

 

 

 

<ResourceDictionary>

 

 

 

 

 

 

 

 

<ResourceDictionary.MergedDictionaries>

 

 

 

 

 

 

 

 

<ResourceDictionary Source="/Telerik.Windows.Controls.Navigation;component/Themes/GenericOfficeBlack.xaml"/>

 

 

 

 

 

 

 

 

</ResourceDictionary.MergedDictionaries>

 

 

 

 

 

 

 

 

</ResourceDictionary>

 

 

 

 

 

 

 

 

</UserControl.Resources>

 

 

 

 

 

 

 

 

<Grid Height="Auto" Width="Auto" Style="{DynamicResource REF-GridStyle-Dark}">

 

 

 

 

 

 

 

 

<Grid.Resources>

 

 

 

 

 

 

 

 

<Path x:Key="horizontalPath" Stretch="Fill" Opacity="1" Data="M 9,200 C9,200 450,200 450,200" Stroke="#FFB4B4B4" StrokeThickness="1"/>

 

 

 

 

 

 

 

 

<self:DocTypeBorderColorConverter x:Key="borderColorConverter" />

 

 

 

 

 

 

 

 

<self:DocsMaxDisplayHeightConverter x:Key="maxHeightConverter" />

 

 

 

 

 

 

 

 

<Style TargetType="{x:Type telerik:CarouselItem}">

 

 

 

 

 

 

 

 

<Setter Property="Template">

 

 

 

 

 

 

 

 

<Setter.Value>

 

 

 

 

 

 

 

 

<ControlTemplate TargetType="{x:Type telerik:CarouselItem}">

 

 

 

 

 

 

 

 

<Grid Background="{Binding Path=Type, Converter={StaticResource borderColorConverter}}" x:Name="grid" HorizontalAlignment="Left" Height="Auto" Width="Auto">

 

 

 

 

<Border BorderThickness="1" CornerRadius="4">

 

 

 

 

 

 

 

 

<Border.Background>

 

 

 

 

 

 

 

 

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

 

 

 

 

 

 

 

 

<GradientStop Color="#CCFFFFFF"/>

 

 

 

 

 

 

 

 

<GradientStop Color="#33000000" Offset="1"/>

 

 

 

 

 

 

 

 

</LinearGradientBrush>

 

 

 

 

 

 

 

 

</Border.Background>

 

 

 

 

 

 

 

 

<Border.BorderBrush>

 

 

 

 

 

 

 

 

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

 

 

 

 

 

 

 

 

<GradientStop Color="#99000000" Offset="1"/>

 

 

 

 

 

 

 

 

<GradientStop Color="#33000000"/>

 

 

 

 

 

 

 

 

</LinearGradientBrush>

 

 

 

 

 

 

 

 

</Border.BorderBrush>

 

 

 

 

 

 

 

 

<Border BorderThickness="1" CornerRadius="3" Margin="6">

 

 

 

 

 

 

 

 

<Border.BorderBrush>

 

 

 

 

 

 

 

 

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

 

 

 

 

 

 

 

 

<GradientStop Color="#FF282828" Offset="0.265"/>

 

 

 

 

 

 

 

 

<GradientStop Color="White" Offset="0.13"/>

 

 

 

 

 

 

 

 

<GradientStop Color="#FFE2E2E2" Offset="1"/>

 

 

 

 

 

 

 

 

</LinearGradientBrush>

 

 

 

 

 

 

 

 

</Border.BorderBrush>

 

 

 

 

 

 

 

 

<Border.Background>

 

 

 

 

 

 

 

 

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

 

 

 

 

 

 

 

 

<GradientStop Color="White" Offset="0.26"/>

 

 

 

 

 

 

 

 

<GradientStop Color="#FF2C2C2C"/>

 

 

 

 

 

 

 

 

</LinearGradientBrush>

 

 

 

 

 

 

 

 

</Border.Background>

 

 

 

 

 

 

 

 

<Grid>

 

 

 

 

 

 

 

 

<Grid.RowDefinitions>

 

 

 

 

 

 

 

 

<RowDefinition Height="24" />

 

 

 

 

 

 

 

 

<RowDefinition />

 

 

 

 

 

 

 

 

<RowDefinition Height="24" />

 

 

 

 

 

 

 

 

</Grid.RowDefinitions>

 

 

 

 

 

 

 

 

<Border Grid.Row="0" BorderThickness="1" Margin="0" VerticalAlignment="Top" Height="24" CornerRadius="2,2,0,0">

 

 

 

 

 

 

 

 

<Border.Background>

 

 

 

 

 

 

 

 

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

 

 

 

 

 

 

 

 

<GradientStop Color="#FF5B5B5B" Offset="1"/>

 

 

 

 

 

 

 

 

<GradientStop Color="#FF868686" Offset="0.1"/>

 

 

 

 

 

 

 

 

<GradientStop Color="#FF4F4F4F" Offset="0.57"/>

 

 

 

 

 

 

 

 

<GradientStop Color="#FF0E0E0E" Offset="0.11"/>

 

 

 

 

 

 

 

 

</LinearGradientBrush>

 

 

 

 

 

 

 

 

</Border.Background>

 

 

 

 

 

 

 

 

<Border.BorderBrush>

 

 

 

 

 

 

 

 

<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

 

 

 

 

 

 

 

 

<GradientStop Offset="0"/>

 

 

 

 

 

 

 

 

<GradientStop Offset="1"/>

 

 

 

 

 

 

 

 

<GradientStop Color="White" Offset="0.5"/>

 

 

 

 

 

 

 

 

</LinearGradientBrush>

 

 

 

 

 

 

 

 

</Border.BorderBrush>

 

 

 

 

 

 

 

 

<StackPanel x:Name="stackPanel" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="6,0,0,0">

 

 

 

 

 

 

 

 

<TextBlock Text="{Binding No}" TextWrapping="Wrap" Foreground="White" FontSize="11" TextAlignment="Center" Margin="0,0,3,0"/>

 

 

 

 

 

 

 

 

<TextBlock Text=" / " TextWrapping="Wrap" Foreground="White" FontSize="11" TextAlignment="Center"/>

 

 

 

 

 

 

 

 

<TextBlock Text="{Binding TotalImages}" TextWrapping="Wrap" Foreground="White" FontSize="11" TextAlignment="Center"/>

 

 

 

 

 

 

 

 

</StackPanel>

 

 

 

 

 

 

 

 

</Border>

 

 

 

 

 

 

 

 

<StackPanel Grid.Row="1" Orientation="Horizontal">

 

 

 

 

 

 

 

 

<Image MaxHeight="{Binding ElementName=radCarousel, Path=ActualHeight, Converter={StaticResource maxHeightConverter}}" VerticalAlignment="Center" HorizontalAlignment="Center" Source="{Binding Image.Source}" Stretch="Uniform" Margin="6,18,6,0" />

 

 

 

 

 

 

 

 

</StackPanel>

 

 

 

 

 

 

 

 

<TextBlock x:Name="textBlock2" Grid.Row="2" Text="" TextWrapping="Wrap" FontSize="10" TextAlignment="Center" />

 

 

 

 

 

 

 

 

<TextBlock Grid.Row="2" Text="{Binding Notes}" Opacity="0" />

 

 

 

 

 

 

 

 

</Grid>

 

 

 

 

 

 

 

 

</Border>

 

 

 

 

 

 

 

 

</Border>

 

 

 

 

 

 

 

 

</Grid>

 

 

 

 

 

 

 

 

</ControlTemplate>

 

 

 

 

 

 

 

 

</Setter.Value>

 

 

 

 

 

 

 

 

</Setter>

 

 

 

 

 

 

 

 

</Style>

 

 

 

 

 

 

 

 

</Grid.Resources>

 

 

 

 

 

 

 

 

<Grid Height="Auto" Width="Auto" Background="Black">

 

 

 

 

 

 

 

 

<Grid.RowDefinitions>

 

 

 

 

 

 

 

 

<RowDefinition Height="30"/>

 

 

 

 

 

 

 

 

<RowDefinition Height="*"/>

 

 

 

 

 

 

 

 

</Grid.RowDefinitions>

 

 

 

 

 

 

 

 

<StackPanel Grid.Row="0" Background="Black" Orientation="Horizontal" HorizontalAlignment="Left">

 

 

 

 

 

 

 

 

<telerik:CarouselScrollButton Margin="6,0,0,0" x:Name="CarouselPageLeftButton" CarouselScrollButtonType="PageLeft" Click="CarouselPageLeftButton_Click" Style="{StaticResource CarouselScrollButtonStyle}"/>

 

 

 

 

 

 

 

 

<telerik:CarouselScrollButton Margin="6,0,0,0" x:Name="CarouselLineLeftButton" CarouselScrollButtonType="LineLeft" Click="CarouselLineLeftButton_Click" Style="{StaticResource CarouselScrollButtonStyle}"/>

 

 

 

 

 

 

 

 

<telerik:CarouselScrollButton Margin="6,0,0,0" x:Name="CarouselLineRightButton" CarouselScrollButtonType="LineRight" Click="CarouselLineRightButton_Click" Style="{StaticResource CarouselScrollButtonStyle}"/>

 

 

 

 

 

 

 

 

<telerik:CarouselScrollButton Margin="6,0,6,0" x:Name="CarouselPageRightButton" CarouselScrollButtonType="PageRight" Click="CarouselPageRightButton_Click" Style="{StaticResource CarouselScrollButtonStyle}"/>

 

 

 

 

 

 

 

 

</StackPanel>

 

 

 

 

 

 

 

 

<telerik:RadCarousel Grid.Row="1" Background="Black" Name="radCarousel" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" IsSynchronizedWithCurrentItem="True" LayoutUpdated="radCarousel_LayoutUpdated" MouseRightButtonDown="radCarousel_MouseRightButtonDown">

 

 

 

 

 

 

 

 

<telerik:RadCarousel.ItemsPanel>

 

 

 

 

 

 

 

 

<ItemsPanelTemplate>

 

 

 

 

 

 

 

 

<telerik:RadCarouselPanel Path="{StaticResource horizontalPath}"/>

 

 

 

 

 

 

 

 

</ItemsPanelTemplate>

 

 

 

 

 

 

 

 

</telerik:RadCarousel.ItemsPanel>

 

 

 

 

 

 

 

 

</telerik:RadCarousel>

 

 

 

 

 

 

 

 

</Grid>

 

 

 

 

 

 

 

 

</Grid>

 

 

</

 

UserControl>

 

0
Maya
Telerik team
answered on 03 Jun 2011, 01:56 PM
Hello Oliver,

I am sending you a sample project illustrating the suggested approach. Do let me know in case of any discrepancies according to your scenario.
 

Regards,
Maya
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
Oliver
Top achievements
Rank 1
answered on 06 Jun 2011, 09:37 PM
Hi,

the approach is not to far of what I'm trying to do...

Assume that all carrousel items have the same height/width (ie: 250x250), inside the display area (250x250), I need to insert images of differents size (ie: 2048x640). For all inserted images, I need to keep the 250x250 display area of the carrousel items with a scrollable portion to see hidden portions of the image.

Thank's 
0
Oliver
Top achievements
Rank 1
answered on 08 Jun 2011, 09:42 PM
Hi guys,

any thought about my previous reply ???

Thank's
0
Maya
Telerik team
answered on 09 Jun 2011, 02:16 PM
Hi Oliver,

I have tested the scenario and when an image with greater width and height is added, scrolling of the scroll viewer is enabled for this image. I am sending you the updated version of the sample. Does this correspond to your requirements or am I missing something ?
 

Greetings,
Maya
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
Tags
Carousel
Asked by
Oliver
Top achievements
Rank 1
Answers by
Maya
Telerik team
Oliver
Top achievements
Rank 1
Share this question
or