Windows Phone 7 图像按钮

Question

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

感谢大家！

Answer 1

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

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

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

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

Answer 2

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

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

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

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

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}/>

并添加单击事件或任何您想要的其他内容。该按钮将呈现图像的整体风格。

Answer 4

Button 控件可以将大多数控件作为其内容（而不仅仅是文本），因此您不需要“图像按钮” - 相反，您只需将 Image 控件放入 Button 中，如下所示：

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

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

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

Answer 5

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

Answer 6

您甚至不需要使用按钮。

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

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