Как полностью убрать границу кнопки в wpf?


129

Я пытаюсь создать кнопку с изображением и без рамки - точно так же, как кнопки панели инструментов Firefox, прежде чем вы наведете на них курсор и увидите кнопку полностью.

Я попытался установить BorderBrushдо Transparent, BorderThicknessк 0, а также пытались BorderBrush="{x:Null}", но вы все еще можете увидеть контур кнопки.


1
альтернативный ответ
— Джейк Бергер

1
Кнопка без полей в WPF? !!! Как вы думаете, что это за интуитивно понятный UI-фреймворк ??!
— Джош Ноэ

Ответы:


259

Попробуй это

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

1
Фантастика! Любое другое решение, которое я нашел, чрезвычайно запутано и включает в себя переопределение всего стиля кнопки.
— Джонатан

10
К сожалению, это отключает эффект установки HorizontalContentAlignmentна Stretch.
— Конрад Моравски

3
@ Cœur в вопросах указан WPF, а не Silverlight
— Саймон

10
Это превращает мою кнопку в переключатель. Когда я нажимаю кнопку, она остается выбранной, пока я не нажму другую кнопку. Как я могу заставить его так себя вести?
— burnttoast11

2
Если бы я мог, я бы проголосовал за это дважды. Мне удалось сэкономить много кода, чтобы получить желаемый вид.
— avenmore

53

Возможно, вам придется изменить шаблон кнопки, это даст вам кнопку без рамки, но также без какого-либо нажатия или отключенного эффекта:

    <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
Я пробовал несколько других решений, это единственный работает. кстати, для новичков код <style> </style> должен быть в заголовке вашего xaml, как в <Window><Window.Resource> <Style> ....
— Феликс

1
также в ответе есть опечатка: <Button Style="{StaticResource TransparentButton}"/>должно быть<Button Style="{StaticResource TransparentStyle}"/>
— Felix

У меня тоже сработало, отличное решение!
— bbqchickenrobot

Сработало для меня, фантастическое решение!
— Contango

23

Что вам нужно сделать, это примерно так:

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

Надеюсь, это то, что вы искали.

Изменить: извините, забыл упомянуть, что если вы хотите видеть границу кнопки при наведении курсора на изображение, все, что вам нужно сделать, это пропустить Padding = "- 4" .


1
Это работает, и в некоторых случаях это очень хорошая идея
— любопытство

Это отлично работает, когда вы хотите растянуть изображение внутри кнопки. Удаление отступа позволяет изображению занимать все размеры кнопки.
— visc 02

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 08

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 не работает с кнопкой не на панели инструментов, когда кнопка находится в фокусе. Он также не работает на 100% с темой по умолчанию в XP - вы все еще можете видеть слабые серые границы, когда ваш контейнер Background белый.



-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>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.