Silverlight Canvas Sizing within a ScrollViewer

Question

I am making a Silverlight 4 website with C#. In one of the pages, I want to have two panels beside each other. On the left is a map control and on the right is an image. That is easy enough, but I also want to be able to click on the image and leave PushPin like objects (like the map) so I put the image in a canvas and just draw circles. The problem is that image can be fairly large and I need to be able to scroll the image. I tried several different ways of achieving this, but so far no luck.

The answers to the following post seemed to be like the way to go, but there must be updates to Silverlight that broke it: WPF: How to make canvas auto-resize?

A similar solution suggested making the Canvas from scratch, but I ran into the same problem.

Most of my attempts end in displaying as much of the image as possible on the screen, but no scroll bars (still greyed out) or the page just goes white when the image is loaded.

The following is how I am currently selecting the image to load:

        OpenFileDialog dialog = new OpenFileDialog();
        dialog.Filter = "Image Files (*.png, *.jpg)|*.jpg;*.png";
        if(dialog.ShowDialog() == true) {
            BitmapImage bitmap = new BitmapImage();
            FileStream stream = dialog.File.OpenRead();
            bitmap.SetSource(stream);
            TheImage.Source = bitmap;
        }

Answer 1

There is probably be a nicer solution but this should do the trick.

I have created a small fixed size ScrollViewer that contains a Canvas and an image. I then used a behaviour to modify the size of the canvas to match the size of the image. The behaviour also handles the ImageOpened event to set the correct size of the image once the image is opened.

Here is the xaml:

<ScrollViewer Width="200" Height="200" HorizontalScrollBarVisibility="Auto">
    <Canvas x:Name="TheCanvas">
        <Image x:Name="TheImage">
            <i:Interaction.Behaviors>
                <Views:ResizeCanvasBehaviour Canvas="{Binding ElementName=TheCanvas}"/>
            </i:Interaction.Behaviors>
        </Image>
    </Canvas>
</ScrollViewer> 

Be sure to declare i as xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" and b matches the namespace where you place the behaviour.

Here is the code for the behaviour:

public class ResizeCanvasBehaviour : Behavior<Image>
{
    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.SizeChanged += AssociatedObject_SizeChanged;
        AssociatedObject.ImageOpened += AssociatedObject_ImageOpened;
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        AssociatedObject.SizeChanged -= AssociatedObject_SizeChanged;
        AssociatedObject.ImageOpened -= AssociatedObject_ImageOpened;
    }

    private void AssociatedObject_ImageOpened(object sender, RoutedEventArgs e)
    {
        BitmapSource bitmapSource = AssociatedObject.Source as BitmapSource;
        if (bitmapSource == null)
        {
            return;
        }

        AssociatedObject.Width = bitmapSource.PixelWidth;
        AssociatedObject.Height = bitmapSource.PixelHeight;

        Resize();
    }

    private void AssociatedObject_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        Resize();
    }

    public Canvas Canvas
    {
        get { return GetValue(CanvasProperty) as Canvas; }
        set { SetValue(CanvasProperty, value); }
    }

    public static readonly DependencyProperty CanvasProperty = DependencyProperty.Register(
        "Canvas",
        typeof(Canvas),
        typeof(ResizeCanvasBehaviour),
        new PropertyMetadata(null, CanvasPropertyChanged));

    private static void CanvasPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ((ResizeCanvasBehaviour)d).OnCanvasPropertyChanged();
    }

    private void OnCanvasPropertyChanged()
    {
        if (Canvas != null)
        {
            Resize();
        }
    }

    private void Resize()
    {
        if ((AssociatedObject != null) && (Canvas != null))
        {
            Canvas.Width = AssociatedObject.ActualWidth;
            Canvas.Height = AssociatedObject.ActualHeight;
        }
    }
}

To load the image do something like this. I did this in code behind for speed but ideally you should put this in a view model and then data bind the image Source property in xaml:

BitmapImage bi = new BitmapImage();
bi.UriSource = new Uri("http://farm7.static.flickr.com/6149/5942401995_a5a3fd3919_z.jpg");
TheImage.Source = bi;

Answer 2

Turns out the very minimum that I needed to do was set the Width and Height of the canvas to the PixelWidth and PixelHeight of the BitmapImage instance.

This is what Paul was doing with his solution (in a little more complicated way), but for some reason the resize event handlers would not get called when a image was loaded locally.

I had tried several different suggested solutions, but I never got the results I was wanting. This was the only solution that seemed to work.