Border and background on Expander when focus the control

[Hans]

Hi Telerik,

We implemented your Expander control but when we click with the mouse on the Expander control itself, like border or body, it will create a blue border and blue background. See image attached.

We tried to remove all borders and focusvisual styles but without luck.

Can you please help?

Thanks.

[Tina Stancheva]

Hi Hans,

I am not sure which border you need to remove but if you are referring to the focus visual border around the Expander header, you need to edit the ControlTemplate of the HeaderButton element of the control. I attached a sample project to illustrate this suggestion. Can you please have a look at it and let me know if this is what you had in mind?

Also, if you have defined a custom style for the control and you need to further customize it, it would be best to send us a small working project illustrating your scenario and we will examine it and implement the requested changes.

Best wishes,
Tina Stancheva
the Telerik team

[Hans]

Hi,

Have you seen the image? Where do you see a border around the header? There is no border at all.
The blue border and the white background is on the full expander control.

I tried to implement your suggestion but as I already expected this is not working.

Please see attached a new image which will show a focussed and unfocused expander.
The problem is also that it will not leave the unfocused state when clicking on the Grid?

We removed all focussed states, etc. but it does not solve the issue.

[Tina Stancheva]

Hi Hans,

Thank you for getting back to us and the clarification. I examined both pictures you sent and I was wondering whether you apply a custom theme or style to the control. Basically the Border around the control is controlled by the BorderThickness and BorderBrush properties of the control? Are those set in your case?

Unfortunately I cannot reproduce the scenario you described - "when we click with the mouse on the Expander control itself, like border or body, it will create a blue border and blue background". This is why I wanted to ask you whether you can send us a sample reproducing the issue so that we can look into it. Any styles/themes applied to the control might be causing this behavior, so if you can send them as well, that would greatly help us find the cause for your issue.

Thank you in advance for your cooperation.

All the best,
Tina Stancheva
the Telerik team

[Hans]

Hi Telerik,

I solved this issue. It was not in the Expander but in a parent control of the Expander. Sorry for the inconvenience.

Now I have a same issue on an ItemsControl. See attached border. It does not have a style, only the itemspanel has a template. See XAML:

<Grid x:Name="LayoutRoot">
        <Grid Height="Auto">
            <Grid.RowDefinitions>
                <RowDefinition Height="72" />
                <RowDefinition Height="40" />
            </Grid.RowDefinitions>
            <TextBlock x:Name="tbMessage"
                       Text="{Binding Header}"
                       TextWrapping="Wrap"
                       Margin="10,0,10,10"/>
            <telerik:ItemsControl x:Name="ButtonList" Grid.Row="1"
                                  ItemsPanel="{StaticResource ItemsPanelTemplate}"
                                  ItemsSource="{Binding Buttons}">
                <telerik:ItemsControl.ItemTemplate >
                    <DataTemplate>
                        <Button Width="100"
                                Height="30"
                                Margin="10,0,0,0"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Top"
                                Click="Button_Click"
                                Content="{Binding Caption}"
                                ContentTemplate="{StaticResource MessageBoxButtonDataTemplate}"
                                Style="{StaticResource GreenPopupButton}" />
                    </DataTemplate>
                </telerik:ItemsControl.ItemTemplate>
            </telerik:ItemsControl>
        </Grid>
    </Grid>

I tried to search our full solution on the color of that line (#FFBD69) but cannot find it??

How can we disable this line?

Thanks.

[Petar Mladenov]

Hi Hans,

From the code snippet you have sent, we are unable to detect where this border comes from. Could you please open a support ticket so that you will be able to send a file? A runnable sample will be highly appreciated and this we could provide with a better advice. Thank you for your cooperation.

All the best,
Petar Mladenov
the Telerik team

[Hans]

Dear Telerik,

We really cannot build an example application for every issue we have.
We now solved it by replacing your ItemsControl by the default Silverlight ItemsControl.

Hans

[Tina Stancheva]

Hi Hans,

I see your point. We ask for samples since it is sometimes hard to investigate each case when we are not aware of the scenario in which our controls are used.

However, we investigated further your case and the Border you need to remove is a part of the Telerik ItemsControl ControlTemplate. It defines a FocusVisualElement, which is a Border that is displayed when the ItemsControl is focuses. However, if you remove the FocusStates VisualStates from the control's Template, the border will be removed.

I attached a sample project, if you decide to go back to the Telerik's ItemsControl. I am sorry for the inconvenience.

Regards,
Tina Stancheva
the Telerik team

[Ashley]

Hello Telerik Support,
I am getting the same issue. I don't understand your solution; are you suggesting I take the source for your controls, change it, build it and then use that in my project? Just to get rid of this inherited style? BTW I cannot see into your solution; I downloaded it, unpacked it and it wouldn't load in Visual Studio.
Regards,
Ashley

[Tina Stancheva]

Hi Ashley,

My suggestion is to edit the default ControlTemplate of the ItemsControl to remove the focused visual state. In order to do that, you don't need to use our source, but instead use ExpressionBlend to get the template as described here.

Also, you're right there is an issue with the sample solution so I reattached it. Please give it a try and let me know if it helps.

Regards,
Tina Stancheva
the Telerik team