Borderless ImageButtons in WrapPanel

Question

I am attempting to create a WrapPanel with seamless ImageButtons containing Artwork. I put together the following ContentTemplate in the hopes that it would provide the seamless look required; however a thin white-line remained around each of the buttons. Can anyone steer me in the right direction?

<Button.ContentTemplate>
    <DataTemplate DataType="{x:Type local:ArtInfo}">
        <Border Name="border" BorderThickness="0" BorderBrush="blue" Height="280" Width="250" Background="#262c40">
            <StackPanel>
                <Grid>
                    <Grid.Resources>
                        <local:MyConverter x:Key="MyConverter"></local:MyConverter>
                        <ObjectDataProvider x:Key="Properties.Settings" ObjectType="{x:Type lcl:Properties.Settings}" />
                    </Grid.Resources>
                    <Image Name="ArtImage" Margin="10,15,0,0" Height="195" Width="195" VerticalAlignment="Top" >
                        <Image.Source>
                                  <Binding Path="ArtImage"/>
                        </Image.Source>
                    </Image>
               </Grid>
            <TextBlock Text="{Binding Path=ArtClass}" Margin="10,-17,0,0" FontSize="11" Foreground="white" />
            <TextBlock Text="{Binding Path=Student}" Margin="10,0,0,0" FontSize="11" Foreground="white" />
            <TextBlock Text="1998" Margin="10,0,0,0" FontSize="11" Foreground="white" />
        </StackPanel>
    </Border>
    </DataTemplate>
</Button.ContentTemplate>

Answer 1

The ContentTemplate tells WPF how to display the content within the Button -- the Button chrome (such as the border and background) remains, and the templated content is displayed within and over that chrome.

You want to replace the entire appearance of the Button, border and all, rather than just customising how its content is displayed. To do this, you need to use the Template property instead. The value of Button.Template is a ControlTemplate rather than a DataTemplate. Within that ControlTemplate, you can use the ContentPresenter to display the "data-templated" content.

In your case, since your DataTemplate is doing all the work, you could get away with a raw ContentPresenter as your template:

<Button.Template>
  <ControlTemplate TargetType="Button">
    <ContentPresenter />
  </ControlTemplate>
</Button.Template>

However, if all your buttons are using the same background, you could move this into the ControlTemplate:

<Button.Template>
  <ControlTemplate TargetType="Button">
    <Border BorderBrush="Blue" ...>
      <ContentPresenter />
    </Border>
  </ControlTemplate>
</Button.Template>

You could then remove the Border from the DataTemplate. This would really only matter if you were planning to reuse the same Button.Template with other content templates and wanted to keep the appearance of the Button consistent across different kinds of content.

Answer 2

create a usercontrol, put the botton & image in a grid.

<Grid>
  <Image Source="icon.png" Panel.ZIndex="1" />
  <Button 
    Panel.ZIndex="2" 
    FocusVisualStyle="{x:Null}" 
    Background="Transparent"/>
</Grid>