Personal style on button

Question

I have a problem related to the style of a button. I want to remove the blue border after the click of the button.I tried some solutions found on the internet (here, or here) but I didn't find any solutions.

Here's an example of what I want to Remove:

I used this code to style my button:

 <Window.Resources>
    <Style TargetType="{x:Type Button}">
        <Setter Property="Background" Value="AliceBlue"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Margin" Value="10,308,0,0"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="Width" Value="200"/>
        <Setter Property="Height" Value="60"/>
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    </Style>
</Window.Resources>

Is that the focus rectangle? If so, it's state sensitive and you'll need to change all of the states. — Gayot Fow, Sep 24 '13 at 12:30
yes exactly it appear when i click the button, and it remains active :) How i can change the states? — Francesco, Sep 24 '13 at 12:32
I will try to add an answer, not enough room to make a comment — Gayot Fow, Sep 24 '13 at 12:34

Sid M · Answer 1 · 2013-09-24T13:07:15.113

0

Try this

  <Button Content="Text" Name="Button Name" 
                    Background="AliceBlue" 
                    VerticalAlignment="Top" 
                    BorderBrush="Transparent"
                    Margin="10,308,0,0"
                    HorizontalAlignment="Left"
                    Width="200"
                    Height="60"
                    FontSize="20"
                    FocusVisualStyle="{x:Null}">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                 <ContentPresenter Content="{TemplateBinding Content}"/>
            </ControlTemplate>
        </Button.Template>
    </Button>

edited Sep 24 '13 at 13:07

answered Sep 24 '13 at 12:32

Sid M

4,354
4
30
50

No it doesn't change. That blue rectangle appears only when i click the button, it isn't related to borders i guess. – Francesco Sep 24 '13 at 12:33
Made changes in the answer,try this...hope this works for you – Sid M Sep 24 '13 at 13:07

deafjeff · Answer 2 · 2013-09-24T14:46:32.253

add this to your style:

BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}

this makes it behave like a toolbutton and doesn't show the border after you clicked on it.

Edit:

I just found a very simple controltemplate example, where you apply a rectangle on a button type (wpf magic!). Set StrokeThickness to zero, which won't show any borders.

<Window x:Class="WPFControlTemplateSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/exp ression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="289" d:DesignWidth="574">
<Window.Resources>
    <ControlTemplate x:Key="SimpleButton" TargetType="Button">
        <Grid>
            <Rectangle Name="rect" 
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
                     Stroke="Black"
                     StrokeThickness="0"
                     Fill ="Green"/>
            <ContentPresenter HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              Content="{TemplateBinding Content}"/>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="Button.IsMouseOver" Value="True">
                <Setter TargetName="rect" Property="Stroke" Value="Red"/>
                <Setter TargetName="rect" Property="Fill" Value="Yellow"/>
            </Trigger>
            <Trigger Property="Button.IsPressed" Value="True">
                <Setter TargetName="rect" Property="Stroke" Value="Green"/>
                <Setter TargetName="rect" Property="Fill" Value="Blue"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Button Template="{StaticResource SimpleButton}" Grid.Column="0" Grid.Row="0">Button 1</Button>
    <Button Template="{StaticResource SimpleButton}" Grid.Column="1" Grid.Row="0">Button 2</Button>
</Grid>

but with this solution i have another problem how i can change the mouseover and mouseclick color of the button? — Francesco, Sep 24 '13 at 13:06

Maximus · Answer 3 · 2013-09-24T13:46:59.800

0

    <Style x:Key="button_style" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border>
                      <ContentPresenter Width="250" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

and for instance:

<Button Content = "my_content" Style="{StaticResource button_style}"/>

The blue border will vanish.

edited Sep 24 '13 at 13:46

answered Sep 24 '13 at 12:50

Maximus

3,458
3
16
27

if i use this way, it makes my button completly disappear. – Francesco Sep 24 '13 at 13:01
Sorry, Foreground was set to white and that's why it was invisible. Try now. – Maximus Sep 24 '13 at 13:40

Personal style on button

3 Answers3