Bagaimana Anda benar-benar menghapus batas tombol di WPF?

129

Saya mencoba membuat tombol yang memiliki gambar di dalamnya dan tanpa batas - sama seperti tombol bilah alat Firefox sebelum Anda mengarahkan kursor ke sana dan melihat tombol penuh.

Saya sudah mencoba mengatur BorderBrushto Transparent, BorderThicknessto 0, dan juga mencoba BorderBrush="{x:Null}", tetapi Anda masih dapat melihat garis besar tombol.

wpf button transparency

— Steven Jeuris
sumber

1

alt jawaban

— Jake Berger

1

Tombol tanpa batas di WPF? !!! Menurut Anda, apakah ini kerangka UI yang intuitif ??!

— Josh Noe

258

Coba ini

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

— Simon
sumber

1

Fantastis! Setiap solusi lain yang saya temukan sangat berbelit-belit dan melibatkan pengubahan semua gaya tombol.

— Jonathan

10

Sayangnya, ini menonaktifkan efek pengaturan HorizontalContentAlignmentke Stretch.

— Konrad Morawski

3

@Cœur pertanyaan yang ditentukan WPF bukan Silverlight

— Simon

10

Ini mengubah tombol saya menjadi tombol sakelar. Ketika saya mengklik tombol itu tetap dipilih sampai saya mengklik tombol lain. Bagaimana saya menghentikannya dari bertindak seperti itu?

— burnttoast11

2

Saya akan memperbaiki ini dua kali jika saya bisa. Menyelamatkan saya banyak kode untuk mendapatkan tampilan yang saya inginkan.

— lanjut

52

Anda mungkin harus mengubah templat tombol, ini akan memberi Anda tombol tanpa bingkai apa pun, tetapi juga tanpa efek pers atau dinonaktifkan:

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

Dan tombolnya:

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

— Snehal
sumber

Saya tidak tahu mengapa solusi lain tampaknya berhasil pada orang lain. Solusi ini adalah satu-satunya yang dapat bekerja karena garis Perbatasan ContentPresenter juga dihapus! Kerja bagus!

— Nasenbaer

1

Saya mencoba beberapa solusi lain, ini satu-satunya yang berfungsi. btw, untuk pemula, kode <style> </style> harus berada di header xaml Anda seperti di <Window><Window.Resource> <Style> ....

— Felix

1

juga, ada kesalahan ketik dalam jawabannya: <Button Style="{StaticResource TransparentButton}"/>harus<Button Style="{StaticResource TransparentStyle}"/>

— Felix

Bekerja untuk saya juga, solusi bagus!

— bbqchickenrobot

Bekerja untuk saya, solusi fantastis!

— Contango

23

Yang harus Anda lakukan adalah sesuatu seperti ini:

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

Semoga ini yang kamu cari.

Sunting: Maaf, lupa menyebutkan bahwa jika Anda ingin melihat batas tombol ketika Anda mengarahkan kursor ke gambar, yang harus Anda lakukan adalah melewati Padding = "- 4" .

— Alfred B. Thordarson
sumber

1

Ini berhasil, dan ini adalah ide yang sangat bagus dalam beberapa kasus

— keingintahuan

Ini berfungsi dengan baik ketika Anda ingin meregangkan gambar di dalam tombol. Menghapus padding memungkinkan gambar menempati dimensi tombol penuh.

— visc

23

Saya tidak tahu mengapa orang lain tidak menunjukkan bahwa pertanyaan ini digandakan dengan yang ini dengan jawaban yang diterima .

Saya mengutip disini solusinya: Anda harus menimpa ControlTemplatedari 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
sumber

5

Jika Anda tidak memasukkan konten apa pun di dalam tombol, itu tidak akan menanggapi klik. Anda dapat memperbaikinya dengan membungkus ContentPresenter itu dalam Perbatasan dengan latar belakang transparan. Dengan begitu Anda dapat membuat tombol kosong / transparan dengan ukuran berapa pun untuk diletakkan di atas gambar.

— bj0

3

Anda dapat menggunakan Hyperlink alih-alih Button, seperti ini:

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

— Сергей Гусев
sumber

2

Anda mungkin sudah tahu bahwa menempatkan Tombol Anda di dalam ToolBar memberi Anda perilaku ini, tetapi jika Anda menginginkan sesuatu yang akan bekerja di SEMUA tema saat ini dengan segala jenis prediktabilitas, Anda harus membuat ControlTemplate baru.

Solusi Prashant tidak berfungsi dengan Button yang tidak ada di toolbar ketika Button memiliki fokus. Ini juga tidak berfungsi 100% dengan tema default di XP - Anda masih bisa melihat batas abu-abu pudar saat Background container Anda berwarna putih.

— micahtan
sumber

1

Secara terprogram, Anda dapat melakukan ini:

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

— Ricardo
sumber

1

Saya tidak berpikir bahwa ini mungkin berguna, karena ia mencari solusi di sisi XAML

— Mohamed Kamel Bouzekria

-1

Mengapa Anda tidak mengatur keduanya Background & BorderBrushsecara samabrush

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