wpfでボタンの境界線を完全に削除するにはどうすればよいですか?


129

画像があり、枠線のないボタンを作成しようとしています。Firefoxのツールバーのボタンにカーソルを合わせて完全なボタンを表示する前と同じです。

BorderBrushto TransparentBorderThicknessto 0、およびを設定してみましたが、BorderBrush="{x:Null}"まだボタンの概要を確認できます。


1
代替回答
Jake Berger

1
WPFのボーダレスボタン?!!! これは直感的なUIフレームワークだと思いますか?!
Josh Noe 2016

回答:


258

これを試して

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

1
素晴らしい!私が見つけた他のすべてのソリューションは非常に複雑であり、ボタンのすべてのスタイルをオーバーライドすることを含みます。
ジョナサン

10
残念ながら、これはに設定HorizontalContentAlignmentした効果を無効にしますStretch
Konrad Morawski、2011年

3
@Cœur質問はSilverlightではなくWPFを指定しました
Simon

10
これは私のボタンをトグルボタンに変えています。ボタンをクリックすると、別のボタンをクリックするまで選択されたままになります。そのように振る舞わないようにするにはどうすればよいですか?
burnttoast11 14年

2
できれば2回賛成します。見栄えをよくするために多くのコードを保存しました。
アベンモア2014

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 2013

1
私はいくつかの他の解決策を試しましたが、これが唯一の作品です。ところで、初心者のために、<スタイル> </スタイル>のコードは、<ウインドウ> <Window.Resource> <スタイル> ....のようにあなたのXAMLのヘッダーにする必要があります
フェリックス

1
また、その答えにタイプミスがあります:<Button Style="{StaticResource TransparentButton}"/>する必要があります<Button Style="{StaticResource TransparentStyle}"/>
フェリックス

私のためにも働いた、素晴らしい解決策!
bbqchickenrobot 2014

私のために働いた、素晴らしい解決策!
コンタンゴ

23

あなたがしなければならないことは次のようなものです:

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

これがあなたが探していたものであることを願っています。

編集:申し訳ありませんが、画像にカーソルを合わせたときにボタンの境界線を表示したい場合は、Padding = "-4"をスキップするだけです。


1
これは機能し、場合によってはこれは非常に優れたアイデアです
好奇心が強い2015年

これは、ボタン内の画像を引き延ばしたいときに完璧に機能します。パディングを削除すると、画像がボタン全体を占めるようになります。
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>

5
ボタン内にコンテンツを配置しないと、クリックに反応しません。そのContentPresenterを背景が透明なBorderでラップすることで修正できます。これにより、任意のサイズの空白/透明なボタンを作成して画像の上に配置できます。
bj0 2013年

3

次のように、ボタンの代わりにハイパーリンクを使用できます。

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

2

ButtonをToolBar内に配置するとこの動作が得られることはすでにご存じかもしれませんが、あらゆる予測可能性を備えた現在のすべてのテーマで機能するものが必要な場合は、新しい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.