WrapPanel의 여백없는 ImageButton

Question

Artwork이 포함 된 완벽한 ImageButton을 사용하여 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의 값은 DataTemplate이 아닌 ControlTemplate입니다. 해당 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>