silverlight - Keep same layout when orientation changes -


i have silverlight page have below appearance in portrait , landscape mode. essentially, there 3 images arranged in grid. big image spans 2 columns. when phone rotates, images rotate, overall layout not. small images remain close back/windows/search button , large image remains towards top of phone.

enter image description here

i have tried number of methods achieve effect, have proved unsatisfactory in 1 way or another. i'm hoping can point out i'm missing or, @ least, prevent else having waste 4 or 5 days coming same conclusion did. questions in bold:

  • the first thing tried applying rotatetransform layoutroot element , rotating -90 degrees whenever phone rotation changed landscape. had hard code height , width of layout root 800 , 400 instead of "auto" or gets drawn squished. solution worked, rotatetransform gets applied after page drawn. because drawn 400x800 image on 800x400 screen, top 200 , bottom 200 pixels aren't drawn. becomes obvious after it's rotated , (now)left , right portions missing. is there way force layout engine draw off screen pixels there after rotatetransform applied?

  • the next thing considered (but did not try) set page supportedorientations "portraitonly" , use accelerometer generate own "onorientationchanged" event , selectively rotate images 90 degrees when phone tilted landscape. determined bad idea because wrong in subtle way resulting in confusion when rotation didn't work quite same way in app in every other app. is there way have onorientationchanged event fire without automatically updating layout of grid contains elements? alternatively, there other hook can used detect phone orientation?

  • the last thing tried similar advice offered here: windows phone 7 applications - orientation change , here: http://blogs.msdn.com/b/ptorr/archive/2010/03/27/strategies-for-dealing-with-orientation-changes.aspx. solution seems bit brittle me because forces me change relative sizes of grid rows , columns in onorientationchanged event handler in xaml code. in portrait mode, first row set 5* , 2nd row set 2*. when switch landscape, rows need each set 1* , columns need set 5* , 2* respectively. alternatively, hard-code size of small images , set rows , columns auto, i'm still stuck hard coding something. since i've exhausted of other options, think solution i'm stuck with.

am missing anything, or way it?

you don't have hard code anything. need clever designing. develop applications multiple orientation support should come clever grid layout lets reposition objects way want without creating mess.

for situation consider layout:

 <grid x:name="layoutroot" background="transparent"> <grid.columndefinitions> <columndefinition width="3.5*" /> <columndefinition width="1.5*" /> <columndefinition width="2*" /> </grid.columndefinitions> <grid.rowdefinitions> <rowdefinition height="2.5*"/> <rowdefinition height="1.5*" /> <rowdefinition height="1.5*" /> <rowdefinition height="2*"/> </grid.rowdefinitions> <!--titlepanel contains name of application , page title--> <stackpanel x:name="titlepanel" margin="12,17,0,28" grid.columnspan="3" grid.rowspan="3"></stackpanel> <image name="bigsmiley" margin="8" grid.rowspan="3" grid.columnspan="3" source="big.jpg" stretch="fill"/> <image name="smallsmiley1" grid.row="3" source="smiley.jpg" stretch="fill" margin="8"/> <image name="smallsmiley2" grid.row="3" grid.column="1" source="smiley.jpg" stretch="fill" margin="8" grid.columnspan="2" /> <!--contentpanel - place additional content here--> </grid>

layout

and orientation changed method should like:

private void phoneapplicationpage_orientationchanged(object sender, orientationchangedeventargs e) { if ((e.orientation & pageorientation.portrait) == pageorientation.portrait) { grid.setrow(bigsmiley, 0); grid.setcolumn(bigsmiley, 0); grid.setcolumnspan(bigsmiley, 3); grid.setrowspan(bigsmiley, 3); grid.setrow(smallsmiley1, 3); grid.setcolumn(smallsmiley1, 0); grid.setcolumnspan(smallsmiley1, 1); grid.setrowspan(smallsmiley1, 1); grid.setrow(smallsmiley2, 3); grid.setcolumn(smallsmiley2, 1); grid.setcolumnspan(smallsmiley2, 2); grid.setrowspan(smallsmiley2, 1); } else { grid.setrow(bigsmiley, 0); grid.setcolumn(bigsmiley, 0); grid.setcolumnspan(bigsmiley, 2); grid.setrowspan(bigsmiley, 4); grid.setrow(smallsmiley1, 0); grid.setcolumn(smallsmiley1, 2); grid.setcolumnspan(smallsmiley1, 1); grid.setrowspan(smallsmiley1, 2); grid.setrow(smallsmiley2, 2); grid.setcolumn(smallsmiley2, 2); grid.setcolumnspan(smallsmiley2, 1); grid.setrowspan(smallsmiley2, 2); } }

result: result

i hope solves issue. remember, there's better design makes problems go away! :)


Comments

Post a Comment

Popular posts from this blog

javascript - backbone.js Collection.add() doesn't `construct` (`initialize`) an object -

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script> <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script> </head> <body> <button id="cmd_create_event" name="cmd_create_event" type="button">create new `event`</button> <script type="text/javascript"> var eventmodel = backbone.model.extend({ initialize : function() { console.log("`event` initialized. id: " + this.cid); this.bind("change:status", function() { console.log(this.get("status") + " value `status`"); }); this.bind("error", function(model, e...
Read more

php - Get uncommon values from two or more arrays -

is there function in php give array of uncommon values 2 or more arrays? for example: $array1 = array( "green", "red", "blue"); $array2 = array( "green", "yellow", "red"); .... $result = function_needed($array1, $array2,...); print_r($result); should give output: array("blue", "yellow", ...); use array_diff , array_merge : $result = array_merge(array_diff($array1, $array2), array_diff($array2, $array1)); here's demo. for multiple arrays, combine callback , array_reduce : function unique(&$a, $b) { return $a ? array_merge(array_diff($a, $b), array_diff($b, $a)) : $b; } $arrays = array( array('green', 'red', 'blue'), array('green', 'yellow', 'red') ); $result = array_reduce($arrays, 'unique'); and here's demo of that.
Read more

Adding duplicate array rows in Php -

i create function in php adds rows of array shared column value. so input. $test = array( array("c", 5, 6), array("c", 2, 3), array("test", 5, 6) ); and output. $testduplicatefree = array( array("c", 7, 9), array("test", 5, 6) ) ); i'm thinking function combine_duplicates($array,$col){ ... ... return $duplicatefreearray; } where $col duplicate free array. so, in case, combine_duplicates($test,0); would me desired output. this. <?php function combine_duplicates($array,$col) { $index = array(); foreach ($array $row) { $key = $row[$col]; if (!isset($index[$key])) { $index[$key] = $row; } else { ($i = 0; $i < count($row); ++$i) { if ($i != $col) { $index[$key][$i] += $row[$i]; } } } } return array_values($index); } $array = array( array("c", 5, 6), array("c", 2, 3), array("test", 5, 6) ); print_r(combine_duplicates($array, 0)); try here: http://codepad.org/mdhesqhi
Read more