How to remove ButtonChrome border (when defining the template of a border)?

Question

I followed ChrisF here and write a simple demo.

...open your project in Expression Blend, select the button and then right click and select "Edit Template > Edit a Copy..". This copies the existing template into one you can modify. It's easier if you create it in a resource dictionary.

And I can see the behind-the-screen template of the button as below screenshot (The ButtonChrome in Resource).

I want to remove the white-gradient border of the ButtonChrome AND keep everything else of the button's UI remain as-is. How can I do that?

ps. To make the problem simple I use the ButtonChrome as a normal control on my view. I browse the properties but still got NO idea where to remove the "white" border.

(The ButtonChrome in-use) alt text

(The ButtonChrome in Resource) alt text

score 17 · Answer 1 · edited Jun 23 '12 at 01:11

One of the great fetatures of WPF is the ability to leverage the behavior of a control while completely swapping the look of that control.You can just delete the chrome altogether and create a custom appearence that matches your requirement.

Sample

 <Style x:Key="NoChromeButton" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid x:Name="Chrome" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                            <Setter Property="Opacity" TargetName="Chrome" Value="0.5"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Check this too http://www.designerwpf.com/2008/03/27/wpf-designers-guide-to-styles-and-templates/

This link seems to work now: http://www.designersilverlight.com/2008/03/27/wpf-designers-guide-to-styles-and-templates/

score 11 · Accepted Answer · edited Apr 25 '16 at 07:13

I don't think there's an easy way to get rid of that White Border. The actual routine being called is DrawInnerBorder and its called from within OnRender in ButtonChrome.

protected override void OnRender(DrawingContext drawingContext)
{
    Rect bounds = new Rect(0.0, 0.0, base.ActualWidth, base.ActualHeight);
    this.DrawBackground(drawingContext, ref bounds);
    this.DrawDropShadows(drawingContext, ref bounds);
    this.DrawBorder(drawingContext, ref bounds);

    // This one draws the white Rectangle
    this.DrawInnerBorder(drawingContext, ref bounds);
}

private void DrawInnerBorder(DrawingContext dc, ref Rect bounds)
{
    if ((base.IsEnabled || this.RoundCorners) && ((bounds.Width >= 4.0) && (bounds.Height >= 4.0)))
    {
        Pen innerBorderPen = this.InnerBorderPen;
        if (innerBorderPen != null)
        {
            dc.DrawRoundedRectangle(null, innerBorderPen, new Rect(bounds.Left + 1.5, bounds.Top + 1.5, bounds.Width - 3.0, bounds.Height - 3.0), 1.75, 1.75);
        }
    }
}

As we can see, there is no property to disable this. You can verify it by setting IsEnabled="False" and RoundCorners="False" on the ButtonChrome or by setting Width or Height to something like 3.99 and the "White Border" goes away.

Update
To disable the inner border of ButtonChrome you could create your own ButtonChrome which adds this property. Unfortunately ButtonChrome is sealed so we can't inherit from it. I tried to copy the whole class and add the Property DisableInnerBorder and it seems to be working. You can use it like this

<local:MyButtonChrome ...
                      DisableInnerBorder="True">

Other than that it works just like the regular ButtonChrome and you can also add other Properties etc. that you might want. There might be drawbacks to this method that I haven't thought of, but for a small test it worked just fine.

Apperently 937 lines of code was too much to post on SO :) I uploaded MyButtonChrome.cs here: http://www.mediafire.com/?wnra4qj4qt07wn6

@Nam Gi VU: I used .NET Reflector and added the PresentationFramework.Aero assembly to debug. Then I just stepped through the drawing routines to find out where this was drawn and checked if there was some way to disable it :) — Fredrik Hedblad, Dec 29 '10 at 14:06
Thank you Meleak! About your suggestion to use `Border` instead of `ButtonChrome`, I will lose all the UI-effect of a normal button (mouse over, pressed, ect.) Do you have any work-around for that? — Nam G VU, Dec 30 '10 at 03:25
@Nam Gi VU: Updated my answer. There might be some drawbacks to this that I haven't thought of but it seems to be working. — Fredrik Hedblad, Dec 30 '10 at 13:16
Great work! Your suggestion are best and WORKING among others. Hope no drawbacks will exist. I think you mean `DisableInnerBorder="True"` instead of `DisableInnerBorder="False"` — Nam G VU, Jan 01 '11 at 02:54

Pavlo Glazkov · Answer 3 · 2010-12-29T20:41:06.637

You should not try to customize ButtonChrome. *Chrome classes are theme-specific, i.e. they contain implementation of a specific windows theme and you cannot override it. Look at the declaration of the "Microsoft_Windows_Themes" namespace in your resource dictionary - it probably contains something like PresentationFramework.Aero...

What you should do in your custom templates is use usual Border instead of ButtonChrome and define triggers that will change its background, etc. when the button is pressed or hovered.

Here is an example:

<Style x:Key="BaseButtonStyle"
   TargetType="{x:Type ButtonBase}">
<Setter Property="FocusVisualStyle"
        Value="{StaticResource ButtonFocusVisual}" />
<Setter Property="Background"
        Value="{StaticResource ButtonNormalBackground}" />
<Setter Property="BorderBrush"
        Value="{StaticResource ButtonNormalBorder}" />
<Setter Property="BorderThickness"
        Value="1" />
<Setter Property="Foreground"
        Value="{StaticResource ButtonNormalForeground}" />
<Setter Property="HorizontalContentAlignment"
        Value="Center" />
<Setter Property="VerticalContentAlignment"
        Value="Center" />
<Setter Property="Padding"
        Value="5,2,5,2" />
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type ButtonBase}">
            <Border Name="Chrome"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    SnapsToDevicePixels="true"
                    CornerRadius="2">
                <ContentPresenter Margin="{TemplateBinding Padding}"
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  RecognizesAccessKey="True"
                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver"
                         Value="True">
                    <Setter Property="Background"
                            Value="{StaticResource ButtonHoverBackground}" />
                    <Setter Property="Foreground"
                            Value="{StaticResource ButtonHoverForeground}" />
                </Trigger>

                <Trigger Property="IsPressed"
                         Value="True">
                    <Setter Property="Background"
                            Value="{StaticResource ButtonPressedBackground}" />
                    <Setter Property="Foreground"
                            Value="{StaticResource ButtonPressedForeground}" />
                </Trigger>
                <Trigger Property="ToggleButton.IsChecked"
                         Value="True">
                    <Setter Property="Background"
                            Value="{StaticResource ButtonHoverBackground}" />
                    <Setter Property="Foreground"
                            Value="{StaticResource ButtonNormalForeground}" />
                </Trigger>
                <Trigger Property="IsEnabled"
                         Value="false">
                    <Setter Property="Foreground"
                            Value="#ADADAD" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

Can you give me a full template that helps to keep all UI feature of a button except the "white border"? — Nam G VU, Dec 29 '10 at 13:57

score 1 · Answer 4 · answered Feb 26 '15 at 21:37

I realize this is an old thread, but I found it when I was trying to do the same thing and didn't find any great solutions. I thought I'd post what I came up with in case it helps anybody else.

What I wanted was flat buttons that used the normal chrome when moused over. The best way I could find to do this was to cheat and use two ContentPresenters inside a Grid with two rows. One content presenter is inside the normal ButtonChrome and one is inside a Border. Only one grid row is shown at a time and the setter in the IsMouseOver trigger determines which one is shown.

<Window.Resources>
    <Style x:Key="ButtonFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle StrokeDashArray="1 2" StrokeThickness="1" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" SnapsToDevicePixels="true" Margin="2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#F3F3F3" Offset="0"/>
        <GradientStop Color="#EBEBEB" Offset="0.5"/>
        <GradientStop Color="#DDDDDD" Offset="0.5"/>
        <GradientStop Color="#CDCDCD" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="ButtonNormalBorder" Color="Transparent"/>
    <Style x:Key="ActionButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
        <Setter Property="Background" Value="{x:Null}"/>
        <Setter Property="BorderBrush" Value="{x:Null}"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition  x:Name="ContentWithChrome" Height="0"></RowDefinition>
                            <RowDefinition  x:Name="ContentWithBorder" Height="Auto"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Themes:ButtonChrome Grid.Row="0" x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Themes:ButtonChrome>
                        <Border Grid.Row="1" Margin="0,2,0,2">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Height" TargetName="ContentWithChrome" Value="Auto" />
                            <Setter Property="Height" TargetName="ContentWithBorder" Value="0" />
                        </Trigger>
                        <Trigger Property="IsKeyboardFocused" Value="true">
                            <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
                        </Trigger>
                        <Trigger Property="ToggleButton.IsChecked" Value="true">
                            <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

score 0 · Answer 5 · answered Feb 11 '17 at 09:47

An option is also to use an other library like telerik or xceed (also available for free commercial-use). In my solution I created a class an derived it from Xceed.Wpf.Toolkit.Chromes.ButtonChrome (the Microsoft ButtonChrome is sealed). In my ResourceDictionary I implemented an style for Combobox, created by Blend for VS. In the ControlTemplate for the ToggleButton I have implemented following code:

<ControlTemplate TargetType="{x:Type ToggleButton}">
    <p:ButtonChromeManaged x:Name="Chrome"
                           Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"
                           Background="Transparent"
                           BorderBrush="Transparent"
                           CornerRadius="0"
                           SnapsToDevicePixels="true">
        <p:ButtonChromeManaged.Template>
            <ControlTemplate TargetType="{x:Type p:ButtonChromeManaged}">
                <Border Background="Red">
                    <Path x:Name="Arrow"
                          Margin="0,1,0,0"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"
                          Data="{StaticResource DownArrowGeometry}"
                          Fill="Black" />
                </Border>
            </ControlTemplate>
        </p:ButtonChromeManaged.Template>

Here you can see only the most impertand stuf. Your DownArrowGeometry and so on, you know to do. I hope this can help someone ;-)

score 0 · Answer 6 · answered Dec 29 '10 at 13:03

if you want to just avoid the WhiteBorder you have to just change the BorderBrush=Transparent

<Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" SnapsToDevicePixels="true" 
                        Background="{TemplateBinding Background}" BorderBrush="Transparent"
                         RenderDefaulted="{TemplateBinding IsDefaulted}" RenderMouseOver="{TemplateBinding IsMouseOver}"
                          RenderPressed="{TemplateBinding IsPressed}">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
                        </Microsoft_Windows_Themes:ButtonChrome>

If you want to modify some other things you have to create your own ControlTemplate

please this link

http://mark-dot-net.blogspot.com/2007/07/creating-custom-wpf-button-template-in.html

here they have different button templates

score 0 · Answer 7 · answered Jan 01 '11 at 03:54

0

Asfter discussing with Meleak for a while, finally I got the final solution for my question! Thank you Meleak!

You can download the solution source codes here.

answered Jan 01 '11 at 03:54

Nam G VU

33,193
69
233
372

How to remove ButtonChrome border (when defining the template of a border)?

7 Answers7

Linked