16

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

谢谢大家！

4

7 回答 7

20

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

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

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

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

于 2010-11-29T11:06:29.610 回答
4

这很旧，但我想我会在这里提供我认为更好的解决方案。其中一些解决方案希望您将按钮替换为图像，或将背景替换为画笔。这很好，除了它还使用普通按钮样式、黑色或白色框（取决于您的主题）围绕图像。

此解决方案允许您将图像用作按钮本身，同时保持按钮的完整保真度，但不必像 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}/>

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

于 2012-02-05T23:05:02.313 回答
4

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

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

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

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

于 2011-03-02T03:57:04.510 回答
3

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

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

于 2011-01-14T10:55:56.893 回答
1

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

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

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

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

于 2012-01-01T07:52:11.623 回答
0

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

于 2010-11-29T10:25:04.497 回答
0

你甚至不需要使用按钮。

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

 <Image
            Source='blue02.png'
            Width='26'
            Height='26'
            Margin='5'
            MouseLeftButtonUp='Image_MouseLeftButtonUp' />
于 2010-11-30T00:25:31.077 回答