C#•2w ago

Image sources.

Hello, I'm currently developing a game in c# and i have several questions regarding images in WPF. First, I'd like to know some help regarding this exception. Secondly, is it possible to define multiple images in the XAML, but display them only when needed? this is how my current image looks, it is inside a grid

<Image Name="testImage" Canvas.Top="46" Canvas.Left="214" HorizontalAlignment="Left" VerticalAlignment="Center"></Image>

<Image Name="testImage" Canvas.Top="46" Canvas.Left="214" HorizontalAlignment="Left" VerticalAlignment="Center"></Image>

13 Replies

Pedro Gil Mora•2w ago

Use designer, add the picture and look at the generated code behind

Omnissiah•2w ago

you are accessing testImage before InitializeComponent but testImage is created in there

Buddy•2w ago

No. Designer should never be used. $rulesofwpf

MODiX•2w ago

Rules of WPF:

❌ Avoid the WPF Designer to eliminate a category of confusing bugs
❌ Don't rely on Margin as the primary tool for layouts
❌ Avoid writing UserControls or subclassing to extend a default control -- use Behaviors instead (Microsoft.Xaml.Behaviors.Wpf)

✅ Write XAML by hand and autoformat with "Ctrl K,D" or XAML Styler
✅ Rely upon XAML Hot Reload to design your app's UI at runtime
✅ Use layout controls (Grid, DockPanel, etc) to support proper resizing
✅ Use data binding to eliminate glue code and state synchronization issues
✅ Use collection controls and DataTemplate to dynamically create lists of controls
✅ Learn MVVM to create maintainable apps
✅ Use the Dispatcher to update controls from non-UI threads
✅ WPF's default controls can be easily modernized via $wpfuilibs
✅ Include relevant XAML, code-behind, and ViewModel code for questions when possible

Rules of WPF:

❌ Avoid the WPF Designer to eliminate a category of confusing bugs
❌ Don't rely on Margin as the primary tool for layouts
❌ Avoid writing UserControls or subclassing to extend a default control -- use Behaviors instead (Microsoft.Xaml.Behaviors.Wpf)

✅ Write XAML by hand and autoformat with "Ctrl K,D" or XAML Styler
✅ Rely upon XAML Hot Reload to design your app's UI at runtime
✅ Use layout controls (Grid, DockPanel, etc) to support proper resizing
✅ Use data binding to eliminate glue code and state synchronization issues
✅ Use collection controls and DataTemplate to dynamically create lists of controls
✅ Learn MVVM to create maintainable apps
✅ Use the Dispatcher to update controls from non-UI threads
✅ WPF's default controls can be easily modernized via $wpfuilibs
✅ Include relevant XAML, code-behind, and ViewModel code for questions when possible

Buddy•2w ago

Make sure your image is marked as a resource

Pedro Gil Mora•2w ago

I clearly suggested for reasearch purpose mmm.. right.. maybe it's not embbeded as compilation resource

Erich21OP•2w ago

ty yall so much also another question, slightly unrelated when making classes that need to access elements of the mainwindow from the XAML, i need to inherit the "Window" class too? Id like to make a class that contains refrences to all images in the XAML, for my own convenience

Buddy•2w ago

You can use bindings

Erich21OP•2w ago

what are those

Erich21OP•2w ago

<Image x:Name="testImage" Canvas.Top="-53" Canvas.Left="59" HorizontalAlignment="Left" VerticalAlignment="Top" Height="128" Width="128"></Image>

<Image x:Name="testImage" Canvas.Top="-53" Canvas.Left="59" HorizontalAlignment="Left" VerticalAlignment="Top" Height="128" Width="128"></Image>

this is inside a canvas, and this is the code thats supposed to change the source

c#
 public MainWindow()
 {
     InitializeComponent();
     BitmapImage testImageBitmap = new BitmapImage();
     testImageBitmap.BeginInit();
     testImageBitmap.DecodePixelWidth = 128;
     string path = @"assets/button_onbeat.png";
     if (!System.IO.File.Exists(path))
     {
         MessageBox.Show($"File not found: {path}");
         return;
     }
     testImageBitmap.UriSource = new Uri(path, UriKind.Relative);
     testImageBitmap.EndInit();
     testImage.Source = testImageBitmap;
 }

c#
 public MainWindow()
 {
     InitializeComponent();
     BitmapImage testImageBitmap = new BitmapImage();
     testImageBitmap.BeginInit();
     testImageBitmap.DecodePixelWidth = 128;
     string path = @"assets/button_onbeat.png";
     if (!System.IO.File.Exists(path))
     {
         MessageBox.Show($"File not found: {path}");
         return;
     }
     testImageBitmap.UriSource = new Uri(path, UriKind.Relative);
     testImageBitmap.EndInit();
     testImage.Source = testImageBitmap;
 }

this is where its supposed to show, but it doesnt

Erich21OP•2w ago

it is

Erich21OP•2w ago

https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/how-to-use-the-image-element?view=netframeworkdesktop-4.8 i used this as a source, except for when i want to change the image source later on

How to: Use the Image Element - WPF .NET Framework

Learn how to use the Image Element.

Erich21OP•2w ago

hello, i gave up and just made the source in the xaml, like this

<Image Name="testImage" Canvas.Top="-16" Canvas.Left="246" HorizontalAlignment="Left" VerticalAlignment="Top" Height="64" Width="64" Source="/button_onbeat.png"></Image>

<Image Name="testImage" Canvas.Top="-16" Canvas.Left="246" HorizontalAlignment="Left" VerticalAlignment="Top" Height="64" Width="64" Source="/button_onbeat.png"></Image>

now i want to control its visibility w the help of an external class i saw that i can inherit the

: MainWindow

: MainWindow

in a class and i can access the elements however i tried changing the visibility and opacity at a certain point and it didnt work

Gaming

Programming

Image sources.