Como você remove completamente a borda do botão no wpf?

129

Estou tentando criar um botão com uma imagem e sem borda - assim como os botões da barra de ferramentas do Firefox antes de passar o mouse sobre eles e ver o botão completo.

Eu tentei definindo o BorderBrushque Transparent, BorderThicknessa 0, e também tentou BorderBrush="{x:Null}", mas você ainda pode ver o contorno do botão.

Steven Jeuris
fonte
1
resposta
Jake Berger
1
Um botão sem borda no WPF? !!! O que você acha que é isso, uma estrutura intuitiva de interface do usuário ?!
21716 Josh Noe

Respostas:

258

Tente isto

<Button BorderThickness="0"  
    Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" >...
Simon
fonte
1
Fantástico! Todas as outras soluções que encontrei são extremamente complicadas e envolvem a substituição de todo o estilo do botão.
22611 Jonathan
10
Infelizmente, desativa o efeito de definir HorizontalContentAlignmentpara Stretch.
Konrad Morawski
3
@ Cœur as perguntas especificado WPF não Silverlight
Simon
10
Isso está transformando meu botão em um botão de alternância. Quando clico no botão, ele permanece selecionado até clicar em outro botão. Como eu impedi-lo de agir assim?
precisa saber é o seguinte
2
Eu votaria isso duas vezes, se pudesse. Economizei muito código para obter a aparência desejada.
avenmore
52

Você pode ter que alterar o modelo do botão, isso lhe dará um botão sem moldura, mas também sem nenhum efeito de pressionar ou desativar:

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

E o botão:

<Button Style="{StaticResource TransparentStyle}"/>
Snehal
fonte
Não sei por que outras soluções parecem funcionar em outras pessoas. Esta solução é a única que pode funcionar porque a linha de borda ContentPresenter também é removida! Bom trabalho!
Nasenbaer 9/04
1
Eu tentei várias outras soluções, esta é a única que funciona. btw, para iniciantes, o código <style> </style> deve estar no cabeçalho do seu xaml, como em <Window><Window.Resource> <Style> .... #
Felix
1
Além disso, há um erro de digitação na resposta: <Button Style="{StaticResource TransparentButton}"/>deveria ser<Button Style="{StaticResource TransparentStyle}"/>
Felix
Também funcionou para mim, ótima solução!
Bbqchickenrobot
Trabalhou para mim, solução fantástica!
Contango 6/10
23

O que você precisa fazer é algo como isto:

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

Espero que isto seja o que você estava procurando.

Edit: Desculpe, esqueci de mencionar que se você quiser ver a borda do botão ao passar o mouse sobre a imagem, tudo o que você precisa fazer é pular o Padding = "- 4" .

Alfred B. Thordarson
fonte
1
Isso funciona, e isso é muito boa idéia, em alguns casos
curiosidade
Isso funciona perfeitamente quando você deseja esticar uma imagem dentro de um botão. A remoção do preenchimento permite que a imagem ocupe todas as dimensões do botão.
visc
23

Não sei por que outras pessoas não apontaram que essa pergunta é duplicada por essa com resposta aceita .

Cito aqui a solução: você precisa substituir o ControlTemplatede Button:

<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>
Nam G VU
fonte
5
Se você não colocar nenhum conteúdo dentro do botão, ele não responderá aos cliques. Você pode corrigir isso envolvendo o ContentPresenter em uma borda com um plano de fundo transparente. Dessa forma, você pode criar um botão em branco / transparente de qualquer tamanho para colocar sobre uma imagem.
bj0
3

Você pode usar o hiperlink em vez do botão, desta forma:

        <TextBlock>
            <Hyperlink TextDecorations="{x:Null}">
            <Image Width="16"
                   Height="16"
                   Margin="3"
                   Source="/YourProjectName;component/Images/close-small.png" />
            </Hyperlink>
        </TextBlock>
Сергей Гусев
fonte
2

Você já deve saber que colocar o seu botão dentro de uma barra de ferramentas fornece esse comportamento, mas se você deseja algo que funcione em TODOS os temas atuais com qualquer tipo de previsibilidade, precisará criar um novo ControlTemplate.

A solução da Prashant não funciona com um botão que não está na barra de ferramentas quando o botão está focado. Também não funciona 100% com o tema padrão no XP - você ainda pode ver bordas cinzas fracas quando o plano de fundo do contêiner estiver branco.

micahtan
fonte
1

Programaticamente, você pode fazer isso:

btn.BorderBrush = new SolidColorBrush(Colors.Transparent);
Ricardo
fonte
1
Eu não acho que isso possa ser útil, pois ele está procurando uma solução no lado da XAML
Mohamed Kamel Bouzekria 18/03/19
-1

Por que você não define os dois Background & BorderBrushda mesma formabrush

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