wpf에서 버튼 테두리를 어떻게 완전히 제거합니까?


129

Firefox 툴바 버튼처럼 마우스를 가져 가서 전체 버튼을 보려면 이미지가 있고 테두리가없는 버튼을 만들려고합니다.

BorderBrush에서 Transparent, BorderThickness으로 설정하고 0시도 BorderBrush="{x:Null}"했지만 버튼의 개요를 계속 볼 수 있습니다.


1
대체 답변
Jake Berger

1
WPF의 경계선없는 버튼? !!! 이것이 직관적 인 UI 프레임 워크라고 생각하십니까?
Josh Noe

답변:


258

이 시도

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

1
환상적인! 내가 찾은 다른 모든 솔루션은 매우 복잡하고 버튼의 모든 스타일을 재정의합니다.
Jonathan

10
불행히도로 설정하면 효과 HorizontalContentAlignment가 없습니다 Stretch.
Konrad Morawski

3
@ Cœur 질문에 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}"/>

다른 솔루션이 다른 사람들에게 왜 효과가 있는지 모르겠습니다. 이 솔루션은 ContentPresenter Border 행도 제거되어 작동 할 수있는 유일한 솔루션입니다! 잘 했어!
Nasenbaer

1
나는 여러 가지 다른 솔루션을 시도했지만 이것이 유일한 방법입니다. btw, 초보자의 경우 <style> </ style> 코드는 <Window> <Window.Resource> <Style>에서와 같이 xaml의 헤더에 있어야합니다.
Felix

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

왜 다른 사람들 이이 질문이 대답이 허용 된 질문과 중복된다고 지적하지 않았는지 모르겠습니다 .

여기 솔루션을 인용 : 당신은 오버라이드 (override) 할 필요가 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>

5
버튼 안에 내용을 넣지 않으면 클릭에 응답하지 않습니다. 해당 ContentPresenter를 투명한 배경으로 테두리에 배치하여 문제를 해결할 수 있습니다. 이렇게하면 어떤 크기의 공백 / 투명한 단추를 만들어 이미지 위에 놓을 수 있습니다.
bj0

3

다음과 같이 Button 대신 하이퍼 링크를 사용할 수 있습니다.

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

2

이미 툴바 안에 버튼을 넣는 것이 이러한 동작을 제공한다는 것을 알고 있을지 모르지만, 모든 현재 테마에서 어떤 종류의 예측 가능성으로 작동하는 것을 원한다면 새로운 ControlTemplate을 만들어야합니다.

Prashant의 솔루션은 단추에 포커스가있을 때 도구 모음에없는 단추와 작동하지 않습니다. XP의 기본 테마에서는 100 % 작동하지 않습니다. 컨테이너 배경이 흰색 일 때 희미한 회색 테두리를 볼 수 있습니다.


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>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.