Jak całkowicie usunąć obramowanie przycisków w wpf?


130

Próbuję utworzyć przycisk, który ma obraz i nie ma obramowania - tak jak przyciski paska narzędzi Firefoksa, zanim najedziesz na nie kursorem i zobaczysz pełny przycisk.

Próbowałem ustawić BorderBrushto Transparent, BorderThicknessto 0, a także próbowałem BorderBrush="{x:Null}", ale nadal możesz zobaczyć kontur przycisku.


1
alternatywna odpowiedź
— Jake Berger

1
Przycisk bez obramowania w WPF? !!! Jak myślisz, co to jest, intuicyjna struktura interfejsu użytkownika?
— Josh Noe

Odpowiedzi:


260

Spróbuj tego

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

1
Fantastyczny! Każde inne rozwiązanie, które znalazłem, jest niezwykle zawiłe i polega na nadpisaniu całej stylizacji przycisku.
— Jonathan

10
Niestety wyłącza efekt ustawienia HorizontalContentAlignmentna Stretch.
— Konrad Morawski

3
@ Cœur pytania określone WPF nie Silverlight
— Simon

11
To zmienia mój przycisk w przycisk przełączania. Kiedy klikam przycisk, pozostaje on zaznaczony, dopóki nie kliknę innego przycisku. Jak miałbym to powstrzymać od takiego zachowania?
— spalony toast 11

2
Głosowałbym za tym dwukrotnie, gdybym mógł. Zapisano mi dużo kodu, aby uzyskać pożądany wygląd.
— avenmore

53

Być może będziesz musiał zmienić szablon przycisku, dzięki temu otrzymasz przycisk bez ramki, ale także bez żadnego efektu naciśnięcia lub wyłączenia:

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

I przycisk:

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

Nie wiem, dlaczego inne rozwiązania wydają się działać na innych ludzi. To jedyne rozwiązanie może działać, ponieważ linia ContentPresenter Border również została usunięta! Dobra robota!
— Nasenbaer

1
Wypróbowałem kilka innych rozwiązań, tylko to działa. btw, dla początkujących, kod <style> </style> powinien znajdować się w nagłówku twojego xaml, jak w <Window><Window.Resource> <Style> ....
— Felix

1
również w odpowiedzi jest literówka: <Button Style="{StaticResource TransparentButton}"/>powinno być<Button Style="{StaticResource TransparentStyle}"/>
— Felix

U mnie też się sprawdziło, świetne rozwiązanie!
— bbqchickenrobot

U mnie zadziałało, fantastyczne rozwiązanie!
— Contango

24

Musisz zrobić coś takiego:

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

Mam nadzieję, że właśnie tego szukałeś.

Edycja: Przepraszamy, zapomniałem wspomnieć, że jeśli chcesz zobaczyć ramkę przycisku po najechaniu kursorem na obraz, wszystko, co musisz zrobić, to pominąć Padding = "- 4" .


1
To działa i jest to bardzo fajny pomysł w niektórych przypadkach
— ciekawość

Działa to doskonale, gdy chcesz rozciągnąć obraz wewnątrz przycisku. Usunięcie wypełnienia sprawi, że obraz będzie zajmował pełne wymiary przycisku.
— wisk.

Aby usunąć tylko granicę, BorderThickness="0"wystarczy
— marsz-wiggle

23

Nie wiem, dlaczego inni nie wskazali, że to pytanie jest powtórzone z tym z akceptowaną odpowiedzią .

Cytuję tutaj rozwiązanie: Musisz nadpisać ControlTemplatez 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
Jeśli nie umieścisz żadnej treści wewnątrz przycisku, nie będzie on reagował na kliknięcia. Możesz to naprawić, zawijając ten ContentPresenter w ramkę z przezroczystym tłem. W ten sposób możesz utworzyć pusty / przezroczysty przycisk o dowolnym rozmiarze, który będzie można umieścić nad obrazem.
— bj0

3

Możesz użyć hiperłącza zamiast przycisku, na przykład:

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

2

Być może już wiesz, że umieszczenie przycisku wewnątrz paska narzędzi zapewnia takie zachowanie, ale jeśli chcesz, aby coś działało we WSZYSTKICH aktualnych motywach z jakąkolwiek przewidywalnością, musisz utworzyć nowy ControlTemplate.

Rozwiązanie Prashanta nie działa z przyciskiem nie znajdującym się na pasku narzędzi, gdy przycisk ma fokus. Nie działa również w 100% z domyślnym motywem w XP - nadal możesz zobaczyć słabe szare ramki, gdy tło kontenera jest białe.


1

Programowo możesz to zrobić:

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

1
Nie sądzę, żeby to się przydało, bo szuka rozwiązania po stronie XAML
— Mohamed Kamel Bouzekria

-2

Dlaczego nie ustawisz obu tak Background & BorderBrushsamobrush

 <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>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.