1

Possible Duplicate:
wpf flat button

how can i implement a button like the one in the picture?

enter image description here

I tried the following:

    <Button Name="buttonSuchpfeil" Margin="184,39,522,364">
        <StackPanel>
            <Image Source="..\Pictures\Suchpfeil.jpg"></Image>
        </StackPanel>
    </Button>

But there appears border around the picture i dont like:

enter image description here

How can i change my code to avoid this?

Community
  • 1
  • 1
PeterP
  • 191
  • 1
  • 2
  • 9

3 Answers3

3

In WinForms there is an easy way of doing this: set the FlatStyle to Flat, e.g.

this.myButton.FlatStyle = System.Windows.Forms.FlatStyle.Flat;

As for WPF (notwithstanding Tobias' answer which appeared just as I was writing this :-), there is some useful additional information here: WPF Flat Button

Community
  • 1
  • 1
carboncrank
  • 71
  • 4
  • the link explained it, thanks! – PeterP Jan 07 '12 at 13:03
  • 1
    @Cody Gray My answer covers both because of the generic wording of the question. I'm new here, sorry if that is out of line. – carboncrank Jan 07 '12 at 14:27
  • Ah, fair enough. There's nothing wrong with it, it's just a bit unusual. To save yourself some time in the future, check the tags that appear under the question--they look like blue buttons. Some people don't bother to repeat the context that they provide in the question. – Cody Gray - on strike Jan 07 '12 at 15:15
1

Set the Button's Padding to -2, that will cause the image to hide the border.

Like this:

<Button Name="buttonSuchpfeil" Padding="-2" Margin="184,39,522,364">
    <StackPanel>
        <Image Source="..\Pictures\Suchpfeil.jpg"></Image>
    </StackPanel>
</Button>

For more complex layout changes (like MouseOver effects and such) you'd need to change the button's template though. This article will provide you with the basics.

Nuffin
  • 3,882
  • 18
  • 34
1

just try with this... i created a custom template for the button

<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border x:Name="border" BorderThickness="2" BorderBrush="Black">
                        <ContentPresenter></ContentPresenter>
                    </Border>
                    <ControlTemplate.Triggers>

                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                            <Setter Property="Opacity" TargetName="border" Value="0.15"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="BorderBrush" TargetName="border" Value="#FF54FF08"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

        <Button  HorizontalAlignment="Left" Height="30" VerticalAlignment="Top" Width="35" Style="{DynamicResource ButtonStyle1}">
        <Image Source="Untitled-1.png" Stretch="Fill"></Image>          
     </Button>
Kishore Kumar
  • 21,449
  • 13
  • 81
  • 113