คุณจะลบขอบปุ่มใน wpf ได้อย่างไร?

129

ฉันกำลังพยายามสร้างปุ่มที่มีรูปภาพอยู่และไม่มีเส้นขอบเช่นเดียวกับปุ่มแถบเครื่องมือ Firefox ก่อนที่คุณจะวางเมาส์เหนือปุ่มเหล่านั้นและเห็นปุ่มเต็ม

ฉันได้พยายามตั้งค่าBorderBrushไปTransparent, BorderThicknessไป0และยังพยายามBorderBrush="{x:Null}"แต่คุณยังสามารถมองเห็นเค้าร่างของปุ่ม

wpf button transparency

— Steven Jeuris
แหล่งที่มา

1

alt answer

— Jake Berger

1

ปุ่มไร้ขอบใน WPF? !!! คุณคิดว่านี่คืออะไรกรอบ UI ที่ใช้งานง่าย ??!

— Josh Noe

258

ลองทำตามนี้

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

— ไซมอน
แหล่งที่มา

1

Fantastic! วิธีแก้ปัญหาอื่น ๆ ที่ฉันพบนั้นซับซ้อนมากและเกี่ยวข้องกับการลบล้างรูปแบบทั้งหมดของปุ่ม

— Jonathan

10

แต่น่าเสียดายที่มันปิดการใช้งานผลของการตั้งค่าไปHorizontalContentAlignment Stretch

— Konrad Morawski

3

@ ตอบคำถามที่ระบุ WPF ไม่ใช่ Silverlight

— Simon

10

นี่เป็นการเปลี่ยนปุ่มของฉันให้เป็นปุ่มสลับ เมื่อฉันคลิกปุ่มมันจะยังคงเลือกอยู่จนกว่าฉันจะคลิกปุ่มอื่น ฉันจะหยุดไม่ให้แสดงแบบนั้นได้อย่างไร

— burnttoast11

2

ฉันจะโหวตสองครั้งถ้าทำได้ ช่วยฉันประหยัดรหัสจำนวนมากเพื่อให้ได้รูปลักษณ์ที่ฉันต้องการ

— avenmore

52

คุณอาจต้องเปลี่ยนเทมเพลตปุ่มซึ่งจะทำให้คุณมีปุ่มที่ไม่มีกรอบเหมือนเดิม แต่ยังไม่มีเอฟเฟกต์การกดหรือปิดใช้งาน:

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

และปุ่ม:

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

— Snehal
แหล่งที่มา

ฉันไม่รู้ว่าทำไมวิธีแก้ปัญหาอื่น ๆ ถึงได้ผลกับคนอื่น โซลูชันนี้เป็นโซลูชันเดียวที่สามารถทำงานได้เนื่องจากเส้น ContentPresenter Border ถูกลบออกไปด้วย การทำงานที่ดี!

— Nasenbaer

1

ฉันลองวิธีแก้ปัญหาอื่น ๆ หลายวิธีนี่เป็นวิธีเดียวที่ใช้ได้ผล btw สำหรับมือใหม่โค้ด <style> </style> ควรอยู่ในส่วนหัวของ xaml เช่นใน <หน้าต่าง ><Window.Resource> <Style> ....

— เฟลิกซ์

1

นอกจากนี้ยังมีคำตอบที่พิมพ์ผิด: <Button Style="{StaticResource TransparentButton}"/>ควรจะเป็น<Button Style="{StaticResource TransparentStyle}"/>

— เฟลิกซ์

ทำงานให้ฉันเช่นกันทางออกที่ดี!

— bbqchickenrobot

ทำงานให้ฉันทางออกที่ยอดเยี่ยม!

— Contango

23

สิ่งที่คุณต้องทำมีดังนี้:

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

หวังว่านี่คือสิ่งที่คุณกำลังมองหา

แก้ไข:ขออภัยลืมบอกไปว่าถ้าคุณต้องการที่จะเห็นปุ่มพรมแดนเมื่อคุณวางเมาส์เหนือภาพทั้งหมดที่คุณต้องทำคือการข้ามPadding = "- 4"

— อัลเฟรดบี ธ อร์ดาร์สัน
แหล่งที่มา

1

สิ่งนี้ได้ผลและนี่เป็นความคิดที่ดีมากในบางกรณี

— อยากรู้อยากเห็น

วิธีนี้ใช้งานได้ดีเมื่อคุณต้องการยืดภาพภายในปุ่ม การถอดช่องว่างภายในออกทำให้รูปภาพมีขนาดเต็มปุ่ม

— visc

23

ฉันไม่รู้ว่าทำไมคนอื่นถึงไม่ชี้ให้เห็นว่าคำถามนี้ซ้ำกับคำถามนี้พร้อมคำตอบที่ยอมรับได้

ฉันพูดที่นี่วิธีแก้ปัญหา: คุณต้องแทนที่ControlTemplateของ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
แหล่งที่มา

5

หากคุณไม่ใส่เนื้อหาใด ๆ ภายในปุ่มมันจะไม่ตอบสนองต่อการคลิก คุณสามารถแก้ไขได้โดยการรวม ContentPresenter นั้นไว้ใน Border ด้วยพื้นหลังโปร่งใส ด้วยวิธีนี้คุณสามารถสร้างปุ่มว่าง / โปร่งใสขนาดใดก็ได้เพื่อวางบนรูปภาพ

— bj0

3

คุณสามารถใช้ไฮเปอร์ลิงก์แทนปุ่มได้ดังนี้:

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

— СергейГусев
แหล่งที่มา

2

คุณอาจรู้อยู่แล้วว่าการวางปุ่มของคุณไว้ใน ToolBar ทำให้คุณมีพฤติกรรมเช่นนี้ แต่ถ้าคุณต้องการบางสิ่งที่ใช้ได้กับธีมปัจจุบันทั้งหมดที่มีความสามารถในการคาดเดาประเภทใดก็ได้คุณจะต้องสร้าง ControlTemplate ใหม่

โซลูชันของ Prashant ไม่ทำงานกับปุ่มที่ไม่อยู่ในแถบเครื่องมือเมื่อปุ่มมีโฟกัส นอกจากนี้ยังใช้ไม่ได้ 100% กับธีมเริ่มต้นใน XP คุณยังสามารถเห็นเส้นขอบสีเทาจาง ๆ เมื่อพื้นหลังคอนเทนเนอร์ของคุณเป็นสีขาว

— micahtan
แหล่งที่มา

1

โดยทางโปรแกรมคุณสามารถทำได้:

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

— ริคาร์โด้
แหล่งที่มา

1

ฉันไม่คิดว่าสิ่งนี้อาจมีประโยชน์เนื่องจากเขากำลังมองหาวิธีแก้ปัญหาในฝั่ง XAML

— Mohamed Kamel Bouzekria

-1

ทำไมคุณไม่ตั้งค่าทั้งสองอย่างBackground & BorderBrushเหมือนกันbrush

 <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
แหล่งที่มา