CarouselItem event

[Luca]

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>

[Milan]

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    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.