ControlTemplate applied to CarouselItem style

5 posts, 0 answers
  1. Valentin
    Valentin avatar
    153 posts
    Member since:
    Mar 2016

    Posted 26 Sep 2019 Link to this post

    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

     

  2. Valentin
    Valentin avatar
    153 posts
    Member since:
    Mar 2016

    Posted 26 Sep 2019 in reply to Valentin Link to this post

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

  3. Valentin
    Valentin avatar
    153 posts
    Member since:
    Mar 2016

    Posted 30 Sep 2019 in reply to Valentin Link to this post

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

  4. Martin Ivanov
    Admin
    Martin Ivanov avatar
    2511 posts

    Posted 30 Sep 2019 Link to this post

    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.
  5. Valentin
    Valentin avatar
    153 posts
    Member since:
    Mar 2016

    Posted 02 Oct 2019 in reply to Martin Ivanov Link to this post

    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.

Back to Top