WPF adaptive screen Layout

 

In a desktop application, if the size of the form changes, and the size of the content in the form remains the same, the blank background color is different from the desktop background, which will become very ugly and the user experience is poor, one solution to this problem is adaptive screen resolution. The following describes how to adapt to the screen resolution. First, let's take a look at the effect,

Figure 1-initial screen size

Figure 2-Full Screen

The container control uses DockPanel to set the LastChildFill attribute to True.

The container control contains three controls. The top-level menu control must be noted that the menu attribute is set to DockPanel. dock = "Top" VerticalAlignment = "Top"; put a viewbox in the middle, set the viewbox attribute: Stretch = "Fill"; put a StatusBar at the bottom, and set the StatusBar attribute to DockPanel. dock = "Bottom" Height = "20" verticalignment = "Bottom". In this way, the outer environment of the adaptive resolution is changed and the content can be placed in the viewbox. The Code is as follows,

 1 <DockPanel LastChildFill="True" > 2         <Menu DockPanel.Dock="Top" VerticalAlignment="Top" ></Menu> 3         <Viewbox Stretch="Fill" > 4  5             <Canvas HorizontalAlignment="Left" VerticalAlignment="Stretch" Background="#00A4C3EB" Width="1024" Height="630" > 6                  7                  8             </Canvas> 9             10         </Viewbox>11         <StatusBar DockPanel.Dock="Bottom" Height="20" VerticalAlignment="Bottom"></StatusBar>12     </DockPanel>