在 WPF 按钮中添加图像

Posted 2023-02-22

【中文标题】在 WPF 按钮中添加图像

【英文标题】：Add an image in a WPF button

【发布时间】：2013-07-05 03:15:26

【问题描述】：

我试过这个解决方案：

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

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

如果我试试这个：

  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;

我在 PresentationFramework.dll 中收到“'System.Windows.Markup.XamlParseException'”异常。

解决办法是什么？

【问题讨论】：

您的图片是否在其属性中定义为“资源”？ （右键单击它 -> 属性 -> Build Action='Resource'）

谢谢！您让我朝着正确的方向前进：我将图像拖放到解决方案资源管理器中，现在我可以看到它了 :)

【参考方案1】：

在“缺失”图像的情况下，需要考虑几件事情：

当 XAML 找不到资源时，它可能会忽略它（当它不会抛出 XamlParseException 时）

必须正确添加和定义资源：

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

确保它是使用您的项目作为资源构建的。

（右键单击 → 属性 → BuildAction='Resource'）

在类似情况下尝试的另一件事，这对于重用图像（或任何其他资源）也很有用：

将图像定义为 XAML 中的资源：

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

然后在您想要的控件中使用它：

<Button Content="StaticResource MyImage" />

【讨论】：

我认为您必须使用双引号，例如 而不是 content=...。

源码路径可以试试

我尝试了您的第二种方法，但仍遇到此错误。 “在类型 'UserControl' 中找不到可附加属性 'Resources'。”

【参考方案2】：

请尝试以下 XAML sn-p：

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

在 XAML 中元素是树形结构。因此，您必须将子控件添加到其父控件。下面的代码 sn-p 也可以正常工作。为您的 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】：

用途：

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

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

【参考方案4】：

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

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

注意图像源语法。请参阅this question 寻求帮助。

【参考方案5】：

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

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

注意：确保属性窗口中图片的构建动作应该是Resource。

【参考方案6】：

试试 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>

【讨论】：

我应该为一些模板填写什么？

如果你没有使用Template，你可以删除Template="StaticResource SomeTemplate"，如果你想知道模板是什么，你可以尝试googlewpf template

【参考方案7】：

我发现我还必须将Access Modifier in the Resources tab 设置为“公共” - 默认情况下它设置为内部，并且我的图标仅出现在设计模式中，但在我运行应用程序时不会出现。