Remove Column Mouseover effect

4 posts, 0 answers
  1. Mohammed Al
    Mohammed Al avatar
    2 posts
    Member since:
    Jan 2010

    Posted 13 Jan 2010 Link to this post

    I am trying to make the TreeListView control have a transparent background for the column headers. I have been able to do this by modifying the RadColumn Background="Transparent" and also the BorderThickness="0", as well as setting the Telerik_Windows_Controls_TreeList:ColumnView Background="Transparent" in the ScrollViewer portion of the RadTreeListView control template.

    This results in everything looking as I desire until the user mouses over the column header. At this point, the background becomes a light gray, and I have been unsuccessful in manipulating the various templates and styles to remove this effect. Is there a way for me to stop the MouseOver effect from happening? 
  2. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 14 Jan 2010 Link to this post

    Hello Mohammed Al,

    The only way is to edit the control template in Blend and to change it.

    All the best,
    Valentin.Stoychev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. DevCraft banner
  4. Mohammed Al
    Mohammed Al avatar
    2 posts
    Member since:
    Jan 2010

    Posted 14 Jan 2010 Link to this post

    Yes but what part of code template do I edit? Here is default template that Blend creates:

        <Style x:Key="RadTreeListViewStyleCustom" TargetType="TelerikNavigation:RadTreeListView"
            <Setter Property="DataShaper"
                <Setter.Value> 
                    <Telerik_Windows_Controls_TreeList:CtpDataShaper/> 
                </Setter.Value> 
            </Setter> 
            <Setter Property="TelerikDragDrop:RadDragAndDropManager.AllowDrop" Value="True"/> 
            <Setter Property="IsTabStop" Value="False"/> 
            <Setter Property="ExpanderStyle" Value="{StaticResource ItemExpanderStyle}"/> 
            <Setter Property="Template"
                <Setter.Value> 
                    <ControlTemplate TargetType="TelerikNavigation:RadTreeListView"
                        <Grid> 
                            <VisualStateManager.VisualStateGroups> 
                                <VisualStateGroup x:Name="DropStates"
                                    <VisualState x:Name="DropImpossible"/> 
                                    <VisualState x:Name="DropPossible"/> 
                                    <VisualState x:Name="DropRootPossible"
                                        <Storyboard> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ScrollViewer"
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                    <DiscreteObjectKeyFrame.Value> 
                                                        <SolidColorBrush Color="#7fFCD590"/> 
                                                    </DiscreteObjectKeyFrame.Value> 
                                                </DiscreteObjectKeyFrame> 
                                            </ObjectAnimationUsingKeyFrames> 
                                        </Storyboard> 
                                    </VisualState> 
                                </VisualStateGroup> 
                            </VisualStateManager.VisualStateGroups> 
                            <ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" TelerikControls:ScrollViewerExtensions.EnableMouseWheel="True" HorizontalScrollBarVisibility="{Binding (ScrollViewer.HorizontalScrollBarVisibility), RelativeSource={RelativeSource TemplatedParent}}" IsTabStop="False" Padding="{TemplateBinding Padding}" VerticalScrollBarVisibility="{Binding (ScrollViewer.VerticalScrollBarVisibility), RelativeSource={RelativeSource TemplatedParent}}"
                                <Telerik_Windows_Controls_TreeList:TreeListPanel VerticalAlignment="Top"
                                    <Telerik_Windows_Controls_TreeList:ColumnView x:Name="ColumnViewElement" Background="White" HorizontalAlignment="Stretch" ItemTemplate="{TemplateBinding ColumnTemplate}" ItemContainerStyleSelector="{TemplateBinding ColumnContainerStyleSelector}" ItemContainerStyle="{TemplateBinding ColumnContainerStyle}" ItemTemplateSelector="{TemplateBinding ColumnTemplateSelector}" Canvas.ZIndex="2"/> 
                                    <ItemsPresenter Canvas.ZIndex="0"/> 
                                </Telerik_Windows_Controls_TreeList:TreeListPanel> 
                            </ScrollViewer> 
                            <Grid x:Name="DragBetweenItemsFeedback" HorizontalAlignment="Left" Height="8" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="Top"
                                <Grid.ColumnDefinitions> 
                                    <ColumnDefinition Width="8"/> 
                                    <ColumnDefinition/> 
                                </Grid.ColumnDefinitions> 
                                <Ellipse HorizontalAlignment="Left" Height="8" Stroke="DarkGray" StrokeThickness="2" VerticalAlignment="Center" Width="8"/> 
                                <Rectangle Grid.Column="1" Fill="DarkGray" Height="2" Margin="-2,3,0,0" RadiusY="2" RadiusX="2" VerticalAlignment="Top"/> 
                            </Grid> 
                        </Grid> 
                    </ControlTemplate> 
                </Setter.Value> 
            </Setter> 
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/> 
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/> 
            <Setter Property="ItemsPanel"
                <Setter.Value> 
                    <ItemsPanelTemplate> 
                        <Telerik_Windows_Controls_TreeView:TreeViewPanel ChildDefaultLength="20"/> 
                    </ItemsPanelTemplate> 
                </Setter.Value> 
            </Setter> 
        </Style> 

    I have tried adding VisualStates into a new VisualStateGroup called "CommonStates" for "MouseOver" and "MouseEnter" that would theoretically override the defaults, but they do not seem to have any effect. Is there a specific Storyboard I need to target? Or a different VisualState name? Or perhaps am I doing this on the wrong control? I think I just need a little direction.

    Thanks,

    Mohammed
  5. Dimitrina
    Admin
    Dimitrina avatar
    442 posts

    Posted 20 Jan 2010 Link to this post

    Hello Mohammed ,

    Please, accept my apologies for my answered in the previous email.   Find attached a project with custom style for the RadColumn.

    Sincerely yours,
    Dimitrina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top