Grenzlose Bildbuttons in Wrappanel

Question

Ich versuche, ein Wrappanel mit nahtlosen Bildbuttons mit Kunstwerken zu erstellen. Ich habe das folgende ContentTemplate zusammengestellt, in der Hoffnung, dass es den nahtlosen Aussehen verleihen würde. Eine dünne weiße Linie blieb jedoch um jeden der Knöpfe. Kann mich jemand in die richtige Richtung lenken?

<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

Die ContentTemplate zeigt WPF an, wie Sie den Inhalt anzeigen innerhalb Die Taste - Das Taste -Chrom (wie z. B. Rand und Hintergrund) bleibt und der Vorlageninhalt wird innerhalb und über diesem Chrom angezeigt.

Sie möchten die ersetzen gesamte Erscheinungsbild der Schaltfläche, Rand und aller, anstatt nur die Anpassung des Inhalts anzupassen. Dazu müssen Sie stattdessen die Vorlageneigenschaft verwenden. Der Wert von Taste.Template ist eher eine Steuerung als eine DataTemplate. Innerhalb dieser ControlTemplate können Sie den ContentPresenter verwenden, um den Inhalt "data-templated" anzuzeigen.

Da Ihre DataTemplate die gesamte Arbeit erledigt, können Sie mit einem Rohinhaltsprüfen als Vorlage davonkommen:

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

Wenn jedoch alle Ihre Schaltflächen den gleichen Hintergrund verwenden, können Sie dies in die Steuerung verschieben:

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

Sie können dann den Rand aus der DataTemplate entfernen. Dies würde wirklich nur eine Rolle spielen, wenn Sie vorhaben würden, dieselbe Schaltfläche wiederzuverwenden.

Answer 2

Erstellen Sie ein UserControl, legen Sie das Botton & Image in ein Raster.

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