This is a migrated thread and some comments may be shown as answers.

ControlTemplate applied to CarouselItem style

4 Answers 26 Views
Carousel
This is a migrated thread and some comments may be shown as answers.
Valentin
Top achievements
Rank 1
Iron
Valentin asked on 26 Sep 2019, 08:16 AM

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

 

4 Answers, 1 is accepted

Sort by
0
Valentin
Top achievements
Rank 1
Iron
answered on 26 Sep 2019, 02:23 PM

[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.

0
Valentin
Top achievements
Rank 1
Iron
answered on 30 Sep 2019, 11:58 AM

[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.

0
Martin Ivanov
Telerik team
answered on 30 Sep 2019, 12:06 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Valentin
Top achievements
Rank 1
Iron
answered on 02 Oct 2019, 11:46 AM

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.

Tags
Carousel
Asked by
Valentin
Top achievements
Rank 1
Iron
Answers by
Valentin
Top achievements
Rank 1
Iron
Martin Ivanov
Telerik team
Share this question
or