0

I have a custom made User control with a button within it. I have various XAMLs using this control, but in one of the XAMLs I would like to have the button have an image on it. This works well, but I cannot seem to get the border of the button to disappear. I am able to set the background color, border thickness, and various other properties but no matter what I do I can't get rid of the border. I've looked at various SO topics on how to use styles to override the template but that doesn't seem to help me either. Below is the last piece of snippet that I tried to no avail.

<Style TargetType="{x:Type CustomButton}" x:Key="btnnoborder">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CustomButton}">
                <Border Background="Transparent">
                    <ContentPresenter/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

EDIT

I've attached small images of what I see when I test out any of these snippets

Default image (Usual button)

Viktor La Croix (Button after using Viktor La Croix's XAML)

Seb
  • 3,414
  • 10
  • 73
  • 106
  • Maybe this helps: http://stackoverflow.com/questions/2064185/wpf-flat-button – Florian Gl Nov 26 '12 at 14:57
  • Tried that to no avail and even tried the one liner that one of the comments linked to. That just threw an exception. – Seb Nov 26 '12 at 15:03
  • In the above XAML, set the `BorderBrush` Property of the `Border` to `Transparent`, and the `BorderThickness` Property to `0` – XamlZealot Nov 26 '12 at 15:21
  • So after using my style border is gone? It's really odd. Only thing you need to do next is play with ContentPresenter's properties. Easiest... delete all of them and image is good. – Kapitán Mlíko Nov 26 '12 at 16:14

2 Answers2

1

I wasn't going to answer this, but did you run it? Are you sure it's not only in designtime? I used your style and it works fine. No border at runtime. At designtime I see border of button itself and image within that button.

enter image description here

My custom style:

    <UserControl.Resources>
    <Style x:Key="ButtonStyle2" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Rectangle/>
                        <ContentPresenter HorizontalAlignment="Left" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="11,7,0,9"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsFocused" Value="True"/>
                        <Trigger Property="IsDefaulted" Value="True"/>
                        <Trigger Property="IsMouseOver" Value="True"/>
                        <Trigger Property="IsPressed" Value="True"/>
                        <Trigger Property="IsEnabled" Value="False"/>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

    <Button Style="{StaticResource ButtonStyle2}" Height="30" HorizontalAlignment="Left" Margin="782,211,0,0" Name="button5" VerticalAlignment="Top" Width="129">
        <Image Source="image.png"/>
    </Button>

And with your custom style it looks like this:

enter image description here

But it's only at designtime. At runtime there is no border.

EDIT

If there is any border brush. It's not within that button style.

Kapitán Mlíko
  • 4,498
  • 3
  • 43
  • 60
  • I do see it during runtime as well using my above mentioned code. I see that you have your code within the UserControl itself. Is this needed because I am doing it in the window's XAML that calls upon the button. I figured this way only the window needs to modify the button how it needs it. – Seb Nov 26 '12 at 15:41
  • I tried using your snippet and edited my initial question to show the output it gave me. – Seb Nov 26 '12 at 16:00
  • @Seb I modified my Style to let it look exactly like yours. I deleted all properties set in ContentPresenter in ControlTemplate and deleted triggers... those were redundant and served no purpose. One more thing... My UserControl is your Window, it doesn't matter where you put that style... When you need it only in that window then put it in ... – Kapitán Mlíko Nov 26 '12 at 16:24
  • I got it running. I tried embedding the resource where I instantiate the control and it worked fine. Thank you for your help. – Seb Nov 26 '12 at 16:59
0

To improve upon the comment that I posted, set the BorderBrush and BorderThickness properties to a TemplateBinding Value:

<Style TargetType="{x:Type CustomButton}" x:Key="btnnoborder">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CustomButton}">
                <Border Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <ContentPresenter/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

This will allow your button to inherit the values from the instance where it is declared:

<local:CustomButton BorderBrush="Transparent" BorderThickness="0" Content="Click Me!"/>
XamlZealot
  • 693
  • 5
  • 12