Change SelectedItem Color in .NET3.5 Control

2 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    3 posts
    Member since:
    May 2013

    Posted 06 Jan 2014 Link to this post

    Hi

    For some reason i only able to work with the .NET 3.5 Version of Telerik-Controls.



    I'm having a hard time trying to Change the Color of the SelectedItem in a TreeView.

    I tried using your sample from another post here. But since the control template used there uses VisualStates, i cannot use it in .NET 3.5.



    I have this control:

    <UserControl
        x:Class="My.Controls.Views.TreeView"
        xmlns:windows="clr-namespace:Telerik.Windows;assembly=Telerik.Windows.Controls"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="300"
        Name="TreeControlView">
        <UserControl.Resources>
            <Style TargetType="ToggleButton" x:Key="Expander">
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="Cursor" Value="Hand" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ToggleButton}">
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Trigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Duration="0:0:0.05"
                                                    Storyboard.TargetName="Button"
                                                    Storyboard.TargetProperty="Opacity" To="0" />
                                                <DoubleAnimation
                                                    Duration="0:0:0.05"
                                                    Storyboard.TargetName="ButtonOver"
                                                    Storyboard.TargetProperty="Opacity" To="1" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.EnterActions>
                                </Trigger>
                                <Trigger Property="IsChecked" Value="True">
                                    <Trigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Duration="0:0:0.05"
                                                    Storyboard.TargetName="CollapsedVisual"
                                                    Storyboard.TargetProperty="Opacity" To="0" />
                                                <DoubleAnimation
                                                    Duration="0:0:0.05"
                                                    Storyboard.TargetName="CollapsedVisualOver"
                                                    Storyboard.TargetProperty="Opacity" To="0" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.EnterActions>
                                    <Trigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Duration="0:0:0.05"
                                                    Storyboard.TargetName="CollapsedVisual"
                                                    Storyboard.TargetProperty="Opacity" To="1" />
                                                <DoubleAnimation
                                                    Duration="0:0:0.05"
                                                    Storyboard.TargetName="CollapsedVisualOver"
                                                    Storyboard.TargetProperty="Opacity" To="1" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.ExitActions>
                                </Trigger>
                            </ControlTemplate.Triggers>
                            <Grid>
                                <Grid x:Name="Button" Margin="0,7,4,0" HorizontalAlignment="Right" VerticalAlignment="Top" Width="11" Height="11">
                                    <Grid.Background>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#3F047BA5" Offset="0.996" />
                                            <GradientStop Color="#00000000" Offset="0" />
                                        </LinearGradientBrush>
                                    </Grid.Background>
                                    <Rectangle Stroke="#FF000000" HorizontalAlignment="Left" VerticalAlignment="Top" Width="11" Height="11" />
                                    <Rectangle
                                        x:Name="CollapsedVisual" Fill="#FF000000"
                                        HorizontalAlignment="Left" VerticalAlignment="Top"
                                        Width="1" Height="5" Margin="5,3,0,0" />
                                    <Rectangle
                                        Fill="#FF000000" VerticalAlignment="Top"
                                        HorizontalAlignment="Left" Height="1" Width="5"
                                        Margin="3,5,0,0" />
                                </Grid>
                                <Grid
                                    x:Name="ButtonOver" Margin="0,7,4,0"
                                    HorizontalAlignment="Right" VerticalAlignment="Top"
                                    Width="11" Height="11">
                                    <Rectangle
                                        Stroke="#FF167497" HorizontalAlignment="Left"
                                        VerticalAlignment="Top" Width="11" Height="11">
                                        <Rectangle.Fill>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#26167497" Offset="1" />
                                                <GradientStop Color="#00167497" Offset="0" />
                                            </LinearGradientBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                    <Rectangle
                                        x:Name="CollapsedVisualOver" Fill="#FF167497"
                                        HorizontalAlignment="Left" VerticalAlignment="Top"
                                        Width="1" Height="5" Margin="5,3,0,0" />
                                    <Rectangle
                                        Fill="#FF167497" VerticalAlignment="Top"
                                        HorizontalAlignment="Left" Height="1" Width="5"
                                        Margin="3,5,0,0" />
                                </Grid>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </UserControl.Resources>
        <telerik:RadTreeView
            x:Name="BaseTreeView"
            telerik:TextSearch.TextPath="Header"
            ExpanderStyle="{StaticResource Expander}"
            IsLoadOnDemandEnabled="False"
            IsVirtualizing="True"
            telerik:TreeViewPanel.IsVirtualizing="True"
            telerik:TreeViewPanel.VirtualizationMode="Hierarchical"
            telerik:AnimationManager.IsAnimationEnabled="False" ItemDoubleClick="BaseTreeView_ItemDoubleClick"
            >
            <telerik:RadTreeView.ContextMenu>
                <ContextMenu Name="_treeViewContextMenu">
                    <MenuItem Header="Expand All" Click="ContextMenuExpandAll" />
                    <MenuItem Header="Collapse All" Click="ContextMenuCollapseAll" />
                    <Separator x:Name="_expandCollapseSeparator" x:FieldModifier="private" Visibility="Collapsed" />
                    <MenuItem x:Name="_expandMenuItem" x:FieldModifier="private" Header="Expand" Click="ContextMenuExpand" Visibility="Collapsed" />
                    <MenuItem x:Name="_collapseMenuItem" x:FieldModifier="private" Header="Collapse" Click="ContextMenuCollapse" Visibility="Collapsed" />
                </ContextMenu>
            </telerik:RadTreeView.ContextMenu>
            <telerik:RadTreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Children}" >
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Header}">
                            <TextBlock.Style>
                                <Style TargetType="TextBlock">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsTemplateSet, RelativeSource={RelativeSource AncestorType={x:Type views:TreeView}}}" Value="True">
                                            <Setter Property="Visibility" Value="Collapsed" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBlock.Style>
                            <ToolTipService.ToolTip>
                                <ToolTip>
                                    <ToolTip.Content>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="{Binding ToolTip}" />
                                        </StackPanel>
                                    </ToolTip.Content>
                                </ToolTip>
                            </ToolTipService.ToolTip>                       
                        </TextBlock>
                        <ContentPresenter x:Name="TreeItemContent" Content="{Binding Value}" ContentTemplate="{Binding TreeItemContentTemplate, RelativeSource={RelativeSource AncestorType={x:Type views:TreeView}}}" >
                            <ContentPresenter.Style>
                                <Style TargetType="ContentPresenter">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsTemplateSet, RelativeSource={RelativeSource AncestorType={x:Type views:TreeView}}}" Value="False">
                                            <Setter Property="Visibility" Value="Collapsed" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </ContentPresenter.Style>
                        </ContentPresenter>
                    </StackPanel>
                </HierarchicalDataTemplate>
            </telerik:RadTreeView.ItemTemplate>
            <telerik:RadTreeView.ItemContainerStyle>
                <Style TargetType="telerik:RadTreeViewItem" >
                    <Setter Property="IsSelected" Value="{Binding Selected, Mode=TwoWay}" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsMarked }" Value="True">
                            <Setter Property="Background" Value="#F9D381" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding ContainsMarkedItems }" Value="True">
                            <Setter Property="Background" Value="#F9EBCC" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </telerik:RadTreeView.ItemContainerStyle>       
        </telerik:RadTreeView>
    </UserControl>


    I cannot seem to create a Style for RadTreeViewItem and with a different Color for SelectedItem and set it as BasedOn in the ItemContainerStyle.



    Any help would really be appreciated!



    Regards

    Jonathan

  2. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 09 Jan 2014 Link to this post

    Hi Jonathan,

    If  you want to change the default color of a selected RadTreeViewItem you will have to edit the default ControlTemplate of the items. The template could be extracted with Microsoft Expression Blend. You can read about that in the Editing Control Templates in Expression Blend tutorial.

    For your convenience, I extracted the style and commented the SelectionVisual and the MouseOverVisual Border elements. In order to change the color of the selected item you need to change the Background and the BorderBrush in the Border with x:Name="SelectionVisual" from the control template.

    I attached a resource dictionary containing the control template.

    Regards,
    Martin Ivanov
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top