web-dev-qa-db-ja.com

WPFのボタンの境界線を取り除きますか?

ボタンの境界線を削除してテキストのみを表示しようとしていますが、borderThicknessを0に設定し、borderbrushをtransparentに設定しても、テキストの周りに細い線が表示されます。 alt text

保存ボタンのxamlコード:

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

とにかくボタンの境界線を取り除くことができますか?

22
sanjeev40084

ボタンのControlTemplateをオーバーライドする必要があります。

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

私が最近これに最も役立つことがわかった方法は、ボタンにツールバーのスタイルを使用させることでした。これは、マウスオーバーでボタンの境界線のみを表示しながら、画像またはテキストのみを使用します。

<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
        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" />
12
Dan Asberry

ボタンの新しいテンプレートを作成する必要があります。

これを行う最も簡単な方法は、Expression Blendでプロジェクトを開き、ボタンを選択してから右クリックし、[テンプレートの編集]> [コピーの編集..]を選択することです。これにより、既存のテンプレートが変更可能なテンプレートにコピーされます。リソースディクショナリで作成すると簡単です。

次に、テンプレートを選択し、(UIの右側にある)[リソース]タブでButtonFocusVisualを選択します。 [プロパティ]タブを選択し、[その他]セクションを展開します。これには、BorderStyleフィールドとBorderThicknessフィールドがあります(とりわけ)。スタイルを「なし」に設定します。

2
ChrisF

テンプレートではこの問題は解決されません。唯一のアクションは、WPFコントロールを変更することです。解決策はここにあります:

ButtonChromeボーダーを削除する方法(ボーダーのテンプレートを定義する場合)?

1
samneric