ラッパネルのボーダーレスイメージバットン
-
24-09-2019 - |
質問
私はアートワークを含むシームレスな画像buttonsを備えたラッパネルを作成しようとしています。必要なシームレスな外観を提供することを期待して、次の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>
解決
ContentTemplateは、コンテンツの表示方法をWPFに伝えます 内部 ボタン - ボタンクロム(境界線や背景など)が残り、テンプレートされたコンテンツがそのクロム内およびその上に表示されます。
あなたは置き換えたいです 全体 コンテンツの表示方法をカスタマイズするのではなく、ボタン、ボーダー、およびすべての外観。これを行うには、代わりにテンプレートプロパティを使用する必要があります。 button.templateの値は、dataTemplateではなくControlTemplateです。そのControlTemplate内で、ContentPresenterを使用して「データテンプレート」コンテンツを表示できます。
あなたの場合、あなたのDataTemplateはすべての作業を行っているので、あなたはあなたのテンプレートとして生のContentPresenterを使用して逃げることができます:
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter />
</ControlTemplate>
</Button.Template>
ただし、すべてのボタンが同じ背景を使用している場合、これをControlTemplateに移動できます。
<Button.Template>
<ControlTemplate TargetType="Button">
<Border BorderBrush="Blue" ...>
<ContentPresenter />
</Border>
</ControlTemplate>
</Button.Template>
その後、dataTemplateから境界を削除できます。これは、同じボタンを再利用することを計画していた場合にのみ重要です。
他のヒント
usercontrolを作成し、ボットンと画像をグリッドに入れます。
<Grid>
<Image Source="icon.png" Panel.ZIndex="1" />
<Button
Panel.ZIndex="2"
FocusVisualStyle="{x:Null}"
Background="Transparent"/>
</Grid>
所属していません StackOverflow