Wpf'de düğme kenarlığını nasıl tamamen kaldırırsınız?

129

İçinde resim bulunan ve kenarlığı olmayan bir düğme oluşturmaya çalışıyorum - tıpkı siz üzerlerine gelip tam düğmeyi görmeden önce Firefox araç çubuğu düğmeleri gibi.

Ben ayarlama denedim BorderBrushetmek Transparent, BorderThicknessiçin 0, hem de denedim BorderBrush="{x:Null}", ama yine de düğmeye hatlarını görebilirsiniz.

wpf button transparency

— Steven Jeuris
kaynak

1

alt cevap

— Jake Berger

1

WPF'de kenarlıksız bir düğme? !!! Bunun ne olduğunu düşünüyorsunuz, sezgisel bir UI çerçevesi ??!

— Josh Noe

258

Bunu dene

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

— Simon
kaynak

1

Fantastik! Bulduğum diğer her çözüm son derece kıvrımlı ve düğmenin tüm stilini geçersiz kılmayı içeriyor.

— Jonathan

10

Ne yazık ki, ayar etkisini devre dışı bırakır HorizontalContentAlignmentiçin Stretch.

— Konrad Morawski

3

@ Cœur belirtilen sorular WPF değil Silverlight

— Simon

10

Bu, düğmemi bir geçiş düğmesine dönüştürüyor. Düğmeye tıkladığımda, başka bir düğmeye tıklayana kadar seçili kalıyor. Böyle davranmasını nasıl durdurabilirim?

— burnttoast11

2

Yapabilseydim bunu iki kez yükseltirdim. İstediğim görünümü elde etmem için bana çok fazla kod kazandırdı.

— avenmore

52

Düğme şablonunu değiştirmeniz gerekebilir, bu size herhangi bir çerçeveye sahip olmayan, ancak aynı zamanda herhangi bir basma veya devre dışı bırakma efekti olmayan bir düğme verecektir:

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

Ve düğme:

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

— Snehal
kaynak

Diğer çözümlerin neden diğer insanlarda işe yaradığını bilmiyorum. Bu çözüm işe yarayabilecek tek çözümdür çünkü ContentPresenter Sınır çizgisi de kaldırılmıştır! İyi iş!

— Nasenbaer

1

Birkaç başka çözüm denedim, bu işe yarayan tek şey. btw, yeni başlayanlar için <style> </style> kodu, <Window><Window.Resource> <Style> ....

— Felix

1

cevapta da bir yazım hatası var: <Button Style="{StaticResource TransparentButton}"/>olmalı<Button Style="{StaticResource TransparentStyle}"/>

— Felix

Benim için de çalıştı, harika bir çözüm!

— bbqchickenrobot

Benim için çalıştı, harika bir çözüm!

— Contango

23

Yapmanız gereken şey şuna benzer:

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

Umarım aradığın budur.

Düzenleme: Üzgünüz, imleci görüntünün üzerine getirdiğinizde düğme kenarlığını görmek istiyorsanız, tek yapmanız gereken Padding = "- 4" 'ü atlamak olduğunu söylemeyi unuttum .

— Alfred B. Thordarson
kaynak

1

Bu işe yarıyor ve bu bazı durumlarda çok güzel bir fikir

— merak

Bu, bir düğmenin içindeki bir görüntüyü uzatmak istediğinizde mükemmel çalışır. Dolgunun kaldırılması, görüntünün tam düğme boyutlarını işgal etmesini sağlar.

— visc

23

Başkalarının neden bu sorunun kabul edilen cevapla bu soru ile çoğaltıldığını belirtmediğini bilmiyorum .

Burada çözüm alıntı: Sen geçersiz kılmak gerekir ControlTemplateait 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
kaynak

5

Düğmenin içine herhangi bir içerik koymazsanız, tıklamalara yanıt vermeyecektir. Bunu, ContentPresenter'ı şeffaf bir arka planla bir Kenarlığa sararak düzeltebilirsiniz. Bu şekilde, bir görüntünün üzerine yerleştirmek için herhangi bir boyutta boş / şeffaf bir düğme yapabilirsiniz.

— bj0

3

Düğme yerine Köprü kullanabilirsiniz, örneğin:

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

— Kuyu Duyuları Гусев
kaynak

2

Düğmenizi bir Araç Çubuğunun içine koymanın size bu davranışı verdiğini zaten biliyor olabilirsiniz, ancak tüm mevcut temalarda herhangi bir öngörülebilirlikle çalışacak bir şey istiyorsanız, yeni bir Kontrol Şablonu oluşturmanız gerekir.

Prashant'ın çözümü, Button odaklandığında araç çubuğunda olmayan bir Düğme ile çalışmaz. Ayrıca, XP'deki varsayılan temayla% 100 çalışmaz - kapsayıcı Arka Planınız beyaz olduğunda soluk gri kenarlıklar görmeye devam edebilirsiniz.

— micahtan
kaynak

1

Programlı olarak şunu yapabilirsiniz:

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

— Ricardo
kaynak

1

XAML tarafında bir çözüm aradığı için bunun yararlı olabileceğini düşünmüyorum

— Mohamed Kamel Bouzekria

-1

Neden ikisini de Background & BorderBrushaynı şekilde ayarlamıyorsunbrush

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