Render Bitmap in UWP with MVVM

Question

In my code behind I used to render the bitmap from my grid with RenderTargetBitmap.

var renderBitmap = new RenderTargetBitmap();
await renderBitmap.RenderAsync(UIElement);

I want to use the MVVM pattern but now the RenderTargetBitmap class does not work anymore.

Now I'm trying to use the WinRT XAML Toolkit - Composition

var gridBitmap = await WriteableBitmapRenderExtensions.Render(Grid);

but then I get this error: Message "Unable to expand length of this stream beyond its capacity." string

Is there a other way to render this in MVVM? Maybe with SharpDX? Or Iam doing anything wrong?

This is actually somewhat of an ideological/philosophical question if you consider the Bitmap data to be a "view" or not. Ideally we'd know more about the nature of your application. — Dai, Mar 21 '18 at 06:09
Also, note that MVVM does not mean that you should never use Code-behind. There is nothing wrong with using code-behind logic - it's just that the code-behind logic should only be concerned with "the view" and nothing else, like business rules or database queries, for example - so performing operations on bitmaps in your code-behind may be totally correct for your application. — Dai, Mar 21 '18 at 06:10

score 0 · Answer 1 · answered Mar 21 '18 at 06:12

The problem here is that rendering a UI element into a bitmap is really not a task for view model, as it is very View-specific. In this case then I would see no harm in putting this code in the page's code behind and making it possible to trigger this method from the view-model.

Depending on the MVVM framework you are using, you could trigger the function in different ways. First would be to make the page implement an interface like IRenderGrid with this one method, then add a new method to the view-model that will take IRenderGrid as parameter and store the instance for later use, and then in OnNavigatedTo of the page call this view model method.

interface IRenderGrid
{
   Bitmap RenderGrid();
}

class MainViewModel
{
   ...

   private IRenderGrid _renderGrid;
   public void RegisterRenderGrid( IRenderGrid renderGrid )
   {
       _renderGrid = renderGrid;
   }
}

class MainPage : Page, IRenderGrid
{
   ...   

   protected override void OnNavigatedTo(NavigationEventArgs e)
   {
       base.OnNavigatedTo(e);
       var viewModel = DataContext as MainViewModel;//get the view model
       viewModel.RegisterRenderGrid( this );
   }

   public Bitmap RenderGrid()
   {
       var renderBitmap = new RenderTargetBitmap();
       await renderBitmap.RenderAsync(Grid);
   }
}

Of course the problem is that if your view models reside in a different assembly, you will not have access to Bitmap there, so you will have to wrap it in some custom type.

Alternative approach to triggering the page's method would be to use a messenger, which many MVVM frameworks offer. In such case you would subscribe to a trigger message in the view and react to such message by executing the rendering and then pass the result to the view model either with another message or through a public method.

Thank you. I already thought about it. I dont use a framework I wrote the pattern by hand. I will try your code today! — Agredo, Mar 21 '18 at 14:40

Render Bitmap in UWP with MVVM

1 Answers1