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

Does the carousel offer a way to view a full image?

4 Answers 224 Views
Carousel
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 15 Oct 2010, 04:25 PM
In code, I am attempting to execute the following pseudo code:

On left mouse up 
{
   (If the item clicked is an image) and
   (matches Carosel.FindCaroselPanel().TopComtainer)
   {
      Show image preview overlay.  // This is not a thumbnail as is inside the carousel. It's a bigger image.
   }
}

I'm fairly certain I'll get this working, but I'm wondering if I'm just missing some functionality that the carousel has.  Seems like this would be a common use for it.

4 Answers, 1 is accepted

Sort by
0
Paul
Top achievements
Rank 1
answered on 15 Oct 2010, 05:00 PM
Also, I'd like to ask one other question.  The carousel seems to size itself very large vertically.  When I limit the size with MaxHeight it will begin to cut off the bottom of the photos before the top space is even used.  In the photo below I have it sized as small as possible using MaxHeight.  If I make it smaller the bottom of the photo will get cut off.  There's still a ton of top space there.  Can this be eliminated?
0
Accepted
Milan
Telerik team
answered on 19 Oct 2010, 01:35 PM
Hi Paul,

By default, the carousel uses an elliptical path which has e predefined Height. You could try using a horizontal path to utilize more of the vertical space. For example:

<Window.Resources>
        <Path
          x:Key="horizontalPath"
          Stretch="Fill"
          Opacity="1"
          Data="M 9,200 C9,200 450,200 450,200 "
          Stroke="#FFB4B4B4"
          StrokeThickness="1"/>
    </Window.Resources>
    <Grid>
        <telerik:RadCarousel Name="RadCarousel1" Loaded="RadCarousel1_Loaded">
            <telerik:RadCarousel.ItemsPanel>
                <ItemsPanelTemplate>
                    <telerik:RadCarouselPanel Path="{StaticResource horizontalPath}"/>
                </ItemsPanelTemplate>
            </telerik:RadCarousel.ItemsPanel>
        </telerik:RadCarousel>
    </Grid>

In regard to your previous question you could open a popup  (over the carousel) display the the image in full size. If you can TopContainer to CarouselItem and use its Item property to access the data of the top element.


Greetings,
Milan
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
Paul
Top achievements
Rank 1
answered on 19 Oct 2010, 03:40 PM
Thanks very much, that works perfect.

If there are other newbies out there wondering about viewing a full image when clicking on the RadCarousel, here's a solution for you:
New window XAML:
<Window x:Class="Your_APP.fImagePreview"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="" WindowStartupLocation="CenterScreen" AllowsTransparency="True"
        ShowInTaskbar="False" Background="Transparent" WindowStyle="None" LostFocus="Window_LostFocus" 
        Loaded="Window_Loaded" PreviewKeyDown="Window_PreviewKeyDown" PreviewMouseDown="Window_PreviewMouseDown">
    <Border CornerRadius="10" BorderBrush="Black" BorderThickness="3" Background="Black" Margin="24" Padding="4">
        <Border.Effect>
            <DropShadowEffect Color="Black" Opacity="0.50" ShadowDepth="16" />
        </Border.Effect>
        <Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Name="imgPreview" />
    </Border>
</Window>


New Window code behind (I wanted it to enlarge as needed up to an inch away from the screen borders).  I also added Preview click and keydown events to close the form as well as a lost focus event to close the form.
private void Window_Loaded(object sender, RoutedEventArgs e)
      {
         this.Width = Math.Min(imgPreview.Width, SystemParameters.PrimaryScreenWidth - 144);
         this.Height = Math.Min(imgPreview.Width, SystemParameters.PrimaryScreenHeight - 144);         
      }


In the RadCarousel click I checked the e.ClickCount.  When it was 1, I set a variable to the image (sender).  When it was 2 if this saved image matches the sender, I opened the new form.  Other wise you can click twice on the sides of the carousel advancing and changing images and in that case I didn't want the preview to open.
0
Milan
Telerik team
answered on 20 Oct 2010, 10:58 AM
Hi Paul,

Thank you for sharing this with the community.


All the best,
Milan
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
Paul
Top achievements
Rank 1
Answers by
Paul
Top achievements
Rank 1
Milan
Telerik team
Share this question
or