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
   
   
   
   
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.