如何删除 ButtonChrome 边框(定义边框模板时)? [英] How to remove ButtonChrome border (when defining the template of a border)?

问题描述

我关注了 ChrisF

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)

解决方案

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

这篇关于如何删除 ButtonChrome 边框(定义边框模板时)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！