Simple databinding between slider and object to update a drawing in WPF - wpf

Question

I have a specific need to use System.Drawing.Graphics to use as as ImageSource for an Image control. That graphics is to be updated by a slider, whose Value is to be data-bound to an object that acts as a model to build the drawing.
I have set up a minimal working version of what I want to accomplish, and have created as much "Binding Infrastructure" as I could, but have stopped where things started to get confusing for me. My code has just the MainWindow (XAML and code behind) and a Radius class:
MainWindow:
<Window x:Class="MinimalUpdateableDrawing.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
WindowState="Maximized">
<DockPanel>
<Slider x:Name="SizeSlider" DockPanel.Dock="Bottom" />
<Image x:Name="figure" Width="800" Height="600" />
</DockPanel>
</Window>
MainWindow codebehind:
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Windows;
using System.Windows.Media.Imaging;
namespace MinimalUpdateableDrawing {
public partial class MainWindow : Window {
Radius radius_instance;
public MainWindow() {
InitializeComponent();
radius_instance = new Radius();
this.Loaded +=new RoutedEventHandler(DrawCircle);
}
void DrawCircle(object sender, RoutedEventArgs e) {
int radius = radius_instance.Value;
using (var bmp = new Bitmap((int)figure.Width, (int)figure.Height)) {
using (var g = Graphics.FromImage(bmp)) {
g.FillEllipse(System.Drawing.Brushes.Blue,
(int)figure.Width/2-radius,
(int)figure.Height/2-radius,
radius*2, radius*2);
}
using(MemoryStream ms = new MemoryStream()) {
bmp.Save(ms, ImageFormat.Bmp);
ms.Position = 0;
BitmapImage bitmapImage = new BitmapImage();
bitmapImage.BeginInit();
bitmapImage.StreamSource = ms;
bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
bitmapImage.EndInit();
figure.Source = bitmapImage;
}
}
}
}
}
Radius class:
using System;
using System.ComponentModel;
namespace MinimalUpdateableDrawing
{
class Radius : INotifyPropertyChanged {
int _value = 100;
public int Value {
get { return _value; }
set {
_value = value;
OnPropertyChanged("Value");
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string p) {
throw new NotImplementedException();
}
}
}
If anyone could suggest what I should do to implement the binding between SizeSlider and radius_instance.Value, so that when I move the slider the image updates, that would get me going!

Answer 1

If you were simply drawing an ellipse, I'd recommend binding both the slider's value and an Ellipse object to the object that stores the value in question. You can see more about drawing with Wpf at http://msdn.microsoft.com/en-us/library/ms747393.aspx.
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Ellipse Height="{Binding Radius}" Width="{Binding Radius}" HorizontalAlignment="Center" VerticalAlignment="Center" Fill="Black" />
<Slider Value="{Binding Radius}" Grid.Row="1" Minimum="0" Maximum="200" />
</Grid>
With that said, if the drawing was more complex, you may want to consider using an IValueConverter to adapt the value into a drawing you could use...for example:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<local:EllipseConverter x:Key="EllipseConverter" />
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Source="{Binding Radius, Converter={StaticResource EllipseConverter}}" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="None" />
<Slider Value="{Binding Radius}" Grid.Row="1" Minimum="0" Maximum="200" />
</Grid>
</Window>
IValueConverter:
using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Windows.Data;
using System.Windows.Media.Imaging;
namespace WpfApplication1
{
class EllipseConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if (value == null) return null;
int radius = (int)value;
int diameter = radius * 2;
using (var bmp = new System.Drawing.Bitmap(diameter, diameter))
{
using (var g = Graphics.FromImage(bmp))
{
g.FillEllipse(System.Drawing.Brushes.Blue,
0,
0,
diameter,
diameter);
}
using (MemoryStream ms = new MemoryStream())
{
bmp.Save(ms, ImageFormat.Bmp);
ms.Position = 0;
BitmapImage bitmapImage = new BitmapImage();
bitmapImage.BeginInit();
bitmapImage.StreamSource = ms;
bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
bitmapImage.EndInit();
return bitmapImage;
}
}
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
}