Pulsanti immagine senza bordi in WrapPanel

Question

Sto tentando di creare un WrapPanel con ImageButtons senza interruzioni contenenti grafica.Ho messo insieme il seguente ContentTemplate nella speranza che fornisca l'aspetto fluido richiesto;tuttavia attorno a ciascuno dei pulsanti è rimasta una sottile linea bianca.Qualcuno può guidarmi nella giusta direzione?

<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 dice a WPF come visualizzare il contenuto entro Il pulsante: il pulsante Chrome (come il bordo e lo sfondo) rimane e il contenuto modello viene visualizzato all'interno e al di fuori di quel cromo.

Vuoi sostituire il tutto Aspetto del pulsante, del bordo e tutto, piuttosto che personalizzare come viene visualizzato il suo contenuto. Per fare ciò, è necessario utilizzare invece la proprietà modello. Il valore di pulsante.Template è un controllo di controllo anziché un datatemplate. All'interno di tale controllo, è possibile utilizzare il contenuto di ContentPresenter per visualizzare il contenuto "superato da dati".

Nel tuo caso, dal momento che il tuo datatemplate sta facendo tutto il lavoro, potresti cavartela con un contenuto RAW come il tuo modello:

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

Tuttavia, se tutti i pulsanti utilizzano lo stesso sfondo, è possibile spostarlo nel controllo di controllo:

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

È quindi possibile rimuovere il bordo dall'emplate di dati. Ciò sarebbe importante solo se avessi intenzione di riutilizzare lo stesso pulsante. Testica con altri modelli di contenuto e volevi mantenere l'aspetto del pulsante coerente tra diversi tipi di contenuti.

Answer 2

crea un controllo utente, inserisci il pulsante e l'immagine in una griglia.

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