在WPF按钮中添加图像

时间:2013-07-07 19:43:11

标签: c# wpf image button

我尝试了这个解决方案:

<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'”异常。

解决方案是什么?

7 个答案:

答案 0 :(得分:68)

对于“缺失”图像,需要考虑以下几点:

  1. 当XAML无法找到资源时,它可能会忽略它(当它不会抛出XamlParseException时)

  2. 必须正确添加和定义资源:

    • 确保项目中存在预期的位置。

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

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

  3. Snippet

    在类似情况下尝试的另一件事,对于重用图像(或任何其他资源)也很有用:

    将您的图片定义为XAML中的资源:

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

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

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

答案 1 :(得分:26)

请尝试以下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>

在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);

答案 2 :(得分:7)

使用:

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

它应该工作。但请记住,您必须在项目的资源中添加一个图像!

答案 3 :(得分:5)

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

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

注意图像源语法。请参阅this question以获取帮助。

答案 4 :(得分:3)

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

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

注意:确保属性窗口中图片的构建操作应为Resource

enter image description here

答案 5 :(得分:2)

尝试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 :(得分:0)

我发现我还必须将Access Modifier in the Resources tab设置为“公共” - 默认设置为“内部”,我的图标仅在设计模式下显示,但在运行应用程序时却没有。