Full size items with vertical scroll

9 posts, 0 answers
  1. Oliver
    Oliver avatar
    263 posts
    Member since:
    Feb 2011

    Posted 31 May 2011 Link to this post

    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
  2. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 31 May 2011 Link to this post

    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. Oliver
    Oliver avatar
    263 posts
    Member since:
    Feb 2011

    Posted 31 May 2011 Link to this post

    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
  5. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 02 Jun 2011 Link to this post

    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
  6. Oliver
    Oliver avatar
    263 posts
    Member since:
    Feb 2011

    Posted 02 Jun 2011 Link to this post

    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>

     

  7. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 03 Jun 2011 Link to this post

    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
  8. Oliver
    Oliver avatar
    263 posts
    Member since:
    Feb 2011

    Posted 06 Jun 2011 Link to this post

    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 
  9. Oliver
    Oliver avatar
    263 posts
    Member since:
    Feb 2011

    Posted 08 Jun 2011 Link to this post

    Hi guys,

    any thought about my previous reply ???

    Thank's
  10. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 09 Jun 2011 Link to this post

    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
Back to Top
UI for WPF is Visual Studio 2017 Ready