Reputation: 1493
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.
What is the solution?
Upvotes: 76
Views: 292374
Reputation: 3231
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.
Upvotes: 2
Reputation: 3694
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.
Upvotes: 9
Reputation: 523
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!
Upvotes: 11
Reputation: 3563
Please try the below XAML snippet:
<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'.
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);
Upvotes: 35
Reputation: 2766
In the case of a 'missing' image there are several things to consider:
When XAML can't locate a resource it might ignore it (when it won't throw a XamlParseException
)
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')
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:
<UserControl.Resources>
<Image x:Key="MyImage" Source.../>
</UserControl.Resources>
And later use it in your desired control(s):
<Button Content="{StaticResource MyImage}" />
Upvotes: 88
Reputation: 1315
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
.
Upvotes: 7
Reputation: 7171
Try 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>
Upvotes: 3