Selected Item

3 posts, 0 answers
  1. David Ribb
    David Ribb avatar
    16 posts
    Member since:
    Aug 2012

    Posted 19 Apr 2010 Link to this post

    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
  2. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 20 Apr 2010 Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. David Ribb
    David Ribb avatar
    16 posts
    Member since:
    Aug 2012

    Posted 20 Apr 2010 Link to this post

    Thank you, I will give this a try today.

    David Ribb
Back to Top