locked
WPF Button Border Thickness RRS feed

  • Question

  • There doesn't appear to be a border thinkness for the button. Can anyone point me in the right direction of a workaround. Bear in mind I'm pretty new to WPF!
    Chris
    Thursday, February 10, 2011 6:15 PM

Answers

  • Hi Fresno Bob,

    Thanks for the update.

    The BorderThickness property is not respected by the Button control's default template. So we will need to re-template the button control to change its border thickness.

    Button has a Template property which is a ControlTemplate. It defines the visual appearance of the Button. You can use this property to change the looks of a Button completely.

    Please see the following links to get started with templating.

    Styling and Templating - Control Templates

    Control Template

    WPF Control Templates - An Overview

     

    Here is a simple sample of a re-templated Button. You might also want to use Styling to apply this template to multiple Buttons.

     

      <Button BorderBrush="Red" BorderThickness="5" Content="Test">
      <Button.Template>
       <ControlTemplate TargetType="{x:Type Button}">
       <Border BorderThickness="{TemplateBinding BorderThickness}"
        Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        SnapsToDevicePixels="true">
        <ContentPresenter Margin="{TemplateBinding Padding}"
          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
          RecognizesAccessKey="True"
          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
       </Border>
       <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled"
         Value="false">
        <Setter Property="Foreground"
         Value="#ADADAD"/>
        </Trigger>
       </ControlTemplate.Triggers>
       </ControlTemplate>
      </Button.Template>
      </Button>
    

     

    Hope this helps.


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Fresno Bob Thursday, February 24, 2011 10:27 AM
    Tuesday, February 22, 2011 2:03 AM

All replies

  • Hello Frenso Bob

    You will want to create your own Button style to change the border thickness. Here is a link to get the default Button style. Within the control template you will see a border. You can change the BorderThickness of this Border to get the effect your looking for. Let me know if you have troubles applying the button style to a button in your application.

     - Jason
    Lead Developer, Mindscape WPF Elements

    • Marked as answer by Min Zhu Friday, February 18, 2011 3:41 AM
    • Unmarked as answer by Min Zhu Tuesday, February 22, 2011 2:06 AM
    Thursday, February 10, 2011 8:10 PM
  • Hi Fresno Bob,

    Just checking in to see if the information was helpful. Please let us know if you would like further assistance.

    Have a great day!


    Best regards,
    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, February 15, 2011 1:47 AM
  • I'll need to look at this in more detail. I don't quite get it.
    Chris
    Monday, February 21, 2011 10:52 AM
  • Hi Fresno Bob,

    Thanks for the update.

    The BorderThickness property is not respected by the Button control's default template. So we will need to re-template the button control to change its border thickness.

    Button has a Template property which is a ControlTemplate. It defines the visual appearance of the Button. You can use this property to change the looks of a Button completely.

    Please see the following links to get started with templating.

    Styling and Templating - Control Templates

    Control Template

    WPF Control Templates - An Overview

     

    Here is a simple sample of a re-templated Button. You might also want to use Styling to apply this template to multiple Buttons.

     

      <Button BorderBrush="Red" BorderThickness="5" Content="Test">
      <Button.Template>
       <ControlTemplate TargetType="{x:Type Button}">
       <Border BorderThickness="{TemplateBinding BorderThickness}"
        Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        SnapsToDevicePixels="true">
        <ContentPresenter Margin="{TemplateBinding Padding}"
          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
          RecognizesAccessKey="True"
          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
       </Border>
       <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled"
         Value="false">
        <Setter Property="Foreground"
         Value="#ADADAD"/>
        </Trigger>
       </ControlTemplate.Triggers>
       </ControlTemplate>
      </Button.Template>
      </Button>
    

     

    Hope this helps.


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Fresno Bob Thursday, February 24, 2011 10:27 AM
    Tuesday, February 22, 2011 2:03 AM
  • Hi Chris,

    Just checking in to see if the information was helpful. Please let us know if you would like further assistance.

    Have a great day!


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, February 24, 2011 5:13 AM
  • Hi Bob,

    Send your code to know where the problem is.


    PS.Shakeer Hussain
    Thursday, February 24, 2011 9:24 AM
  • Min answered my question. I successfully got it to work but eventually I ended buying Xceed's WPF Themes as it was cheaper than spending days figuring out how to style the other controls especially the dtaepicker. Cheers though I understand a little more about control templates. Very helpful as always.
    Chris
    Thursday, February 24, 2011 10:27 AM