如何完全删除wpf中的按钮边框?


129

我正在尝试创建一个其中包含图像且没有边框的按钮-就像Firefox工具栏按钮一样,然后将鼠标悬停在它们上面并看到完整按钮。

我已经尝试设置BorderBrushTransparentBorderThickness0,也尝试过BorderBrush="{x:Null}",但你仍然可以看到按钮的轮廓。


1

1
WPF中的无边框按钮?您认为这是一个直观的UI框架吗?!
乔什·诺

Answers:


258

试试这个

<Button BorderThickness="0"  
    Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" >...

1
太棒了!我发现的所有其他解决方案都非常复杂,涉及覆盖按钮的所有样式。
乔纳森

10
不幸的是,它禁用了设置HorizontalContentAlignment为的效果Stretch
Konrad Morawski

3
@Cœur指定的问题不是WPF,而是Silverlight
西蒙

10
这将我的按钮变成了切换按钮。当我单击按钮时,它将保持选中状态,直到单击另一个按钮。我将如何阻止它采取这种行动?
burnttoast14年

2
如果可以的话,我会两次投票。为我节省了很多代码,以获得我想要的外观。
avenmore 2014年

52

您可能需要更改按钮模板,这将为您提供一个没有边框的按钮,而且没有任何按动或禁用的效果:

    <Style x:Key="TransparentStyle" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Background="Transparent">
                        <ContentPresenter/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

和按钮:

<Button Style="{StaticResource TransparentStyle}"/>

我不知道为什么其他解决方案似乎对其他人也有用。该解决方案是唯一可行的解​​决方案,因为ContentPresenter Border Line也已删除!干得好!
2013年

1
我尝试了其他几种解决方案,这是唯一的一项工作。顺便说一句,对于新手,<style> </ style>代码应位于xaml的标头中,例如<Window> <Window.Resource> <Style> ....
Felix

1
另外,答案中有错别字:<Button Style="{StaticResource TransparentButton}"/>应该是<Button Style="{StaticResource TransparentStyle}"/>
Felix

也为我工作,很好的解决方案!
bbqchickenrobot 2014年

为我工作,很棒的解决方案!
Contango 2014年

23

您要做的是这样的:

<Button Name="MyFlatImageButton"
        Background="Transparent"
        BorderBrush="Transparent"
        BorderThickness="0" 
        Padding="-4">
   <Image Source="MyImage.png"/>
</Button>

希望这就是您想要的。

编辑:对不起,忘记提及了,如果您希望将鼠标悬停在图像上时看到按钮边框,您所要做的就是跳过Padding =“-4”


1
这行得通,在某些情况下这是一个很好的主意
好奇

当您想在按钮内拉伸图像时,这非常适合。删除填充物可使图像占据整个按钮的尺寸。
visc

23

我不知道为什么其他人没有指出这个问题与这个被接受的答案是重复的。

我在这里引用解决方案:您需要覆盖ControlTemplateButton

<Button Content="save" Name="btnSaveEditedText" 
                Background="Transparent" 
                Foreground="White" 
                FontFamily="Tw Cen MT Condensed" 
                FontSize="30" 
                Margin="-280,0,0,10"
                Width="60"
                BorderBrush="Transparent"
                BorderThickness="0">
    <Button.Template>
        <ControlTemplate TargetType="Button">
             <ContentPresenter Content="{TemplateBinding Content}"/>
        </ControlTemplate>
    </Button.Template>  
</Button>

5
如果您没有在按钮内放置任何内容,它将不会响应单击。您可以通过将ContentPresenter包裹在具有透明背景的Border中来解决此问题。这样,您可以制作任意大小的空白/透明按钮以放置在图像上。
13年

3

您可以使用超链接而不是按钮,如下所示:

        <TextBlock>
            <Hyperlink TextDecorations="{x:Null}">
            <Image Width="16"
                   Height="16"
                   Margin="3"
                   Source="/YourProjectName;component/Images/close-small.png" />
            </Hyperlink>
        </TextBlock>

2

您可能已经知道,将Button放在ToolBar内可以实现此功能,但是如果您希望某些东西可以在所有当前主题下以某种可预测性运行,则需要创建一个新的ControlTemplate。

当按钮具有焦点时,Prashant的解决方案不适用于不在工具栏中的按钮。在XP中使用默认主题时,它也不能100%工作-当容器背景为白色时,您仍然可以看到模糊的灰色边框。


1

通过编程,您可以执行以下操作:

btn.BorderBrush = new SolidColorBrush(Colors.Transparent);

1
我认为这可能没有用,因为他正在XAML方面寻求解决方案
Mohamed Kamel Bouzekria

-1

你为什么不都设置Background & BorderBrush相同brush

 <Style TargetType="{x:Type Button}" >
        <Setter Property="Background" Value="{StaticResource marginBackGround}"></Setter>
        <Setter Property="BorderBrush" Value="{StaticResource marginBackGround}"></Setter>            
 </Style>

<LinearGradientBrush  x:Key="marginBackGround" EndPoint=".5,1" StartPoint="0.5,0">
    <GradientStop Color="#EE82EE" Offset="0"/>
    <GradientStop Color="#7B30B6" Offset="0.5"/>
    <GradientStop Color="#510088" Offset="0.5"/>
    <GradientStop Color="#76209B" Offset="0.9"/>
    <GradientStop Color="#C750B9" Offset="1"/>
</LinearGradientBrush>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.