WrapPanel中的無邊界ImageButtons

Question

我正在嘗試創建一個包含無縫ImageButtons的WrapPanel。我將以下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如何內顯示內容按鈕 - 按鈕鍍鉻（如邊框和背景）一直存在，模板化的內容及超過該鉻顯示。

您想要替換Button，border和all的整個整個的外觀，而不是僅定製其內容的顯示方式。爲此，您需要改爲使用Template屬性。 Button.Template的值是ControlTemplate而不是DataTemplate。在該ControlTemplate中，您可以使用ContentPresenter顯示「數據模板化」內容。

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

但是，如果所有的按鈕都使用相同的背景，你可以：

在你的情況，因爲你的DataTemplate中做了所有的工作，你可以用原始ContentPresenter作爲模板脫身將其移入ControlTemplate：

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

然後，您可以從DataTemplate中刪除邊框。如果您計劃重複使用與其他內容模板相同的Button.Template，並且希望保持Button在不同類型的內容之間保持一致，這實際上只是很重要。

Answer 2

創建一個用戶控件，將圖像放在網格中。

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