Windows Phone 7图像按钮

Question

我需要为我的应用程序创建一个像Web风格一样的图像按钮。我有一个20x20像素的图像，希望创建一个与该图像相同尺寸的图像按钮。

我试图在我的XAML中设置这个，但它不起作用：

<Button Grid.Row="0" Margin="0" Padding="0" Click="AddtoFavorite_Click" Width="20" Height="20"  VerticalAlignment="Top" HorizontalAlignment="Right">
   <Button.Content>
      <Image Source="/MyNamespace;component/images/star_yellow.png" Margin="0" Width="20" Height="20" />
   </Button.Content>
</Button>

有什么问题？

---

解决方案

我发现最好的解决方案是：

<Image Source="/MyNamespace;component/images/star_yellow.png" ManipulationStarted="Image_ManipulationStarted" Width="20" Height="20"></Image> 

感谢所有人！

- Nicola C.

---

我认为这个解决方案存在缺陷。问题在于，如果有人从你的按钮开始滑动视图，通常按钮点击将不会被注册。然而，你实现的方式是，按钮将被视为已点击。这与用户期望手机工作的方式相反，可能会导致令人困惑的用户体验。我认为最好使用一个按钮，但将其样式设置为呈现为图像。 - Mac

Answer 1

我没有看到你代码中的特定错误，但我现在没有测试它的工具，也不知道为什么它失败了。

但是，您可以使用自己的图像创建VisualBrush，并将其用作Button的背景：

<Button>
    <Button.Background>
        <ImageBrush ImageSource="xyz.png"/>
    </Button.Background>
</Button>

大多数背景都是Brush类型，所以你可以使用SolidColorBrush、LinearGradientBrush、ImageBrush等。你不仅限于颜色。

- Francesco De Vittori

---

嗨，我有一张20x20的图片，想要一个与图片相同大小的按钮。使用您发布的解决方案不可行。我需要设置哪些属性？我尝试了填充、边距等，但都没有用... - Nicola C.

然后，您应该告诉我们到底哪里出了问题。请记住，根据UI指南，“可触摸”对象的最小尺寸为26x26，具有34x34的命中目标区域。 - Francesco De Vittori

我的答案允许您将按钮的大小设置为任何您想要的尺寸。它替换了按钮绘制的方式，使其绘制图像而不是标准按钮。 - Mac

@FrancescoDeVittori 我也遇到了同样的问题 - 我有100x100像素的图片，我想将它们映射到62x62像素的按钮上，但这个解决方案会将它们缩小到大约38x38像素。 - Tom Kidd

Answer 2

我认为最好的解决方案如下:

<Button ...>
    <Button.Template>
         <ControlTemplate>
              <Image .... />
         </ControlTemplate>
     </Button.Template>
</Button>

使用ManipulationStarted会导致微妙的非标准行为。在大多数按钮上，如果你点击它但然后拖动出去，按钮点击事件将不会触发。然而，如果你使用ManipulationStarted，它将立即触发。

管理这些设计时考虑的最佳方法是使用Expression Blend。在Blend中，您可以右键单击按钮并通过设计工具编辑模板，这使得了解如何编辑xaml变得不那么重要。学习使用Blend真的值得努力。

- Mac

Answer 3

这是一个旧的问题，但我认为我可以提供一个更好的解决方案。有些解决方案要求您使用图像替换按钮或使用图像刷作为背景。这很好，但它也会将图像与正常的按钮样式（黑色或白色框，取决于您的主题）包围起来。

这个解决方案允许您使用图像作为按钮本身，同时保持完整的按钮功能，而无需像SilverGeek那样对对象进行子类化。

首先，在App.xaml或页面资源中创建一个新样式。

<Style x:Key="ImageButtonStyle" TargetType="Button">
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="Button">
            <Grid>
                <Image x:Name="StartButtonImage" Source="/Images/YourImageFile.png"/>
                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                    Content=""/>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

现在，只需使用该样式在任何地方创建一个按钮即可：

<Button Style={StaticResource ImageButtonStyle}/>

并添加点击事件或其他您想要的内容。按钮将采用图像的整个样式。

- Bil Simser

Answer 4

也许您会对这篇文章感兴趣：

http://silvergeek.net/2011/01/14/imagebutton-control-for-win-phone-7/

- SilverGeek.net

Answer 5

按钮控件可以使用大多数控件作为其内容（不仅仅是文本），因此您不需要一个“图像按钮” - 相反，只需像这样在您的按钮中放置一个图像控件：

<Button>
    <Image Source="http://www.richmondwiki.org/images/search-button.png"></Image>
</Button>

这种方法（与使用 ImageBrush 作为按钮背景相反）意味着您不必担心或硬编码图像/按钮的大小 - WP7 将为您处理此操作。

建议使用提供的 Button 控件而不是连接操作事件，这样您就不必担心触摸目标是否具有适当的边距等问题。

- Henry C

Answer 6

您可以将图像设置为按钮的背景，或者如果您想将其作为内容处理，在理论上它应该可以在 StackPanel 中工作。

- Mick N

---

Button的Background属性只接受颜色。你能把语法发给我吗？谢谢。 - Nicola C.

在这篇文章中，您可以看到使用ImageBrush作为背景的语法以及链接到Peter Torr的帖子，展示了StackPanel的使用。不可否认，这是针对超链接按钮的回应，Richard最初的帖子显示将图像设置为内容实际上可能适用于按钮，尽管当时我对为什么它不能为HyperlinkButton工作所做的观察。 - Mick N

http://social.msdn.microsoft.com/Forums/en-US/windowsphone7series/thread/6d6449dc-7a87-4e8e-bdd6-e01afca85414 - Mick N

Answer 7

你甚至不需要使用按钮。

你可以在图像控件上挂钩MouseLeftButtonUp事件。

 <Image
            Source='blue02.png'
            Width='26'
            Height='26'
            Margin='5'
            MouseLeftButtonUp='Image_MouseLeftButtonUp' />

- Walt Ritscher