ImageButtons à WrapPanel Borderless

Question

Je cherche à créer un WrapPanel avec ImageButtons sans soudure contenant une illustration. Je mets ensemble les ContentTemplate suivantes dans l'espoir qu'il fournirait l'apparence transparente requise; Cependant, une mince ligne blanche est restée autour de chacun des boutons. Quelqu'un peut-il me diriger dans la bonne 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

Le ContentTemplate indique WPF comment afficher le contenu dans les le bouton - le chrome Bouton (comme la frontière et arrière-plan) reste, et le contenu basé sur un modèle est affiché à l'intérieur et sur cette chrome <. / p>

Vous voulez remplacer le ensemble apparence du bouton, frontière et tout, plutôt que de personnaliser la façon dont le contenu est affiché. Pour ce faire, vous devez utiliser la propriété de modèle à la place. La valeur de Button.Template est un ControlTemplate plutôt que d'un DataTemplate. Au sein de ce ControlTemplate, vous pouvez utiliser la ContentPresenter pour afficher le contenu « de données basé sur un modèle ».

Dans votre cas, puisque votre DataTemplate fait tout le travail, vous pourriez sortir avec une ContentPresenter brute comme modèle:

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

Cependant, si tous vos boutons utilisent le même arrière-plan, vous pouvez déplacer ce dans le ControlTemplate:

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

Vous pouvez ensuite retirer la frontière du DataTemplate. Ce serait vraiment seulement d'importance si vous aviez l'intention de réutiliser le même Button.Template avec d'autres modèles de contenu et je voulais garder l'apparence du bouton cohérente entre les différents types de contenu.

Answer 2

créer un usercontrol, mettre le botton & image dans une grille.

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