Как полностью убрать границу кнопки в 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.