locked
UI That Fits All Screen Sizes RRS feed

  • Question

  • Hi,

    I am looking for some help on what the best practices are for creating a UI which fits all screen sizes. I've been searching online for some information about this but it seems very difficult to collect information about this as there doesn't seem to be any kind of general answer.

    I am creating a UI which is going to have draggable tabs (the tabs are going to be attached to panels) which can be dragged around the interface and docked in certain places. There will be a menu header as well very generic (File, Edit, etc).

    I've been reading and watching some videos on how to master the Grid element and was wondering if this would be the best element to use, I am guessing I could use it as intended and split up my screen in to it's interface sections and work within those grid definitions to place my other elements.

    Also I wanted to know a little bit more about the window width and height, if I set those values to a specific width and height what would they be used for? Would that be the size of my window when the window isn't maximized to the users screen size? How would I make my window fit all screen sizes without covering the taskbar? I tried System.Windows.SystemParameters.PrimaryScreenWidth and same for the height too, I put this in my code behind under the Initialize() method within my MainWindow.cs and I can still see that the window overlaps behind the taskbar and doesn't line up with the taskbar.



    Tuesday, November 1, 2016 6:47 PM

Answers

  • >>I've been reading and watching some videos on how to master the Grid element and was wondering if this would be the best element to use, I am guessing I could use it as intended and split up my screen in to it's interface sections and work within those grid definitions to place my other elements.

    You could use a Grid. Which panel to use depends on your requirements. Different panels have different characteristics. Please refer to the following page for more information about the different panels that are available in WPF: https://www.msdn.microsoft.com/en-us/library/ms754152(v=vs.110).aspx. If you want your panel's child element to stretch to fill the entire available space you should avoid using a StackPanel and a Canvas. Please refer to the link above for more informtation.

    >>Also I wanted to know a little bit more about the window width and height, if I set those values to a specific width and height what would they be used for?

    Then the element will get an explicit width and height. In general WPF elements stretch to fit the entire available space if you don't specify an explicit size by setting the Width and Height properties. A top-level window always have an explicit width though but you could maximize the window by settings its WindowState property to Maximized:

    <Window x:Class="WpfApplication1.MainWindow"
            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"
            Title="MainWindow" Height="350" Width="525" WindowState="Maximized">

    Then it will fill the available screen space by default, regardless of the size of the screen.

    >>Would that be the size of my window when the window isn't maximized to the users screen size?

    The size specified by the Width and Height properties or the previous size of the window (if the user has resized it).

    There is no explicit "magic" size that works for all screen resolutions if that's what you are looking for but you could use the System.Windows.SystemParameters.PrimaryScreenWidth and System.Windows.SystemParameters.PrimaryScreenWidth to calculate an appropriate window size based on the current screen size. Please refer to the following link for an example of how to center the window on the screen: http://stackoverflow.com/questions/4019831/how-do-you-center-your-main-window-in-wpf.

    >> I tried System.Windows.SystemParameters.PrimaryScreenWidth and same for the height too, I put this in my code behind under the Initialize() method within my MainWindow.cs and I can still see that the window overlaps behind the taskbar and doesn't line up with the taskbar.

    Then you should probably try to decrease the size of the window and/or maximize it. Please upload a reproducible sample of your issue to OneDrive and post the link to it here if you need any further help.
    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    Tuesday, November 1, 2016 9:28 PM