Comment supprimer complètement la bordure du bouton dans wpf?


129

J'essaie de créer un bouton qui contient une image et aucune bordure - tout comme les boutons de la barre d'outils Firefox avant de les survoler et de voir le bouton complet.

J'ai essayé de définir le BorderBrushto Transparent, BorderThicknessto 0, et j'ai également essayé BorderBrush="{x:Null}", mais vous pouvez toujours voir le contour du bouton.



1
Un bouton sans bordure dans WPF? !!! Que pensez-vous que c'est, un cadre d'interface utilisateur intuitif ??!
Josh Noe

Réponses:


258

Essaye ça

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

1
Fantastique! Toutes les autres solutions que j'ai trouvées sont extrêmement compliquées et impliquent de remplacer tout le style du bouton.
Jonathan

10
Malheureusement, cela désactive l'effet du réglage HorizontalContentAlignmentsur Stretch.
Konrad Morawski

3
@ Cœur les questions spécifiées WPF pas Silverlight
Simon

10
Cela transforme mon bouton en bouton bascule. Lorsque je clique sur le bouton, il reste sélectionné jusqu'à ce que je clique sur un autre bouton. Comment pourrais-je l'empêcher d'agir ainsi?
burnttoast11

2
Je voterais deux fois si je pouvais. M'a sauvé beaucoup de code pour obtenir le look que je veux.
avenmore le

52

Vous devrez peut-être changer le modèle de bouton, cela vous donnera un bouton sans cadre, mais aussi sans aucune pression ou effet désactivé:

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

Et le bouton:

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

Je ne sais pas pourquoi d'autres solutions semblent fonctionner chez d'autres personnes. Cette solution est la seule qui puisse fonctionner car la ligne ContentPresenter Border est également supprimée! Bon travail!
Nasenbaer

1
J'ai essayé plusieurs autres solutions, c'est la seule qui fonctionne. btw, pour les débutants, le code <style> </style> devrait être dans l'en-tête de votre xaml comme dans <Window><Window.Resource> <Style> ....
Felix

1
aussi, il y a une faute de frappe dans la réponse: <Button Style="{StaticResource TransparentButton}"/>devrait être<Button Style="{StaticResource TransparentStyle}"/>
Felix

A travaillé pour moi aussi, excellente solution!
bbqchickenrobot

A travaillé pour moi, solution fantastique!
Contango

23

Ce que vous devez faire est quelque chose comme ceci:

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

J'espère que c'est ce que vous cherchiez.

Edit: Désolé, j'ai oublié de mentionner que si vous voulez voir la bordure du bouton lorsque vous survolez l'image, tout ce que vous avez à faire est de sauter le Padding = "- 4" .


1
Cela fonctionne, et c'est une très bonne idée dans certains cas
curiosité

Cela fonctionne parfaitement lorsque vous souhaitez étirer une image à l'intérieur d'un bouton. La suppression du remplissage permet à l'image d'occuper toutes les dimensions du bouton.
visc

23

Je ne sais pas pourquoi d'autres n'ont pas souligné que cette question est dupliquée avec celle-ci avec une réponse acceptée .

Je cite ici la solution: Vous devez remplacer le 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>

5
Si vous ne mettez aucun contenu à l'intérieur du bouton, il ne répondra pas aux clics. Vous pouvez résoudre ce problème en enveloppant ce ContentPresenter dans une bordure avec un arrière-plan transparent. De cette façon, vous pouvez créer un bouton vierge / transparent de n'importe quelle taille à placer sur une image.
bj0

3

Vous pouvez utiliser Hyperlink au lieu de Button, comme ceci:

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

2

Vous savez peut-être déjà que placer votre Button à l'intérieur d'une ToolBar vous donne ce comportement, mais si vous voulez quelque chose qui fonctionnera sur TOUS les thèmes actuels avec une sorte de prévisibilité, vous devrez créer un nouveau ControlTemplate.

La solution de Prashant ne fonctionne pas avec un bouton qui ne se trouve pas dans une barre d'outils lorsque le bouton a le focus. Cela ne fonctionne pas non plus à 100% avec le thème par défaut dans XP - vous pouvez toujours voir des bordures grises pâles lorsque l'arrière-plan de votre conteneur est blanc.


1

Par programme, vous pouvez le faire:

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

1
Je ne pense pas que cela puisse être utile, car il cherche une solution du côté XAML
Mohamed Kamel Bouzekria

-1

Pourquoi ne définissez-vous pas les deux Background & BorderBrushpar le mêmebrush

 <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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.