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

Styling a CarouselItem makes Carousel Disappear

4 Answers 117 Views
Carousel
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Scott asked on 20 Apr 2010, 02:01 PM
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> 

4 Answers, 1 is accepted

Sort by
0
Milan
Telerik team
answered on 21 Apr 2010, 03:33 PM
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.
0
Scott
Top achievements
Rank 1
answered on 21 Apr 2010, 07:43 PM
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
0
Milan
Telerik team
answered on 27 Apr 2010, 02:59 PM
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.
0
x
Top achievements
Rank 1
answered on 10 Jul 2010, 04:01 AM

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.

Tags
Carousel
Asked by
Scott
Top achievements
Rank 1
Answers by
Milan
Telerik team
Scott
Top achievements
Rank 1
x
Top achievements
Rank 1
Share this question
or