WrapPanel中的无边框ImageButtons

时间:2010-04-03 20:03:59

标签: wpf imagebutton borderless

我正在尝试使用包含Artwork的无缝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>

2 个答案:

答案 0 :(得分:3)

ContentTemplate告诉WPF如何在按钮内显示内容 - 按钮镶边(例如边框和背景)保留,模板内容显示在该镶边内外。< / p>

您想要替换Button,border和all的整个外观,而不仅仅是自定义其内容的显示方式。为此,您需要使用Template属性。 Button.Template的值是ControlTemplate而不是DataTemplate。在该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中删除Border。如果您计划将相同的Button.Template与其他内容模板一起使用,并希望保持Button的外观在不同类型的内容中保持一致,那么这真的很重要。

答案 1 :(得分:0)

创建用户控件,按下按钮;网格中的图像。

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