Selected Item

[David Ribb]

Is there a way to template the selected item so it stands out?  It'd like to have all non-selected items with a lower opacity and the selected item to be fully visible with a white border around it.  Do you have some some code on templating only the selected item?

David Ribb

[Milan]

Hello David Ribb,

You can create a custom style/template for CarouselItem and use triggers to achieve the desired result. 

Here is the default style and template of CarouselItem  - notice how we use a trigger for IsSelected to change a background color.

01.<ControlTemplate x:Key="CarouselItemTemplate" TargetType="{x:Type local:CarouselItem}">
02.        <Grid ClipToBounds="False" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" >
03.            <Border x:Name="reflection" RenderTransformOrigin="0.5, 1" ClipToBounds="False" Width="{Binding ElementName=dialog_Copy, Path=ActualWidth}"
04.                    Opacity="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.Opacity}"
05.                    Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.Visibility}"
06.                    BorderBrush="White" IsHitTestVisible="False"
07.                    BorderThickness="0">
08.                <Border.RenderTransform>
09.                    <TransformGroup>
10.                        <ScaleTransform
11.                                        ScaleX="{Binding RelativeSource={RelativeSource TemplatedParent},
12.                                                        Path=ReflectionSettings.WidthOffset,
13.                                                        Converter={StaticResource ArithmeticValueConverter},
14.                                                        ConverterParameter=1}"
15.                                        ScaleY="{Binding RelativeSource={RelativeSource TemplatedParent},
16.                                                        Path=ReflectionSettings.HeightOffset,
17.                                                        Converter={StaticResource ArithmeticValueConverter},
18.                                                        ConverterParameter=-1}"
19.                                        CenterY="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.OffsetY}" />
20.                        <TranslateTransform X="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.OffsetX}" />
21.                        <SkewTransform AngleX="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.Angle}" />
22.                    </TransformGroup>
23.
24.                </Border.RenderTransform>
25.                <Border.OpacityMask>
26.                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
27.                        <LinearGradientBrush.GradientStops>
28.                            <GradientStop Offset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.HiddenPercentage}" Color="Transparent"/>
29.                            <GradientStop Offset="1" Color="Black"/>
30.                        </LinearGradientBrush.GradientStops>
31.                    </LinearGradientBrush>
32.                </Border.OpacityMask>
33.                <Border.Background>
34.                    <VisualBrush Visual="{Binding ElementName=dialog_Copy}">
35.                    </VisualBrush>
36.                </Border.Background>
37.
38.            </Border>
39.            <Border x:Name="dialog_Copy" BorderBrush="#0C000000" BorderThickness="1,1,1,1" CornerRadius="12,12,12,12">
40.                <Border BorderBrush="#0C000000" BorderThickness="1,1,1,1" CornerRadius="12,12,12,12">
41.                    <Border BorderBrush="#19000000" BorderThickness="1,1,1,1" CornerRadius="11,11,11,11">
42.                        <Border BorderBrush="#33000000" BorderThickness="1,1,1,1" CornerRadius="10,10,10,10">
43.                            <Border BorderBrush="#4C000000" BorderThickness="1,1,1,1" CornerRadius="9,9,9,9">
44.                                <Border BorderBrush="#66000000" BorderThickness="1,1,1,1" CornerRadius="8,8,8,8">
45.                                    <Border BorderBrush="#7F000000" BorderThickness="1,1,1,1" CornerRadius="7,7,7,7">
46.                                        <Border BorderThickness="1,1,1,1" CornerRadius="6,6,6,6" BorderBrush="{StaticResource CarouselOuterBorderBrush}">
47.                                            <Border BorderThickness="7,7,7,7" CornerRadius="2,2,2,2" BorderBrush="{StaticResource OfficeBlackFrame}">
48.                                                <Border Margin="-1,-1,-1,-1" Width="Auto" BorderThickness="1,1,1,1" CornerRadius="2,2,2,2">
49.                                                    <Border.BorderBrush>
50.                                                        <SolidColorBrush Color="#FF9B9B9B">
51.                                                            <SolidColorBrush.Transform>
52.                                                                <MatrixTransform/>
53.                                                            </SolidColorBrush.Transform>
54.                                                            <SolidColorBrush.RelativeTransform>
55.                                                                <MatrixTransform/>
56.                                                            </SolidColorBrush.RelativeTransform>
57.                                                        </SolidColorBrush>
58.                                                    </Border.BorderBrush>
59.                                                    <Border x:Name="CarouselItemBackground" BorderThickness="1,1,1,1" CornerRadius="1,1,1,1" Background="{StaticResource BackgroundNormal}" BorderBrush="{StaticResource CarouselInnerBorderBrush}">
60.                                                        <ContentPresenter x:Name="CarouselContentPresenter" TextElement.Foreground="{StaticResource CarouselForegroundNormal}"/>
61.                                                    </Border>
62.                                                </Border>
63.                                            </Border>
64.                                        </Border>
65.                                    </Border>
66.                                </Border>
67.                            </Border>
68.                        </Border>
69.                    </Border>
70.                </Border>
71.            </Border>
72.
73.        </Grid>
74.
75.        <ControlTemplate.Triggers>
76.            <MultiTrigger>
77.                <MultiTrigger.Conditions>
78.                    <Condition Property="IsSelected" Value="False" />
79.                    <Condition Property="IsMouseOver" Value="True" />
80.                </MultiTrigger.Conditions>
81.                <Setter TargetName="CarouselItemBackground" Property="Background" Value="{StaticResource BackgroundOver}" />
82.                <Setter TargetName="CarouselContentPresenter" Property="TextElement.Foreground" Value="{StaticResource CarouselForegroundSelected}" />
83.            </MultiTrigger>
84.            <Trigger Property="IsSelected" Value="True" >
85.                <Setter TargetName="CarouselItemBackground" Property="Background" Value="{StaticResource BackgroundSelected}" />
86.                <Setter TargetName="CarouselContentPresenter" Property="TextElement.Foreground" Value="{StaticResource CarouselForegroundSelected}" />
87.            </Trigger>
88.
89.        </ControlTemplate.Triggers>
90.    </ControlTemplate>
91.
92.    <Style x:Key="{telerik:ThemeResourceKey ThemeType=<?ThemeType?>, ElementType=local:CarouselItem}" TargetType="{x:Type local:CarouselItem}">
93.        <Setter Property="Template" Value="{StaticResource CarouselItemTemplate}" />
94.        <Setter Property="MaxHeight" Value="200" />
95.        <Setter Property="Width" Value="275" />
96.        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
97.        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
98.    </Style>

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

[David Ribb]

Thank you, I will give this a try today.

David Ribb