ControlTemplate applied to CarouselItem style

[Valentin]

Hi Telerik,

 

I'mu using a RadCarousel with a style applied to all Carousel Items. Sometimes, and randomly, the picture in the Carousel Item disappears (the border or the overlay are still present).

 

My Carousel :

<telerik:RadCarousel Grid.Column="1" x:Name="InspectionCarousel" ItemsSource="{Binding TabDiagramsForActiveInspection}" AutoGenerateDataPresenters="False"
                     Background="Transparent" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" SelectedItem="{Binding SelectedItem}">
    <telerik:RadCarousel.ItemsPanel>
        <ItemsPanelTemplate>
            <telerik:RadCarouselPanel Path="{StaticResource horizontalPath}"/>
        </ItemsPanelTemplate>
    </telerik:RadCarousel.ItemsPanel>
</telerik:RadCarousel>

 

My Carousel Item Style :

<Style TargetType="telerik:CarouselItem">
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="Height" Value="{Binding Path=ActualHeight, ElementName=InspectionCarousel, Converter={conv:PercentageConverter}, ConverterParameter='0,9'}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:CarouselItem">
                <Grid>
                    <Border BorderThickness="5" CornerRadius="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Image Source="{Binding TabDiagram.DiagramAsImage.SerializedImage, Converter={StaticResource ImageConverter}}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

                            <Grid>
                                <Grid.Style>
                                    <Style TargetType="Grid">
                                        <Setter Property="Visibility" Value="Collapsed"/>

                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding State}" Value="{x:Static vm:InspectionState.NA}">
                                                <Setter Property="Visibility" Value="Visible"/>
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </Grid.Style>

                                <Grid Background="LightGray" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.6"/>
                                <TextBlock Text="N/A" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="68" FontWeight="SemiBold"/>
                            </Grid>
                        </Grid>

                        <Border.Style>
                            <Style TargetType="Border">
                                <Setter Property="BorderBrush" Value="Black"/>

                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding State}" Value="{x:Static vm:InspectionState.ToBeDone}">
                                        <Setter Property="BorderBrush" Value="Black"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding State}" Value="{x:Static vm:InspectionState.OK}">
                                        <Setter Property="BorderBrush" Value="Green"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding State}" Value="{x:Static vm:InspectionState.KO}">
                                        <Setter Property="BorderBrush" Value="Red"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding State}" Value="{x:Static vm:InspectionState.NA}">
                                        <Setter Property="BorderBrush" Value="Transparent"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Border.Style>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

 

Details :

- TabDiagram.DiagramAsImage.SerializedImage is an screenshot of a RadDiagram (as bytes)

- Converter={StaticResource ImageConverter} is <telerik:BinaryImageConverter x:Key="ImageConverter"/>

- when works.png is a screenshot when the style is correctly applied.

- when doesnt works.png is a screenshot of the behavior of the bug

- context.png is a global screen to show you how i'm using the RadCarousel and RadDiagram

 

=> Do you know why sometimes and randomly the picture disappears ?

 

Thank you

 

[Valentin]

[EDIT] : I tried to set Image Source to a fixed picture in my resources project :

<Image Source="../Pics/Resources/test.png" Width="150" Height="50" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

 

=> I can't reproduce the bug ! 

So I think the problem comes from either Binding failed or Converter failed.

 

I tried to implement my own Bytes to ImageSource converter like :

Public Shared Function ConvertBytesToImageSource(ByVal imageData As Byte()) As ImageSource
    If imageData Is Nothing Then Return Nothing

    Dim biImg As BitmapImage = New BitmapImage()
    Dim ms As MemoryStream = New MemoryStream(imageData)

    biImg.BeginInit()
    biImg.StreamSource = ms
    biImg.EndInit()

    Dim imgSrc As ImageSource = TryCast(biImg, ImageSource)

    Return imgSrc
End Function

=> And the bug is still there.

 

Thank you for your future analysis.

[Valentin]

[EDIT 2] : I found a solution to fix the bug :

I created a Bitmap property in the ViewModel class that was be set in the constructor (= convert Bytes() to Bitmap only 1 time so). In the xaml, this property is bound to the Image Source property (and not to the Bytes() property coupled with the converter) and the bug is resolved.

 

But if you have any explication about this problem I want to know it :)

 

Thank you.

[Martin Ivanov]

Hello Valentin,

I am not sure why the reported behavior appears, but my guess would be that the binding or the picture itself are broken in some situations. Or the binding gets evaluated after the CarouselItem is measured and there is no space to show the image. You can check for binding errors in the Output pane of Visual Studio. And you can check the other guess by setting a MinWidth and MinHeight on the Grid element that hosts the Image.

If you need more explanation on this I would recommend you to open a new support ticket where you can attach your project. This way we can test it and investigate what happens.

Regards,
Martin Ivanov
Progress Telerik

[Valentin]

Hi Martin,

 

The picture isn't broken because it's always the same displayed picture.

I tried to set a fixed with to the CarouselItem and even if there is available space, the bug appears.

 

With your explications, I think the binding is broken, probably in addition of the conversion maybe. Unfortunately, I can't attach my project, but like I said, I by-passed this bug with my [EDIT 2] post.

 

Thank you for your time.

Valentin.