ImageButtons sem fronteiras em Wrappanel
-
24-09-2019 - |
Pergunta
Estou tentando criar um Wrappanel com imagens sem costura contendo obras de arte. Eu montei o seguinte contentTemplate na esperança de que ele forneça a aparência perfeita necessária; No entanto, uma linha branca fina permaneceu em torno de cada um dos botões. Alguém pode me dirigir na direção certa?
<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>
Solução
O ContentTemplate diz ao WPF como exibir o conteúdo dentro de O botão - o botão Chrome (como borda e fundo) permanece, e o conteúdo modificado é exibido dentro e sobre esse cromo.
Você quer substituir o inteira Aparência do botão, borda e tudo, em vez de apenas personalizar como seu conteúdo é exibido. Para fazer isso, você precisa usar a propriedade do modelo. O valor do Button.Template é um ControlTemplate em vez de um DataTemplate. Dentro desse ControlTemplate, você pode usar o ContentPresenter para exibir o conteúdo "temperado de dados".
No seu caso, como seu datatemplate está fazendo todo o trabalho, você pode se safar de um representante de conteúdo bruto como seu modelo:
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter />
</ControlTemplate>
</Button.Template>
No entanto, se todos os seus botões estiverem usando o mesmo plano de fundo, você poderá mover isso para o ControlTemplate:
<Button.Template>
<ControlTemplate TargetType="Button">
<Border BorderBrush="Blue" ...>
<ContentPresenter />
</Border>
</ControlTemplate>
</Button.Template>
Você pode remover a borda do datatemplate. Isso realmente importa se você planejasse reutilizar o mesmo botão.
Outras dicas
Crie um UserControl, coloque o Botton & Image em uma grade.
<Grid>
<Image Source="icon.png" Panel.ZIndex="1" />
<Button
Panel.ZIndex="2"
FocusVisualStyle="{x:Null}"
Background="Transparent"/>
</Grid>