uwp - InkCanvas Strokes are not rendered with proper bounds when switching PC -

i have 1 uwp app using uwp inkcanvas load , save ink buttons. made draw app on 1 laptop, saved ink gif (+embedded isf) , sent gif file laptop smaller screen try out.

when opening ink same app on other laptop, draw clipped @ boundaries, if not fit screen, arguably due laptop's smaller screen size.

i tried resize inkcanvas whole encapsulating in scrollviewer draw follows inkcanvas zooming, hence draw remains clipped @ boundaries. same render transform on inkcanvas. tried copy paste methods of strokecontainer when loading ink. not work , furthermore find bulky 1 needs loop through strokes them selected , copy pasted.

i looking @ way automatically resize inkcanvas (preferred) or strokes such drawing appears entirely on inkcanvas, regardless of size of laptop's screen. expecting happen default not.

although code use simple, provide start:

<grid background="{themeresource applicationpagebackgroundthemebrush}">     <grid.rowdefinitions>         <rowdefinition height="auto" />         <rowdefinition height="*" />     </grid.rowdefinitions>     <grid background="white" grid.row="1">          <inkcanvas x:name="inkcanvas"/>     </grid>      <stackpanel>             <button content="load" click="loadbutton_click"/>             <button content="save" click="savebutton_click"/>     </stackpanel> </grid>       private async void loadbutton_click(object sender, routedeventargs e)     {         fileopenpicker openpicker = new fileopenpicker();         openpicker.filetypefilter.clear();         openpicker.filetypefilter.add(".isf");         openpicker.filetypefilter.add(".gif");          openpicker.suggestedstartlocation = pickerlocationid.pictureslibrary;          storagefile file = await openpicker.picksinglefileasync();          if (file != null)         {             irandomaccessstream stream = await file.openasync(fileaccessmode.read);              using (var inputstream = stream.getinputstreamat(0))             {                 await inkcanvas.inkpresenter.strokecontainer.loadasync(inputstream);             }             stream.dispose();       }     } 

the strokecontainer.saveasync() method create gif. not sure how preserves ink stroke data, seems point point. since inkcanvas stretching based on parent grid, final bounds different screen screen, , in resized uwp window.

so, when reload stroke data, put points generated. not transform you. raw data.

if want data appear in different location, can apply transformation on points. here's quick sample of how shrink data 50%:

var container = inkcanvas.inkpresenter.strokecontainer; var strokes = container.getstrokes(); var bounds = container.boundingrect; var center = new vector2((float)bounds.left, (float)bounds.top); var transform = matrix3x2.createscale(.5f, .5f, center);  foreach (var stroke in strokes) {     stroke.pointtransform *= transform; } 

you put snippet of code after await container.loadasync(inputstream).

you need decide output. depend on user experience want. if want scale output, use snippet above. if want move it, use matrix3x2.createtranslation(...).