Windows Phone 7 图像按钮答案

【问题标题】：Windows Phone 7 Image ButtonWindows Phone 7 图像按钮
【发布时间】：2010-11-29 10:21:57
【问题描述】：

我需要为我的应用程序创建一个图像按钮，例如面向 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>

谢谢大家！

【问题讨论】：

我认为这个解决方案存在缺陷。问题是如果有人从您的按钮开始滑动视图，通常按钮单击不会注册。无论您实现它的方式如何，该按钮都将被视为已单击。这与用户期望手机工作的方式有悖常理，并可能导致混乱的用户体验。我认为您最好使用按钮，但将其设置为呈现为图像。

标签： windows-phone-7 imagebutton

【解决方案1】：

我没有在您的代码中看到特定错误，但我现在没有工具来测试它并查看它失败的原因。

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

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

大多数背景都是画笔类型，因此您可以使用 SolidColorBrush、LinearGradientBrush、ImageBrush 等。您不仅限于颜色。

【讨论】：

嗨，我有一个 20x20 的图像，并且想要像图像一样的 20x20 按钮。使用您发布的解决方案是不可能的。我必须设置哪些属性？我尝试了 Padding、Margin 等，但没有...
你应该告诉我们究竟是什么不工作。请记住，根据 UI 指南，“可触摸”对象的最小尺寸为 26x26，命中目标区域为 34x34。
我的回答让您可以将按钮的大小设置为您想要的任何大小。它正在替换按钮的绘制方式，使其绘制图像而不是标准按钮。
@FrancescoDeVittori 我有同样的问题 - 我有 100x100 的图像，我试图将 62x62 的图像映射到按钮，这个解决方案将它们缩小到 ~38x38。

【解决方案2】：

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

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

使用操作开始将导致微妙的非标准行为。在大多数按钮上，如果您单击它但然后拖动它，则按钮单击将不会触发。但是，如果您使用 ManipulationStarted，它会立即触发。

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

【讨论】：

【解决方案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}/>

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

这种方法（而不是使用 ImageBrush 作为按钮背景）意味着您不必担心或硬编码图像/按钮的大小 - WP7 会为您处理这个问题。

建议使用提供的 Button 控件而不是挂钩到操作事件，这样您就不必担心诸如为触摸目标设置适当的边距等问题。

【讨论】：

【解决方案6】：

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

【讨论】：

Button 的背景属性只接受颜色。你能把语法发给我吗？谢谢。
您可以在这篇文章中看到使用 ImageBrush 作为背景的语法和指向 Peter Torr 的文章的链接，其中显示了 StackPanel 的使用。诚然，这是对 HyperlinkButton 的响应，Richard 的原始帖子显示将图像设置为内容实际上可能适用于 Button，尽管我曾观察到为什么它当时不适用于 HyperlinkButton。
social.msdn.microsoft.com/Forums/en-US/windowsphone7series/…

【解决方案7】：

您甚至不需要使用按钮。

您可以在 Image 控件上挂钩 MouseLeftButtonUp 事件。

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

【讨论】：