Кнопки изображения без полей в WrapPanel

Question

Я пытаюсь создать WrapPanel с бесшовными кнопками ImageButtons, содержащими иллюстрации. Я собрал следующий ContentTemplate в надежде, что он обеспечит необходимый внешний вид; однако вокруг каждой кнопки оставалась тонкая белая линия. Кто-нибудь может направить меня в правильном направлении?

<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

ContentTemplate сообщает WPF, как отображать содержимое внутри кнопки - хром кнопки (такой как граница и фон) остается, а шаблонное содержимое отображается внутри и поверх этого хрома.

Вы хотите заменить весь внешний вид кнопки, границы и всего, а не просто настроить способ отображения ее содержимого. Для этого вам нужно использовать свойство Template. Значением Button.Template является ControlTemplate, а не DataTemplate. Внутри этого ControlTemplate вы можете использовать ContentPresenter для отображения содержимого с данными.

В вашем случае, поскольку ваш DataTemplate выполняет всю работу, вы можете использовать в качестве шаблона необработанный ContentPresenter:

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

Однако, если все ваши кнопки используют один и тот же фон, вы можете переместить это в ControlTemplate:

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

Затем вы можете удалить Границу из шаблона данных. Это действительно имеет значение только в том случае, если вы планируете повторно использовать один и тот же Button.Template с другими шаблонами контента и хотите, чтобы внешний вид Button был одинаковым для разных типов контента.

Answer 2

Создайте пользовательский контроль, поместите кнопку и изображение в сетку.

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