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

5 posts, 1 answers
  1. Paul
    Paul avatar
    102 posts
    Member since:
    Jun 2010

    Posted 15 Oct 2010 Link to this post

    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.
  2. Paul
    Paul avatar
    102 posts
    Member since:
    Jun 2010

    Posted 15 Oct 2010 Link to this post

    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?
  3. UI for WPF is Visual Studio 2017 Ready
  4. Answer
    Milan
    Admin
    Milan avatar
    1989 posts

    Posted 19 Oct 2010 Link to this post

    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
  5. Paul
    Paul avatar
    102 posts
    Member since:
    Jun 2010

    Posted 19 Oct 2010 Link to this post

    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.
  6. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 20 Oct 2010 Link to this post

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