Strange border still resding on button; even after modifying the control template

Question

I have a 'feedback' button which has this strange border:

So I searched online for some solutions and modified the control template, and I got this:

Control Template code:

<Button.Template>
   <ControlTemplate TargetType="Button">
      <ContentPresenter Content="{TemplateBinding Content}" />
   </ControlTemplate>
</Button.Template>

So even after modifying the control template - I am getting a strange brown border. Help would be appreciated regarding this.

Button code:

<Button Grid.Row="3"
        Grid.Column="2"
        Grid.RowSpan="2"
        Style="{StaticResource IconStyleBase}"
        Name="Feedback_Button">
   <Button.Template>
      <ControlTemplate TargetType="Button">
         <ContentPresenter Content="{TemplateBinding Content}" />
      </ControlTemplate>
   </Button.Template>

   <Grid>
      <Grid.RowDefinitions>
         <RowDefinition Height="218*" />
         <RowDefinition Height="68*" />
      </Grid.RowDefinitions>

      <!--Icon-->
      <Button Background="#3767B0"
                                    Style="{StaticResource IconStyleContent}">

         <!--Content-->
         <Button.ContentTemplate>
            <DataTemplate>
               <Viewbox>
                  <TextBlock Padding="55">&#xE90A;</TextBlock>
               </Viewbox>
            </DataTemplate>
         </Button.ContentTemplate>
      </Button>

      <!--Icon Text-->
      <Button Background="#FF2D5BA0"
                                    Style="{StaticResource IconStyleSubBase}">
         <!--Content-->
         <Button.ContentTemplate>
            <DataTemplate>
               <Viewbox>
                  <TextBlock Padding="15">Feedback</TextBlock>
               </Viewbox>
            </DataTemplate>
         </Button.ContentTemplate>
      </Button>
   </Grid>

</Button>

Your inner buttons have a `ContentTemplate`/`DataTemplate`. The border probably belongs to the inner buttons instead of the outer button where you use `ControlTemplate` — grek40, Aug 19 '20 at 06:51
A button containing two more buttons (as a result, three buttons instead of one) is not a good solution. — EldHasp, Aug 19 '20 at 08:05

thatguy · Accepted Answer · 2020-08-19T08:24:52.647

A DataTemplate defines the appearance of the the items that you set as Content of a button, but the button itself as a container has a default style and control template that defines how it looks like, along with its different states like mouse-over or pressed. That is where the border comes from.

You can try to create a style that sets the BorderThickness to 0 and apply it on each of your buttons. This approach works for control templates that bind the border thickness from their templated parent.

<Style x:Key="BorderlessButtonStyle"  TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
   <Setter Property="BorderThickness" Value="0"/>
</Style>

If this does not work or you want adapt the appearance of your buttons in detail, you have to extract and adapt the button style and control template.

Your custom control template does not work, because you did not apply it to the inner buttons and you should remove Content="{TemplateBinding Content}". Nevertheless, your button control template does not define any control states, so it will not be responsive at all.

You should copy the control template for Button from here, or extract it manually via Blend or Visual Studio. Then you can remove or the Border within it, change its thickness or color, so it will disappear. Moreover, you can adapt its various states to fit your desired style.

A notice on your design. It do not think that it is a good idea to nest buttons. Your control should either be a single button or a panel with two buttons in it, but that also only makes sense if they execute different actions in a related context, like split buttons do.

Strange border still resding on button; even after modifying the control template

1 Answers1