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
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

Thank's
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

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>
I am sending you a sample project illustrating the suggested approach. Do let me know in case of any discrepancies according to your scenario.
Maya
the Telerik team

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

any thought about my previous reply ???
Thank's
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 ?
Maya
the Telerik team