Styling a CarouselItem makes Carousel Disappear

[Scott]

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>

[Milan]

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.

[Scott]

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

[Milan]

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.

[x]

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.