Responsive Design App In WPF

In app development most of the time we ignore one concept -- that's responsive design. Responsive design doesn't mean your app fits in all screen resolutions, but it should be capable to project an element of the same size on all the different screen resolutions or screen densities. This article is all about this.

Ingredients

  1. To place every element at its place we will use <Grid>.
  2. For resizing flexibility we will use <viewbox>.
  3. Visual Studio (Optional) .//Kidding

Recipe

  1. Create a WPF app.
  2. Add <Grid> in your form

    Here is one thing we need to care about. While we are adding columns and rows in the form/window/usercontrol, we should maintain 100% width ratio.You will get a better understanding with the below code block.

    Column = 25+50+25 = 100
    Rows = 20+10+2+8+25+40 = 100

    In app development most of the time we ignore one concept that's responsive design. Responsive design doesn't mean your app fits the in all screen resolution, but it should be capable to project the element of same size on all the different screen resolutions or screen density. This article is all about this.  Ingredients  To place every element at it's place we will use <Grid />. For resizing flexibility we will use <viewbox>. Visual Studio (Optional) .//Kidding Recipe  Create a WPF app. Add <grid> in your form  Here one thing we need to care about. While we are adding columns and rows in the form/window/usercontrol, Should maintain 100% width ratio.You will get better understanding with below code block.  Column = 25+50+25 = 100 Rows = 20+10+2+8+25+40 = 100    Add <viewbox> after Grid :  This is the section which is responsible of our form elements. Ideally each viewbox can contain single element. If we have multiple elements in a same row or column need to add different viewbox for each elements.  For the positioning of elements need to mention the cell position (Row and Column).    Run the app. and test you element positioning and size by maximize or minimize the window. Can test app over various screen resolutions.Things will remain same.  For better understanding attached demo project along with this blog. Download it Run it Experience the Difference.

  3. Add <viewbox> after Grid,

    This is the section which is responsible for our form elements. Ideally each viewbox can contain a single element. If we have multiple elements in a same row or column we need to add a different viewbox for each element.

    For the positioning of elements we need to mention the cell position (Row and Column).



  4. Run the app. and test your element positioning and size by maximizing or minimizing the window. You can test the app over various screen resolutions.Things will remain the same.

    For better understanding see the attached demo project along with this blog. Download it, run it, and experience the difference.