Ticket T919567
Visible to All Users

Add new buttons to LayoutPanel header that has look and feel of pin and close buttons

created 5 years ago

We have a special LayoutPanel in our application to which I want to add a custom "settings" button to the left of the pin and close buttons.

I was able to add the image to the LayoutPanel header using LayoutPanel.ControlBoxContentTemplate and <Image Source="{dx:DXImage 'SvgImages/Icon Builder/Actions_Settings.svg'}"/>, but then I don't get the visual state changes for MouseOver, MouseDown, etc.

I also tried using a <Button> with the same image, but then it looks like a button and, again, the visual states do not match the ones for the pin and close buttons defined by the current theme.

Is there a way to add a custom button to the LayoutPanel header that has the same look and feel as the standard pin and close buttons?

Thanks.

Answers approved by DevExpress Support

created 5 years ago

Hello,
These default buttons are drawn using our internal theme-dependent resources. As a possible solution, you can try using our DockPaneControlBoxButton element in the ControlBoxContentTemplate property and put the Path element whose Fill property is bound to DockPaneControlBoxButton's foreground color:

XAML
<dxdo:LayoutPanel.ControlBoxContentTemplate> <DataTemplate> <ve:DockPaneControlBoxButton> <Path Width="16" Height="16" Stretch="Fill" Fill="{Binding Path=(TextElement.Foreground), RelativeSource={RelativeSource Self}}" Data="F1 M 319.344,237.333L 287.328,218.849L 287.328,255.818L 319.344,237.333 Z "/> </ve:DockPaneControlBoxButton> </DataTemplate> </dxdo:LayoutPanel.ControlBoxContentTemplate>

I've attached a simple sample demonstrating the main idea of this approach.
However please note, this element is a part of our themes' internal structure and may be changed in future. Thus, I recommend that you use another way to display such a button. You can find how these buttons are drawn in our themes using techniques described in the following article: How to find and change an inner DevExpress control template. After that, create you own templates for your buttons which are based on these theme-dependent templates. Although this approach is more time-consuming, it's more safe than using this inner element.

Thanks,
Kirill

    Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

    Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.