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

[Paul]

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.

[Paul]

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?

[Milan]

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

[Paul]

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.

[Milan]

Hi Paul,

Thank you for sharing this with the community.

All the best,
Milan
the Telerik team