Hello,
I use the RadTreeListView control and set the theme implicitly. So far, everything works well. Currently, I use the theme "Office Black". I would like to adjust the table by making changes to the "Telerik.Windows.Controls.GridView.xaml"-ResourceDictionary. So far, I could edit a lot of stuff, and it mostly worked great. But there's one thing I just can't seem to resolve.
I am having trouble customizing all the shown borders of the RadTreeListView. I don't want to have any "IsSelected" or "EditMode" Styles since my TreeListView should exclusively display information.
1) Header row cells:
I noticed that there seem to be several borders around each header row cell. What are the names of the colors of the borders or the names of the borders themselves? A black border, probably 1 pixel in thickness in each direction, keeps appearing and after hours of searching I still haven't found how to hide it / delete it from the ResourceDictionary. In the header row, each cell must only have one white border surrounding it - plain WPF :)
2) 'Normal' table cells showing content:
Furthermore, a border with 1 pixel thickness on the left and upper side appears as soon as I click into a cell (NOT in the header). As soon as clicked, the border mustn't change its style in any way - no change in style or behavior desired.
I want to edit the ResourceDictionary and NOT just overwrite the TreeListView itself. The ResourceDictionary must be reusable in my solution.
Thanks in advance! Any help is appreciated.
1 Answer, 1 is accepted
Hello Alexander,
1) Header row cells
I am not sure that I understand this part of the inquiry. Would it be possible to share a bit more information about it? For example, an image.
Generally, if you would like to customize the look of the header cell, locate the ControlTemplate with x:Key="GridViewHeaderCell" and modify the properties of the outer and inner Border elements. More specifically, the outer Borders with x:Name="GridViewHeaderCell", x:Name="GridViewHeaderCell_Over", x:Name="GridViewHeaderCell_Selected", and their inner ones. Their BorderBrush, BorderThickness, and Background properties can be modified to achieve the desired look.
2) 'Normal' table cells showing content
For this part of the inquiry, the black border that appears when clicking on a cell is there to notify about the current item of the control. To remove it, locate the ControlTemplate with x:Key="GridViewCellTemplate" and remove the VisualState with x:Name="Current".
<!--From the ControlTemplate with x:Key="GridViewCellTemplate"-->
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<!--Remove the following VisualState-->
<!--<VisualState x:Name="Current">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background_Current" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>-->
For the selection part of the inquiry, locate the ControlTemplate with x:Key="TreeListViewRowTemplate" and remove the VisualStates with x:Name="Selected", x:Name="SelectedUnfocused", and x:Name="MouseOver".
<!--From the ControlTemplate with x:Key="TreeListViewRowTemplate"-->
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<!--<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Background_Over" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background_Over" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_ItemOuterBorder_SelectedUnfocused}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundInner_Over" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_ItemBackground_SelectedUnfocused}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundInner_Over" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_ItemInnerBorder_SelectedUnfocused}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>-->
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<!--<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Background_Over" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>-->
<!--<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Background_Selected" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NavigatorIndicatorBackground" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_RowIndicatorCellBackground_Selected}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>-->
</VisualStateGroup>
With this being said, I hope the provided information will be of help to you.
Regards,
Stenly
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Dear Stenly,
thanks a lot for your answer.
Here is a screenshot demonstrating the issue in regards to the header cell:
There is a thin dark gray border inside the first header cell. This is the inner border which I weren't able to hide yet. All header cells must have one single white border (as it already works around the cell).
I edited the inner cell border of header row cells of the 'GridViewHeaderCellTemplate' as follows:
<Border x:Name="GridViewHeaderCell"Grid.ColumnSpan="2"
Margin="0"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{StaticResource GridView_HeaderInnerBorder}"
BorderThickness="0" />
</Border>
That way, the inner border of all header cells will be hidden.
The only exception is the one border which is shown in the provided screenshot. It seems to me that this is a problem which exclusively occurs in the first header cell.
Is there a separate style or control template which applies some exclusive styling to the first header cell? I just can't seem to get around it. I've been searching for ages but got nothing so far.
I hope I could provide you some context.
Thanks in advance and best regards,
Alex
Rank 1
For anyone interested: I actually solved it myself, just a few minutes after adding the previous comment to this conversation :-)
Inside 'GridViewHeaderRowTemplate' I had to set the BorderThickness of 'PART_GridViewHeaderRowBorder' to 0 (no Template Binding is applied). Solved my problem!
