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

129

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

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

wpf button transparency Стивен Джеурис
источник
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}"/>
Snehal
источник
Я не знаю, почему другие решения работают на других людей. Это единственное решение, которое может работать, потому что линия 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>
Nam G VU
источник
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 белый.

micahtan
источник
1

Программно вы можете сделать это:

btn.BorderBrush = new SolidColorBrush(Colors.Transparent);
Рикардо
источник
1
Я не думаю, что это может быть полезно, так как он ищет решение на стороне XAML,
Мохамед Камель Бузекрия
-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>
Moumit
источник