CarouselItem event

2 posts, 0 answers
  1. Luca
    Luca avatar
    7 posts
    Member since:
    Dec 2008

    Posted 22 Mar 2010 Link to this post

    Hi everybody.

    I need a suggestion on this issue: I got an object list that I use as itemssource for Carousel. Those objects inside list includes some strings and the image, which comes from a query that, unfortunately, takes very long time due to dimension of images.
    The only way to make it faster is to remove image field from the output of the query and set it to null: in this way, obviously, my carouselitems will be without photo.

    Now, how can I manage an event (e.g. Click) inside the elements  of my ControlTemplate of my corouselItem? I would like to have something like a "deferred image loading", so the user will see many carouselItem without photo, but when he clicks on the item inside the eventhandler a single specific query will be done for only the image selected (so faster).

    I made carouselItem following telerik sample code:



                <Style TargetType="{x:Type telerik:CarouselItem}">  
                    <Setter Property="Height" Value="500" /> 
                    <Setter Property="Width" Value="500" /> 
                    <Setter Property="MaxHeight" Value="550" /> 
                    <Setter Property="Template">  
                        <Setter.Value> 
                            <ControlTemplate TargetType="{x:Type telerik:CarouselItem}" > 
                                <Grid ClipToBounds="False" Height="350" Width="300">  
                                    <Border RenderTransformOrigin="0.5, 1" ClipToBounds="False" 
                                            Width="{Binding ElementName=CarouselItemInnerGrid, Path=ActualWidth}" 
                                            Opacity="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.Opacity}" 
                                            Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.Visibility}" 
                                            BorderBrush="White" BorderThickness="0">  
                                        <Border.RenderTransform> 
                                            <TransformGroup> 
                                                <ScaleTransform ScaleX="{Binding RelativeSource={RelativeSource TemplatedParent},   
                                                            Path=ReflectionSettings.WidthOffset,   
                                                            Converter={StaticResource ArithmeticValueConverter},   
                                                            ConverterParameter=1}" ScaleY="{Binding RelativeSource={RelativeSource TemplatedParent},   
                                                            Path=ReflectionSettings.HeightOffset,   
                                                            Converter={StaticResource ArithmeticValueConverter},   
                                                            ConverterParameter=-1}"  
                                                        CenterY="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.OffsetY}" /> 
                                                <TranslateTransform  
                                                        X="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.OffsetX}" /> 
                                                <SkewTransform  
                                                        AngleX="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.Angle}" /> 
                                            </TransformGroup> 
     
                                        </Border.RenderTransform> 
                                        <Border.OpacityMask> 
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">  
                                                <LinearGradientBrush.GradientStops> 
                                                    <GradientStop  
                                                            Offset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.HiddenPercentage}" 
                                                            Color="Transparent" /> 
                                                    <GradientStop Offset="1" Color="Black" /> 
                                                </LinearGradientBrush.GradientStops> 
                                            </LinearGradientBrush> 
                                        </Border.OpacityMask> 
                                        <Border.Background> 
                                            <VisualBrush  
                                                    Visual="{Binding ElementName=CarouselItemInnerGrid}">  
                                            </VisualBrush> 
                                        </Border.Background> 
     
                                    </Border> 
     
                                    <Grid x:Name="CarouselItemInnerGrid">  
                                        <Border x:Name="CarouselItemMainBorder" Opacity="0.5" 
                                                BorderBrush="#FF91B3FF" BorderThickness="1,1,1,1" 
                                                CornerRadius="5,5,5,5" SnapsToDevicePixels="True">  
                                            <Border.Background> 
                                                <LinearGradientBrush EndPoint="108,472" 
                                                        StartPoint="108,23" MappingMode="Absolute">  
                                                    <GradientStop Color="#FF2C3A68" Offset="0" /> 
                                                    <GradientStop Color="#FF000000" Offset="1" /> 
                                                    <GradientStop Color="#FF0F224C" Offset="0.045" /> 
                                                    <GradientStop Color="#FF000000" Offset="0.0451" /> 
                                                </LinearGradientBrush> 
                                            </Border.Background> 
                                        </Border> 
                                        <Border Opacity="1" BorderBrush="#3F000000" 
                                                BorderThickness="1,1,1,1" CornerRadius="5,5,5,5" 
                                                Margin="10,10,10,10" x:Name="CarouselItemInnerBorder" 
                                                SnapsToDevicePixels="True">  
                                            <Border.Background> 
                                                <LinearGradientBrush EndPoint="101,462" 
                                                        StartPoint="101,13" MappingMode="Absolute">  
                                                    <GradientStop Color="#FF2C3A68" Offset="0" /> 
                                                    <GradientStop Color="#FF000000" Offset="1" /> 
                                                    <GradientStop Color="#FF0F224C" Offset="0.045" /> 
                                                    <GradientStop Color="#FF000000" Offset="0.0451" /> 
                                                </LinearGradientBrush> 
                                            </Border.Background> 
                                            <ContentPresenter IsHitTestVisible="True" /> 
                                            <Border.Triggers> 
     
                                            </Border.Triggers> 
                                        </Border> 
                                    </Grid> 
                                </Grid> 
     
                                <ControlTemplate.Triggers> 
                                    <MultiTrigger> 
                                        <MultiTrigger.Conditions> 
                                            <Condition Property="IsSelected" Value="False" /> 
                                            <Condition Property="IsMouseOver" Value="True" /> 
                                        </MultiTrigger.Conditions> 
                                        <MultiTrigger.EnterActions> 
                                            <BeginStoryboard> 
                                                <Storyboard> 
                                                    <ColorAnimation  
                                                            Storyboard.TargetName="CarouselItemMainBorder" 
                                                            Storyboard.TargetProperty="Background.GradientStops[0].Color" 
                                                            To="#FF344B97" Duration="0:0:0.3" /> 
                                                    <ColorAnimation  
                                                            Storyboard.TargetName="CarouselItemMainBorder" 
                                                            Storyboard.TargetProperty="Background.GradientStops[2].Color" 
                                                            To="#FF233F7E" Duration="0:0:0.3" /> 
                                                    <ColorAnimation  
                                                            Storyboard.TargetName="CarouselItemInnerBorder" 
                                                            Storyboard.TargetProperty="Background.GradientStops[0].Color" 
                                                            To="#FF344B97" Duration="0:0:0.3" /> 
                                                    <ColorAnimation  
                                                            Storyboard.TargetName="CarouselItemInnerBorder" 
                                                            Storyboard.TargetProperty="Background.GradientStops[2].Color" 
                                                            To="#FF233F7E" Duration="0:0:0.3" /> 
                                                </Storyboard> 
                                            </BeginStoryboard> 
     
                                        </MultiTrigger.EnterActions> 
                                        <MultiTrigger.ExitActions> 
                                            <BeginStoryboard> 
                                                <Storyboard FillBehavior="Stop">  
                                                    <ColorAnimation  
                                                            Storyboard.TargetName="CarouselItemMainBorder" 
                                                            Storyboard.TargetProperty="Background.GradientStops[0].Color" 
                                                            To="#FF2C3A68" Duration="0:0:0.3" /> 
                                                    <ColorAnimation  
                                                            Storyboard.TargetName="CarouselItemMainBorder" 
                                                            Storyboard.TargetProperty="Background.GradientStops[2].Color" 
                                                            To="#FF0F224C" Duration="0:0:0.3" /> 
                                                    <ColorAnimation  
                                                            Storyboard.TargetName="CarouselItemInnerBorder" 
                                                            Storyboard.TargetProperty="Background.GradientStops[0].Color" 
                                                            To="#FF2C3A68" Duration="0:0:0.3" /> 
                                                    <ColorAnimation  
                                                            Storyboard.TargetName="CarouselItemInnerBorder" 
                                                            Storyboard.TargetProperty="Background.GradientStops[2].Color" 
                                                            To="#FF0F224C" Duration="0:0:0.3" /> 
                                                </Storyboard> 
                                            </BeginStoryboard> 
                                        </MultiTrigger.ExitActions> 
                                    </MultiTrigger> 
     
                                    <Trigger Property="IsSelected" Value="True">  
                                        <Setter TargetName="CarouselItemMainBorder" 
                                                Property="Background">  
                                            <Setter.Value> 
                                                <LinearGradientBrush EndPoint="108,472" 
                                                        StartPoint="108,23" MappingMode="Absolute">  
                                                    <GradientStop Color="#FF344B97" Offset="0" /> 
                                                    <GradientStop Color="#FF000000" Offset="1" /> 
                                                    <GradientStop Color="#FF233F7E" Offset="0.045" /> 
                                                    <GradientStop Color="#FF000000" Offset="0.0451" /> 
                                                </LinearGradientBrush> 
                                            </Setter.Value> 
                                        </Setter> 
                                        <Setter TargetName="CarouselItemInnerBorder" 
                                                Property="Background">  
                                            <Setter.Value> 
                                                <LinearGradientBrush EndPoint="101,462" 
                                                        StartPoint="101,13" MappingMode="Absolute">  
                                                    <GradientStop Color="#FF344B97" Offset="0" /> 
                                                    <GradientStop Color="#FF000000" Offset="1" /> 
                                                    <GradientStop Color="#FF233F7E" Offset="0.045" /> 
                                                    <GradientStop Color="#FF000000" Offset="0.0451" /> 
                                                </LinearGradientBrush> 
                                            </Setter.Value> 
                                        </Setter> 
                                    </Trigger> 
     
                                </ControlTemplate.Triggers> 
                            </ControlTemplate> 
                        </Setter.Value> 
                    </Setter> 
                </Style> 
                <Style TargetType="{x:Type telerik:CarouselDataRecordPresenter}">  
                    <Setter Property="Template">  
                        <Setter.Value> 
                            <ControlTemplate TargetType="{x:Type telerik:CarouselDataRecordPresenter}">  
                                <Grid IsHitTestVisible="False" HorizontalAlignment="Stretch" 
                                        VerticalAlignment="Stretch">  
                                    <Grid.RowDefinitions> 
                                        <RowDefinition Height="35" /> 
                                        <RowDefinition Height="260" /> 
                                        <RowDefinition Height="Auto" /> 
                                    </Grid.RowDefinitions> 
                                    <StackPanel Grid.Row="0" Orientation="Horizontal" 
                                            VerticalAlignment="Center">  
                                        <Label Content="Data: " Foreground="#ff8FB3FF" FontSize="12" Margin="10,0,0,0" /> 
                                        <Label Content="{Binding Path=PlateDate, Converter={StaticResource DateConversion}}" 
                                                Foreground="#ff8FB3FF" FontSize="12" /> 
                                        <Label Content="Ora: " Foreground="#ff8FB3FF" FontSize="12" Margin="50,0,0,0"/>  
                                        <Label Content="{Binding Path=PlateTime, Converter={StaticResource TimeConversion}}" 
                                                Foreground="#ff8FB3FF" FontSize="12" /> 
                                    </StackPanel> 
                                    <Rectangle Grid.Row="1" RadiusX="3" RadiusY="3" Width="260" 
                                            Height="245">  
                                        <Rectangle.Fill> 
                                            <ImageBrush x:Name="brush" 
                                                    ImageSource="{Binding Path=PlateImage}" /> 
                                        </Rectangle.Fill> 
                                    </Rectangle> 
                                    <StackPanel Grid.Row="2" Orientation="Horizontal" 
                                            VerticalAlignment="Center">  
                                        <Label Content="TARGA: " Foreground="#ff8FB3FF" FontSize="12" /> 
                                        <Label Content="{Binding Path=LicensePlate}" FontSize="12" 
                                                Foreground="#ff8FB3FF" /> 
                                    </StackPanel> 
                                </Grid> 
                            </ControlTemplate> 
                        </Setter.Value> 
                    </Setter> 
                </Style> 
  2. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 24 Mar 2010 Link to this post

    Hi Luca,

    You can create some kind of custom control or UserControl that will do the lazy loading. For example:

    <UserControl x:Class="RadCarouselWpf_2009_Q11.ImageControl"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="Transparent">
        <Grid>
            <TextBlock Text="Click for Image" x:Name="text" HorizontalAlignment="Center"/>
            <Image x:Name="image" Visibility="Hidden" Stretch="None"/>
        </Grid>
    </UserControl>

    public partial class ImageControl : UserControl
    {
        public object DataItem
        {
            get { return (object)GetValue(DataItemProperty); }
            set { SetValue(DataItemProperty, value); }
        }
      
        public static readonly DependencyProperty DataItemProperty =
            DependencyProperty.Register("DataItem", typeof(object), typeof(ImageControl), new UIPropertyMetadata(null));
      
        public ImageControl()
        {
            InitializeComponent();
        }
      
        protected override void OnPreviewMouseLeftButtonDown(MouseButtonEventArgs e)
        {
            this.text.Visibility = Visibility.Hidden;
              
            // query database for Image;
            var imageSource = this.GetImage(this.DataItem);
            this.image.Source = imageSource;
      
            this.image.Visibility = Visibility.Visible;
      
            base.OnPreviewMouseLeftButtonDown(e);
        }
      
        // gets an image for specific data item
        private ImageSource GetImage(object dataItem)
        {
            // query database
      
            return new BitmapImage(new Uri("nature1.png", UriKind.Relative));
        }
    }

    And this UserControl can be added to the carousel items:

    <Style TargetType="{x:Type telerik:CarouselDataRecordPresenter}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:CarouselDataRecordPresenter}">
                    <Grid IsHitTestVisible="True" HorizontalAlignment="Stretch" 
                            VerticalAlignment="Stretch">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="35" />
                            <RowDefinition Height="260" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <StackPanel Grid.Row="0" Orientation="Horizontal" 
                                VerticalAlignment="Center">
                            <Label Content="Data: " Foreground="#ff8FB3FF" FontSize="12" Margin="10,0,0,0" />
                            <Label Content="{Binding Path=PlateDate}" 
                                    Foreground="#ff8FB3FF" FontSize="12" />
                            <Label Content="Ora: " Foreground="#ff8FB3FF" FontSize="12" Margin="50,0,0,0"/>
                            <Label Content="{Binding Path=PlateTime}" 
                                    Foreground="#ff8FB3FF" FontSize="12" />
                        </StackPanel>
                        <!-- lazy load image -->
                        <local:ImageControl MinHeight="50" MinWidth="60" DataItem="{Binding}" />
                        <StackPanel Grid.Row="2" Orientation="Horizontal" 
                                VerticalAlignment="Center">
                            <Label Content="TARGA: " Foreground="#ff8FB3FF" FontSize="12" />
                            <Label Content="{Binding Path=LicensePlate}" FontSize="12" 
                                    Foreground="#ff8FB3FF" />
                        </StackPanel>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    As you can see this UserControl has a property DataItem which will be set to the corresponding data item. This property can be used when querying for a specific image.

    Once this control is clicked it hides the default text and then loads a dummy image using the GetImage method. You can implement you own query logic there.

    Hope this is helpful.

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