c# - Need images with lower resolution "stretched" to screen size -
i making video game using c# wpf. trying implement now, add additional resolutions.
my default monitor resolution 1600x900. using same size game's window , grids.
now, want add more resolutions. found easy way change values in code, problem on topic.
that's how game looks on 1600x900. 
then, trying set resolution 800x600.
what want achieve, make images resolution lower 1 set in windows, "stretched" , still cover screen.
that's get. game takes part of screen, , white background on remaining part. 
the stretched window, trying achieve looks that. create image stretched previous image in graphics editor. want game itself. 
if @ first , third screens @ full size, you'll notice different, , lower image has worse detail.
how can window or grid has resolution lower 1 in windows, still cover full screen?
update: code 1 of game screens - main menu
<grid x:name="areamenu" panel.zindex="1010" horizontalalignment="left" height="786" margin="0,-813,0,0" verticalalignment="top" width="1366" isvisiblechanged="areamenu_isvisiblechanged"> <grid.background> <imagebrush imagesource="resources/images/interface/main menu/menu_main.jpg"/> </grid.background> <grid.rowdefinitions> <rowdefinition/> <rowdefinition height="0*"/> </grid.rowdefinitions> <grid x:name="areaload" panel.zindex="1011" horizontalalignment="left" height="245" margin="11,-556,0,0" verticalalignment="top" width="1340" isvisiblechanged="areaload_isvisiblechanged"> <grid.background> <imagebrush imagesource="resources/images/interface/main menu/img_load_game.jpg" stretch="uniform"/> </grid.background> <button x:name="btnload1" panel.zindex="100" horizontalalignment="left" height="98" verticalalignment="top" width="170" click="btnload1_click" background="{x:null}" borderbrush="{x:null}" foreground="{x:null}" mouseenter="btninventory1_mouseenter" mouseleave="mouseleaveanyobject" margin="45,133,0,0"> <button.template> <controltemplate> <image source="resources/images/interface/blank.png" stretch="fill" margin="12,0,6,0"/> </controltemplate> </button.template> </button> <button x:name="btnload2" panel.zindex="100" horizontalalignment="left" height="93" verticalalignment="top" width="166" click="btnload2_click" background="{x:null}" borderbrush="{x:null}" foreground="{x:null}" mouseenter="btninventory1_mouseenter" mouseleave="mouseleaveanyobject" margin="263,133,0,0"> <button.template> <controltemplate> <image source="resources/images/interface/blank.png" stretch="fill" margin="12,0,6,0"/> </controltemplate> </button.template> </button> <button x:name="btnload3" panel.zindex="100" horizontalalignment="left" height="103" verticalalignment="top" width="170" click="btnload3_click" background="{x:null}" borderbrush="{x:null}" foreground="{x:null}" mouseenter="btninventory1_mouseenter" mouseleave="mouseleaveanyobject" margin="480,133,0,0"> <button.template> <controltemplate> <image source="resources/images/interface/blank.png" stretch="fill" margin="12,0,6,0"/> </controltemplate> </button.template> </button> <image x:name="imgload1" horizontalalignment="left" height="101" margin="44,144,0,0" verticalalignment="top" width="172" source="resources/images/interface/default.bmp" stretch="fill"/> <image x:name="imgload2" horizontalalignment="left" height="101" margin="262,132,0,0" verticalalignment="top" width="172" source="resources/images/interface/default.bmp" stretch="fill"/> <image x:name="imgload3" horizontalalignment="left" height="101" margin="477,132,0,0" verticalalignment="top" width="172" source="resources/images/interface/default.bmp" stretch="fill"/> <image x:name="imgload4" horizontalalignment="left" height="101" margin="694,132,0,0" verticalalignment="top" width="172" source="resources/images/interface/default.bmp" stretch="fill"/> <image x:name="imgload5" horizontalalignment="left" height="101" margin="913,132,0,0" verticalalignment="top" width="172" source="resources/images/interface/default.bmp" stretch="fill"/> <button x:name="btnload4" panel.zindex="100" horizontalalignment="left" height="103" verticalalignment="top" width="166" background="{x:null}" borderbrush="{x:null}" foreground="{x:null}" mouseenter="btninventory1_mouseenter" mouseleave="mouseleaveanyobject" margin="695,133,0,0" click="btnload4_click"> <button.template> <controltemplate> <image source="resources/images/interface/blank.png" stretch="fill" margin="12,0,6,0"/> </controltemplate> </button.template> </button> <button x:name="btnload5" panel.zindex="100" horizontalalignment="left" height="98" verticalalignment="top" width="166" background="{x:null}" borderbrush="{x:null}" foreground="{x:null}" mouseenter="btninventory1_mouseenter" mouseleave="mouseleaveanyobject" margin="914,133,0,0" click="btnload5_click"> <button.template> <controltemplate> <image source="resources/images/interface/blank.png" stretch="fill" margin="12,0,6,0"/> </controltemplate> </button.template> </button> <button x:name="btnloadcancel" panel.zindex="100" horizontalalignment="left" height="86" verticalalignment="top" width="162" background="{x:null}" borderbrush="{x:null}" foreground="{x:null}" mouseenter="btninventory1_mouseenter" mouseleave="mouseleaveanyobject" margin="1131,139,0,0" click="btnloadcancel_click"> <button.template> <controltemplate> <image source="resources/images/interface/blank.png" stretch="fill" margin="12,0,6,0"/> </controltemplate> </button.template> </button> </grid> <grid x:name="areasave" panel.zindex="1011" horizontalalignment="left" height="245" margin="11,-285,0,0" verticalalignment="top" width="1340" isvisiblechanged="areasave_isvisiblechanged"> <grid.background> <imagebrush imagesource="resources/images/interface/main menu/img_save_game.jpg" stretch="uniform"/> </grid.background> <button x:name="btnsaveempty1" panel.zindex="100" horizontalalignment="left" height="93" verticalalignment="top" width="166" click="btnsave1_click" mouseenter="btninventory1_mouseenter" mouseleave="mouseleaveanyobject" margin="47,133,0,0"> <button.template> <controltemplate> <image source="resources/images/interface/blank.png" stretch="fill" margin="12,0,6,0"/> </controltemplate> </button.template> </button> <button x:name="btnsaveempty2" panel.zindex="100" horizontalalignment="left" height="93" verticalalignment="top" width="159" background="{x:null}" borderbrush="{x:null}" foreground="{x:null}" mouseenter="btninventory1_mouseenter" mouseleave="mouseleaveanyobject" margin="270,137,0,0" click="btnsave2_click"> <button.template> <controltemplate> <image source="resources/images/interface/blank.png" stretch="fill" margin="12,0,6,0"/> </controltemplate> </button.template> </button> <button x:name="btnsaveempty3" panel.zindex="100" horizontalalignment="left" height="93" verticalalignment="top" width="166" background="{x:null}" borderbrush="{x:null}" foreground="{x:null}" mouseenter="btninventory1_mouseenter" mouseleave="mouseleaveanyobject" margin="480,139,0,0" click="btnsave3_click"> <button.template> <controltemplate> <image source="resources/images/interface/blank.png" stretch="fill" margin="12,0,6,0"/> </controltemplate> </button.template> </button> <button x:name="btnsaveempty4" panel.zindex="100" horizontalalignment="left" height="93" verticalalignment="top" width="164" background="{x:null}" borderbrush="{x:null}" foreground="{x:null}" mouseenter="btninventory1_mouseenter" mouseleave="mouseleaveanyobject" margin="700,133,0,0" click="btnsave4_click"> <button.template> <controltemplate> <image source="resources/images/interface/blank.png" stretch="fill" margin="12,0,6,0"/> </controltemplate> </button.template> </button> <button x:name="btnsaveempty5" panel.zindex="100" horizontalalignment="left" height="93" verticalalignment="top" width="164" background="{x:null}" borderbrush="{x:null}" foreground="{x:null}" mouseenter="btninventory1_mouseenter" mouseleave="mouseleaveanyobject" margin="917,139,0,0" click="btnsaveempty5_click"> <button.template> <controltemplate> <image source="resources/images/interface/blank.png" stretch="fill" margin="12,0,6,0"/> </controltemplate> </button.template> </button> <image x:name="imgsave1" horizontalalignment="left" height="101" margin="43,143,0,0" verticalalignment="top" width="172" source="resources/images/interface/default.bmp" stretch="fill"/> <image x:name="imgsave2" horizontalalignment="left" height="101" margin="263,131,0,0" verticalalignment="top" width="172" source="resources/images/interface/default.bmp" stretch="fill"/> <image x:name="imgsave3" horizontalalignment="left" height="101" margin="478,131,0,0" verticalalignment="top" width="172" source="resources/images/interface/default.bmp" stretch="fill"/> <image x:name="imgsave4" horizontalalignment="left" height="101" margin="693,131,0,0" verticalalignment="top" width="173" source="resources/images/interface/default.bmp" stretch="fill"/> <image x:name="imgsave5" horizontalalignment="left" height="101" margin="913,131,0,0" verticalalignment="top" width="173" source="resources/images/interface/default.bmp" stretch="fill"/> <button x:name="btnsavecancel" panel.zindex="100" horizontalalignment="left" height="86" verticalalignment="top" width="162" background="{x:null}" borderbrush="{x:null}" foreground="{x:null}" mouseenter="btninventory1_mouseenter" mouseleave="mouseleaveanyobject" margin="1131,139,0,0" click="btnsavecancel_click"> <button.template> <controltemplate> <image source="resources/images/interface/blank.png" stretch="fill" margin="12,0,6,0"/> </controltemplate> </button.template> </button> </grid> <image x:name="imgresume" horizontalalignment="left" height="215" margin="469,105,0,0" verticalalignment="top" width="383" source="resources/images/interface/main menu/menu_resume_g.png"/> <image x:name="imgsave" horizontalalignment="left" height="215" margin="469,205,0,0" verticalalignment="top" width="383" source="resources/images/interface/main menu/menu_save_g.png"/> <image x:name="imgload" horizontalalignment="left" height="215" margin="469,306,0,0" verticalalignment="top" width="383" source="resources/images/interface/main menu/menu_load_g.png"/> <image x:name="imgoptions" horizontalalignment="left" height="215" margin="469,406,0,0" verticalalignment="top" width="383" source="resources/images/interface/main menu/menu_options.png"/> <image x:name="imgcredits" horizontalalignment="left" height="215" margin="469,506,0,0" verticalalignment="top" width="383" source="resources/images/interface/main menu/menu_credits.png"/> <image x:name="imgquit" horizontalalignment="left" height="215" margin="469,587,0,-11" verticalalignment="top" width="383" source="resources/images/interface/main menu/menu_quit.png" grid.rowspan="2"/> <button x:name="btnresume_game" panel.zindex="100" horizontalalignment="left" height="72" margin="534,180,0,0" verticalalignment="top" width="253" background="{x:null}" borderbrush="{x:null}" foreground="{x:null}" click="btnresume_game_click"> <button.template> <controltemplate> <image source="resources/images/interface/blank.png" stretch="fill" margin="12,0,6,0"/> </controltemplate> </button.template> </button> <button x:name="btnsave_game" panel.zindex="100" horizontalalignment="left" height="72" margin="534,280,0,0" verticalalignment="top" width="253" background="{x:null}" borderbrush="{x:null}" foreground="{x:null}" click="btnsave_game_click"> <button.template> <controltemplate> <image source="resources/images/interface/blank.png" stretch="fill" margin="12,0,6,0"/> </controltemplate> </button.template> </button> <button x:name="btnload_game" panel.zindex="100" horizontalalignment="left" height="72" margin="534,379,0,0" verticalalignment="top" width="253" background="{x:null}" borderbrush="{x:null}" foreground="{x:null}" click="btnload_game_click"> <button.template> <controltemplate> <image source="resources/images/interface/blank.png" stretch="fill" margin="12,0,6,0"/> </controltemplate> </button.template> </button> <button x:name="btnoptions" panel.zindex="100" horizontalalignment="left" height="72" margin="534,479,0,0" verticalalignment="top" width="253" background="{x:null}" borderbrush="{x:null}" foreground="{x:null}" click="btnoptions_click"> <button.template> <controltemplate> <image source="resources/images/interface/blank.png" stretch="fill" margin="12,0,6,0"/> </controltemplate> </button.template> </button> <button x:name="btncredits" panel.zindex="100" horizontalalignment="left" height="72" margin="534,581,0,0" verticalalignment="top" width="253" background="{x:null}" borderbrush="{x:null}" foreground="{x:null}" click="btncredits_click"> <button.template> <controltemplate> <image source="resources/images/interface/blank.png" stretch="fill" margin="12,0,6,0"/> </controltemplate> </button.template> </button> <button x:name="btnquit" panel.zindex="100" horizontalalignment="left" height="72" margin="534,679,0,0" verticalalignment="top" width="253" background="{x:null}" borderbrush="{x:null}" foreground="{x:null}" click="btnquit_click"> <button.template> <controltemplate> <image source="resources/images/interface/blank.png" stretch="fill" margin="12,0,6,0"/> </controltemplate> </button.template> </button> <mediaelement x:name="mustheme3" panel.zindex="1001" horizontalalignment="left" height="47" margin="1290,21,0,0" verticalalignment="top" width="50" source="resources/music/theme_3.wav" loadedbehavior="manual" rendertransformorigin="3.464,0.571" mediaopened="anysoundstart" mediaended="mustheme3_mediaended"/> <image x:name="imgnew" horizontalalignment="left" height="215" margin="469,105,0,0" verticalalignment="top" width="383" source="resources/images/interface/main menu/menu_new_g.png" d:ishidden="true"/> <button x:name="btnnew_game" panel.zindex="200" horizontalalignment="left" height="72" margin="534,180,0,0" verticalalignment="top" width="253" background="{x:null}" borderbrush="{x:null}" foreground="{x:null}" click="btnnew_game_click_1"> <button.template> <controltemplate> <image source="resources/images/interface/blank.png" stretch="fill" margin="12,0,6,0"/> </controltemplate> </button.template> </button> <image x:name="imgnew_pressed" horizontalalignment="left" height="215" margin="469,107,0,0" verticalalignment="top" width="383" source="resources/images/interface/main menu/menu_new_g.png" d:ishidden="true" visibility="hidden"/> <grid x:name="areagamesaved" panel.zindex="1011" horizontalalignment="left" height="245" margin="11,-839,0,0" verticalalignment="top" width="1340" isvisiblechanged="areaload_isvisiblechanged"> <grid.background> <imagebrush imagesource="resources/images/interface/main menu/img_game_saved.jpg" stretch="uniform"/> </grid.background> <image x:name="imgbacksaved" horizontalalignment="left" height="215" margin="478,76,0,-53" verticalalignment="top" width="383" source="resources/images/interface/main menu/img_back.png"/> <button x:name="btnbacksaved" panel.zindex="100" horizontalalignment="left" height="58" verticalalignment="top" width="253" background="{x:null}" borderbrush="{x:null}" foreground="{x:null}" mouseenter="btninventory1_mouseenter" mouseleave="mouseleaveanyobject" margin="547,149,0,0" click="btnbacksaved_click"> <button.template> <controltemplate> <image source="resources/images/interface/blank.png" stretch="fill" margin="12,0,6,0"/> </controltemplate> </button.template> </button> </grid> <grid x:name="areanotavailable" panel.zindex="1011" horizontalalignment="left" height="245" margin="11,-1114,0,0" verticalalignment="top" width="1340" isvisiblechanged="areaload_isvisiblechanged"> <grid.background> <imagebrush imagesource="resources/images/interface/main menu/img_not_available_yet.jpg" stretch="uniform"/> </grid.background> <image x:name="imgbacknotavailable" horizontalalignment="left" height="215" margin="478,76,0,-53" verticalalignment="top" width="383" source="resources/images/interface/main menu/img_back.png"/> <button x:name="btnbacknotavailable" panel.zindex="100" horizontalalignment="left" height="58" verticalalignment="top" width="253" background="{x:null}" borderbrush="{x:null}" foreground="{x:null}" mouseenter="btninventory1_mouseenter" mouseleave="mouseleaveanyobject" margin="547,149,0,0" click="btnbacknotavailable_click"> <button.template> <controltemplate> <image source="resources/images/interface/blank.png" stretch="fill" margin="12,0,6,0"/> </controltemplate> </button.template> </button> </grid> <label content="0.7.1" horizontalalignment="left" height="46" margin="1258,724,0,0" verticalalignment="top" width="53" fontsize="24" foreground="#fffbeeee"/> <button x:name="btnresolution" content="button" horizontalalignment="left" height="104" margin="1040,644,0,0" verticalalignment="top" width="181" click="btnresolution_click"/> </grid> xaml @ start:
<window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:ignorable="d" x:name="wdwmain" x:class="realityincognita.mainwindow" height="900" width="1600" resizemode="noresize" windowstate="maximized" cursor="cross" windowstyle="none" loaded="wdwmain_loaded"> <grid x:name="areacontainer" horizontalalignment="left" height="900" verticalalignment="top" width="1600"> how looks now:
how should look:
thank you, evgenie
just remove horizontalalignment="left" height="600" verticalalignment="top" width="800" grid grid can stretch whole window,
if need these values use on window itself
edit: okay, see you're setting height , width each element(like buttons) inside grid , , you're setting margin move them correct place, not work different resolutions. lets set window width 800 , button set 200. if change window width 1024, change not reflected automatically buttons, 200 (and same goes margin)
the correct solution rewrite xaml code in correct way, (you use grids grid.columnsdefinition/rowdefinition, stackpanels ..etc) without setting values in pixels.
but if you're in hurry can put elements in viewbox:
<window .... <viewbox stretch="fill"> <grid x:name="areacontainer" .... </grid> </viewbox> </window> now note using viewbox stretch content based on viewbox's width , height (so did in graphics editor). note viewbox should avoided it's expensive in terms of resources
Comments
Post a Comment