WPF Binding an Image using XAML and MVVM

A post describing how to bind an image such as a bitmap or png file to your viewmodel. In Visual Studio create a new WPF project: mvvm2 Observe that this creates the initial default XAML for the main window as shown: MainWindow.xaml [code language="xml"] <Window x:Class="MVVM.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid> </Grid> </Window> [/code] Which when running the program produces the following blank window: Initial Window mvvm1 Now we need to add the ViewModel class, as is used in the Model-View ViewModel pattern. In Visual Studio add a new class representing the ViewModel for our main window XAML and call it MainWindowViewModel.cs: mvvm3 And configure the code so we have a property for returning the bitmap image in a format that is suitable for our WPF. Also in this class is a static method for converting a general bitmap format into a BitmapSource type: [code language="csharp"] using System; using System.Drawing.Imaging; using System.Drawing; using System.Windows.Media.Imaging; using System.Windows; namespace MVVM { public static class BitmapConversion { public static BitmapSource BitmapToBitmapSource(Bitmap source) { return System.Windows.Interop.Imaging.CreateBitmapSourceFromHBitmap( source.GetHbitmap(), IntPtr.Zero, Int32Rect.Empty, BitmapSizeOptions.FromEmptyOptions()); } } public class MainWindowViewModel { private BitmapSource _bitmapSource; public MainWindowViewModel() { Bitmap bitmap = (Bitmap) Bitmap.FromFile(@"c:\dump\bulb.png", true); _bitmapSource = BitmapConversion.BitmapToBitmapSource(bitmap); } public BitmapSource ButtonSource { get { return _bitmapSource; } } } } [/code] If you have trouble compiling the source make sure all the references are installed, particularly System.Drawing: mvvm4 And of course be sure that your program is able to find the location of the image file that we are binding to, in my example it is "C:\dump\bulb.png": [code language="csharp"] public MainWindowViewModel() { Bitmap bitmap = (Bitmap) Bitmap.FromFile(@"c:\dump\bulb.png", true); _bitmapSource = BitmapConversion.BitmapToBitmapSource(bitmap); } [/code] Modify the MainWindow.xaml to include the DataContext and to insert a new button containing the image we wish to bind to: [code language="xml"] <Window x:Class="MVVM.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:VM="clr-namespace:MVVM" Title="MainWindow" Height="234" Width="326"> <Window.DataContext> <VM:MainWindowViewModel /> </Window.DataContext> <Grid> <Button HorizontalAlignment="Left" Margin="35,0,0,138" VerticalAlignment="Bottom" Width="75" Height="29"> <Image Source="{Binding ButtonSource}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0"> </Image> </Button> </Grid> </Window> [/code] Compiling and running this gives the following Window, this time with button containing the XAML-bounded image: mvvm5 Download Visual Studio 2010 project from here: https://www.technical-recipes.com/Downloads/MVVM.zip

Comments

Post a Comment

Popular posts from this blog

Using the Supervisor Controller Pattern to access View controls in MVVM

Image
As discussed on a StackOverflow post , this is considered bad practice, so only use this when necessary. Step 1: Create a new WPF project Step 2: Add event handling code A number of classes are needed for doing command bindings in MVVM. Create the following classes and add to your Visual Studio project: RelayCommand.cs [code language="csharp"] using System; using System.Windows.Input; namespace SupervisorControllingPattern { public class RelayCommand<T> : ICommand { private readonly Predicate<T> _canExecute; private readonly Action<T> _execute; public RelayCommand(Action<T> execute) : this(execute, null) { _execute = execute; } public RelayCommand(Action<T> execute, Predicate<T> canExecute) { if (execute == null) throw new ArgumentNullException(nameof(execute)); _execute = execute; _canExecute = canExecute; ...
Read more

Getting started with client-server applications in C++

Image
A demonstration of simple Internet client-server applications in C++ (Linux-based). The client application tries to connect to the remote server application using the IP address of the remote server ('localhost' or 127.0.0.1) and the server port number which defaulted to 1234. The server application listens to port number 1234 for a connection request. When the server application receives the connection request it sends the text message "Hello!\r\n" to the client.
Read more

How to send an e-mail via Google SMTP using C#

Image
First things first, some useful StackOverflow links: https://stackoverflow.com/questions/9201239/send-e-mail-via-smtp-using-c-sharp https://stackoverflow.com/questions/17462628/the-server-response-was-5-7-0-must-issue-a-starttls-command-first-i16sm1806350 To demonstrate how this is done I first create a new Visual Studio project: Some example code for sending an email via a Google email account (smtp.goolgle.com) - obviously replace this with email / credentials of your own... I put the code within a try-catch block in order to capture any errors that may occur while attempting this. [code language="csharp"] using System; using System.Net; using System.Net.Mail; namespace EmailSmtp { class Program { static void Main(string[] args) { try { // Credentials var credentials = new NetworkCredential("someEmail@gmail.com", "somePassword"); // Mail message var ...
Read more