在WPF按钮中添加图像

I tried this solution:

我试着这个解决方案:

<Button>
    <StackPanel>
        <Image Source="Pictures/img.jpg" />
        <TextBlock>Blablabla</TextBlock>
    </StackPanel>
</Button>

But I can see the image only in the project window, and when I launch the program it disappears.

但我只能在项目窗口中看到图像，当我启动程序时它就消失了。

If I try this:

如果我试试这个:

  Image img = new Image();
  img.Source = new BitmapImage(new Uri("foo.png"));

  StackPanel stackPnl = new StackPanel();
  stackPnl.Orientation = Orientation.Horizontal;
  stackPnl.Margin = new Thickness(10);
  stackPnl.Children.Add(img);

  Button btn = new Button();
  btn.Content = stackPnl;

I get a "'System.Windows.Markup.XamlParseException' in PresentationFramework.dll" exception.

我得到一个“System.Windows.Markup。在PresentationFramework XamlParseException”。dll”例外。

What is the solution?

解决方案是什么?

7 个解决方案

#1

In the case of a 'missing' image there are several things to consider:

对于“缺失”的形象，有几件事需要考虑:

1. When XAML can't locate a resource it might ignore it (when it won't throw a XamlParseException)

   当XAML无法定位资源时，它可能会忽略它(当它不会抛出XamlParseException时)

2. The resource must be properly added and defined:

   必须适当增加和定义资源:

   • Make sure it exists in your project where expected.

     确保它存在于预期的项目中。

   • Make sure it is built with your project as a resource.

     确保将项目作为资源构建。

     (Right click → Properties → BuildAction='Resource')

     (右击→属性→BuildAction = '资源')

Another thing to try in similar cases, which is also useful for reusing of the image (or any other resource):

在类似的情况下还需要尝试另一件事，这对于重用图像(或任何其他资源)也是有用的:

Define your image as a resource in your XAML:

将您的映像定义为XAML中的资源:

<UserControl.Resources>
     <Image x:Key="MyImage" Source.../>
</UserControl.Resources>

And later use it in your desired control(s):

然后在您需要的控件中使用:

<Button Content="{StaticResource MyImage}" />

#2

Please try the below XAML snippet:

请尝试以下XAML片段:

<Button Width="300" Height="50">
  <StackPanel Orientation="Horizontal">
    <Image Source="Pictures/img.jpg" Width="20" Height="20"/>
    <TextBlock Text="Blablabla" VerticalAlignment="Center" />
  </StackPanel>
</Button>

In XAML elements are in a tree structure. So you have to add the child control to its parent control. The below code snippet also works fine. Give a name for your XAML root grid as 'MainGrid'.

在XAML中，元素在树结构中。所以你必须将子控件添加到父控件中。下面的代码片段也可以正常工作。为XAML根网格命名为“MainGrid”。

Image img = new Image();
img.Source = new BitmapImage(new Uri(@"foo.png"));

StackPanel stackPnl = new StackPanel();
stackPnl.Orientation = Orientation.Horizontal;
stackPnl.Margin = new Thickness(10);
stackPnl.Children.Add(img);

Button btn = new Button();
btn.Content = stackPnl;
MainGrid.Children.Add(btn);

#3

Use:

使用:

<Button Height="100" Width="100">
  <StackPanel>
    <Image Source="img.jpg" />
    <TextBlock Text="Blabla" />
  </StackPanel>
</Button>

It should work. But remember that you must have an image added to the resource on your project!

它应该工作。但是请记住，您必须将映像添加到项目的资源中!

#4

You can set the button's background to the image if you then want to overlay text.

如果想要覆盖文本，可以将按钮的背景设置为图像。

<Button>
   <Button.Background>
     <ImageBrush ImageSource="/AssemblyName;component/Pictures/img.jpg"/>
   </Button.Background>
   <TextBlock>Blablabla</TextBlock>
</Button>

Watch out for the image source syntax. See this question for help.

注意图像源语法。参见这个问题寻求帮助。

#5

Try ContentTemplate:

试试ContentTemplate:

<Button Grid.Row="2" Grid.Column="0" Width="20" Height="20"
        Template="{StaticResource SomeTemplate}">
    <Button.ContentTemplate>
        <DataTemplate>
            <Image Source="../Folder1/Img1.png" Width="20" />
        </DataTemplate>
    </Button.ContentTemplate>
</Button>

#6

I also had the same issue. I've fixed it by using the following code.

我也有同样的问题。我已经用下面的代码修复了它。

        <Button Width="30" Margin="0,5" HorizontalAlignment="Stretch"  Click="OnSearch" >
            <DockPanel>
                <Image Source="../Resources/Back.jpg"/>
            </DockPanel>
        </Button>

Note: Make sure the build action of the image in the property window, should be Resource.

注意:确保属性窗口中映像的构建动作应该是资源。

#7

I found that I also had to set the Access Modifier in the Resources tab to 'Public' - by default it was set to Internal and my icon only appeared in design mode but not when I ran the application.

我发现我还必须将资源选项卡中的访问修饰符设置为“Public”——默认情况下它设置为“Internal”，我的图标只在设计模式下出现，在运行应用程序时没有出现。