如何删除ButtonChrome边框(定义边框模板时)？

Question

我跟着ChrisF 这里写了一个简单的演示.

...在Expression Blend中打开您的项目,选择按钮,然后右键单击并选择"编辑模板>编辑副本..".这会将现有模板复制到您可以修改的模板中.如果您在资源字典中创建它会更容易.

我可以看到按钮的幕后模板,如下面的屏幕截图(资源中的ButtonChrome).

我想删除ButtonChrome 的白色渐变边框并保持按钮UI的其他所有内容保持原样.我怎样才能做到这一点？

PS.为了简化问题,我使用ButtonChrome作为我视图的常规控件.我浏览属性但仍然不知道在哪里删除"白色"边框.

(ButtonChrome正在使用中)

(资源中的ButtonChrome)

Answer 1

WPF的一个很棒的特性是能够在完全交换控件的外观的同时利用控件的行为.您可以完全删除chrome并创建符合您要求的自定义外观.

样品

 <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>

检查一下 http://www.designerwpf.com/2008/03/27/wpf-designers-guide-to-styles-and-templates/

此链接现在似乎有效:http: //www.designersilverlight.com/2008/03/27/wpf-designers-guide-to-styles-and-templates/

Answer 2

我认为没有一种简单的方法可以摆脱那种白色边界.调用的实际例程是DrawInnerBorder,它在ButtonChrome中从OnRender中调用.

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);
        }
    }
}

我们可以看到,没有属性可以禁用它.您可以通过设置IsEnabled="False"和RoundCorners="False"在ButtonChrome上设置或通过将宽度或高度设置为3.99并且"白色边框"消失来验证它.

更新
要禁用ButtonChrome的内部边框,您可以创建自己的ButtonChrome来添加此属性.不幸的是,ButtonChrome是密封的,所以我们不能继承它.我试图复制整个类并添加属性DisableInnerBorder,它似乎正在工作.你可以像这样使用它

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

除此之外,它的工作方式与常规ButtonChrome相同,您还可以添加其他属性等.这个方法可能有一些我没有想到的缺点,但是对于一个小的测试,它工作得很好.

好像937行的代码太多了,无法在SO上发布:)我在这里上传了MyButtonChrome.cs:http://www.mediafire.com/？ heartra4qj4qt07wn6