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

Question 1

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.

Question 2

Spróbuj tego

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

Question 3

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}"/>

Question 4

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

Question 5

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>

Question 6

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>

Question 7

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.

Question 8

Programowo możesz to zrobić:

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

Question 9

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>

Answer 1

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.

wpf button transparency Steven Jeuris
źródło

1

alternatywna odpowiedź

Jake Berger

1

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

Josh Noe

Answer 2

1

alternatywna odpowiedź

Jake Berger

Answer 3

1

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

Josh Noe

Answer 4

260

Spróbuj tego

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

Szymon
źródło

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

Answer 5

1

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

Jonathan

Answer 6

10

Niestety wyłącza efekt ustawienia HorizontalContentAlignmentna Stretch.

Konrad Morawski

Answer 7

3

@ Cœur pytania określone WPF nie Silverlight

Simon

Answer 8

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

Answer 9

2

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

avenmore

Answer 10

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}"/>

Snehal
źródło

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

Answer 11

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

Answer 12

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

Answer 13

1

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

Felix

Answer 14

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

bbqchickenrobot

Answer 15

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

Contango

Answer 16

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

Alfred B. Thordarson
źródło

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

Answer 17

1

To działa i jest to bardzo fajny pomysł w niektórych przypadkach

ciekawość

Answer 18

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.

Answer 19

Aby usunąć tylko granicę, BorderThickness="0"wystarczy

marsz-wiggle

Answer 20

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>

Answer 21

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

Answer 22

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>

Answer 23

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.

Answer 24

1

Programowo możesz to zrobić:

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

Ricardo
źródło

1

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

Mohamed Kamel Bouzekria

Answer 25

1

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

Mohamed Kamel Bouzekria

Answer 26

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>

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

Odpowiedzi: