How to remove ButtonChrome border (when defining t

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)

(The ButtonChrome in Resource)

Answer 1

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/