Styling a CarouselItem makes Carousel Disappear

5 posts, 0 answers
  1. Scott
    Scott avatar
    42 posts
    Member since:
    Oct 2007

    Posted 20 Apr 2010 Link to this post

    I'm new to WPF and to the Carousel as well, but taking what little examples there are for this control just isn't working for me. Even taking the exact code from your documentation and applying it makes my Carousel disappear.

    When trying to view the Style in Expression Blend 4, I get an error "Property values set when no trigger is active". 

    The code I have is very simple:

    <telerik:RadCarousel x:Name="carousel"> 
                <Image Source="Images/Puck/1.jpg" Width="200" Height="200" Stretch="Fill" /> 
                <Image Source="Images/Puck/4.jpg" Width="200" Height="200" Stretch="Fill" /> 
                <Image Source="Images/Puck/5.jpg" Width="200" Height="200" Stretch="Fill" /> 
                <Image Source="Images/Puck/6.jpg" Width="200" Height="200" Stretch="Fill" /> 
                <Image Source="Images/Puck/7.jpg" Width="200" Height="200" Stretch="Fill" /> 
                <Image Source="Images/Puck/9.jpg" Width="200" Height="200" Stretch="Fill" /> 
                <Image Source="Images/Puck/10.jpg" Width="200" Height="200" Stretch="Fill" /> 
                <Image Source="Images/Puck/11.jpg" Width="200" Height="200" Stretch="Fill" /> 
            </telerik:RadCarousel> 
            <Grid.Resources> 
                <Style TargetType="{x:Type telerik:CarouselItem}"> 
                    <Setter Property="Template"> 
                        <Setter.Value> 
                            <ControlTemplate TargetType="{x:Type telerik:CarouselItem}"> 
                                <Border x:Name="border"> 
                                    <VisualStateManager.VisualStateGroups> 
                                        <VisualStateGroup x:Name="ValidationStates"> 
                                            <VisualState x:Name="Valid"/> 
                                            <VisualState x:Name="InvalidFocused"/> 
                                            <VisualState x:Name="InvalidUnfocused"/> 
                                        </VisualStateGroup> 
                                    </VisualStateManager.VisualStateGroups> 
                                    <Border x:Name="CarouselItemMainBorder" 
                                        ClipToBounds="False" RenderTransformOrigin="0.5, 1" 
                                        Opacity="{Binding ReflectionSettings.Opacity, RelativeSource={RelativeSource TemplatedParent}}" 
                                        Visibility="{Binding ReflectionSettings.Visibility, RelativeSource={RelativeSource TemplatedParent}}" 
                                        BorderBrush="{x:Null}" BorderThickness="1,1,1,1" CornerRadius="0" SnapsToDevicePixels="True" Margin="0,0,-10,-35" MouseEnter="MouseEnterTest"> 
                                        <Border.Background> 
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
                                                <GradientStop Color="#FFC1DCFF" Offset="0"/> 
                                                <GradientStop Color="#FF7EB8F8" Offset="1"/> 
                                            </LinearGradientBrush> 
                                        </Border.Background> 
                                    </Border> 
                                </Border> 
                            </ControlTemplate> 
                        </Setter.Value> 
                    </Setter> 
                </Style> 
            </Grid.Resources> 

  3. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 21 Apr 2010 Link to this post

    Hi Scott,

    The custom template is missing ContentPresenter and that is why no data is display. Could you please place ContentPresenter somewhere in the CarouselItem template. For example:

    01.<Border x:Name="CarouselItemMainBorder"             
    02.   ClipToBounds="False" RenderTransformOrigin="0.5, 1"          
    03.   Opacity="{Binding ReflectionSettings.Opacity, RelativeSource={RelativeSource TemplatedParent}}"          
    04.   Visibility="{Binding ReflectionSettings.Visibility, RelativeSource={RelativeSource TemplatedParent}}"            
    05.   BorderBrush="{x:Null}" BorderThickness="1,1,1,1" CornerRadius="0" SnapsToDevicePixels="True" Margin="0,0,-10,-35" MouseEnter="MouseEnterTest">
    06.  
    07.    <Border.Background>
    08.        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    09.            <GradientStop Color="#FFC1DCFF" Offset="0"/>
    10.            <GradientStop Color="#FF7EB8F8" Offset="1"/>
    11.        </LinearGradientBrush>
    12.    </Border.Background>
    13.      
    14.    <ContentPresenter x:Name="CarouselContentPresenter"/>
    15.      
    16.</Border>

    All the best,
    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.
  5. Scott
    Scott avatar
    42 posts
    Member since:
    Oct 2007

    Posted 21 Apr 2010 Link to this post

    Milan,
    Thank you for your response. I added the ContentPresenter control and still had no luck. I had it in there before and it still was not working. Currently, my entire Grid looks like this:

    <Grid> 
            <telerik:RadCarousel x:Name="carousel"> 
                <Image Source="../Images/Puck/1.jpg" Width="200" Height="200" Stretch="Fill" /> 
                <Image Source="../Images/Puck/4.jpg" Width="200" Height="200" Stretch="Fill" /> 
                <Image Source="../Images/Puck/5.jpg" Width="200" Height="200" Stretch="Fill" /> 
                <Image Source="../Images/Puck/6.jpg" Width="200" Height="200" Stretch="Fill" /> 
                <Image Source="../Images/Puck/7.jpg" Width="200" Height="200" Stretch="Fill" /> 
                <Image Source="../Images/Puck/9.jpg" Width="200" Height="200" Stretch="Fill" /> 
                <Image Source="../Images/Puck/10.jpg" Width="200" Height="200" Stretch="Fill" /> 
                <Image Source="../Images/Puck/11.jpg" Width="200" Height="200" Stretch="Fill" /> 
            </telerik:RadCarousel> 
            <Grid.Resources> 
                <Style TargetType="{x:Type telerik:CarouselItem}"> 
                    <Setter Property="Template"> 
                        <Setter.Value> 
                            <ControlTemplate TargetType="{x:Type telerik:CarouselItem}"> 
                                <Border x:Name="border"> 
                                    <VisualStateManager.VisualStateGroups> 
                                        <VisualStateGroup x:Name="ValidationStates"> 
                                            <VisualState x:Name="Valid"/> 
                                            <VisualState x:Name="InvalidFocused"/> 
                                            <VisualState x:Name="InvalidUnfocused"/> 
                                        </VisualStateGroup> 
                                    </VisualStateManager.VisualStateGroups> 
                                    <Border x:Name="CarouselItemMainBorder" 
                                        ClipToBounds="False" RenderTransformOrigin="0.5, 1" 
                                        Opacity="{Binding ReflectionSettings.Opacity, RelativeSource={RelativeSource TemplatedParent}}" 
                                        Visibility="{Binding ReflectionSettings.Visibility, RelativeSource={RelativeSource TemplatedParent}}" 
                                        BorderBrush="{x:Null}" BorderThickness="1,1,1,1" CornerRadius="0" SnapsToDevicePixels="True" Margin="0,0,-10,-35" MouseEnter="MouseEnterTest"> 
                                        <Border.Background> 
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
                                                <GradientStop Color="#FFC1DCFF" Offset="0"/> 
                                                <GradientStop Color="#FF7EB8F8" Offset="1"/> 
                                            </LinearGradientBrush> 
                                        </Border.Background> 
                                        <ContentPresenter x:Name="CarouselContentPresenter"/> 
                                    </Border> 
                                </Border> 
                            </ControlTemplate> 
                        </Setter.Value> 
                    </Setter> 
                </Style> 
            </Grid.Resources> 
        </Grid> 

    I am using .NET 4 and VS2010, but I'm not sure that should matter.

    Thanks,
    Scott
  7. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 27 Apr 2010 Link to this post

    Hello Scott,

    The following lines cause the problem:

    1.Opacity="{Binding ReflectionSettings.Opacity, RelativeSource={RelativeSource TemplatedParent}}" 
    2.Visibility="{Binding ReflectionSettings.Visibility, RelativeSource={RelativeSource TemplatedParent}}"

    If you remove the the items will reappear.


    Regards,
    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.
  9. x
    x avatar
    5 posts
    Member since:
    Jul 2010

    Posted 09 Jul 2010 Link to this post

    Yes thats from that stupid example on http://www.telerik.com/help/wpf/carousel-items.html

    I spent around 1 h just to know where the heck is the problem.

Back to Top