WPF布局之讓你的控件隨着窗口等比放大縮小，適應多分辨率滿屏填充應用

　　一直以來，我們設計windows應用程序，都是將控件的尺寸定好，無論窗體大小怎么變，都不會改變，這樣的設計對於一般的應用程序來說是沒有問題的，但是對於一些比較特殊的應用，比如有背景圖片的，需要鋪面整個屏幕，由於存在多種不同的分辨率，所以會出現布局混亂的情況。今天我們來看看WPF中如何讓我們的控件也隨着分辨率放大縮小。下面來寫一個例子看看效果吧~

 

 一、普通布局中的問題

 　　這里我們寫一個簡單的頁面，新建WPF項目，在MainWindow里面添加按鈕，如下圖：

這個頁面很簡單，只有三個按鈕，我們想的是左上角和右下角有兩個按鈕，中間有一個大的按鈕，現在顯示是沒有問題的，那么我們通過改變按鈕大小來模擬分辨率變化，來看看會變成什么樣子，如圖：

按鈕的位置都變了，當然這里你會說，我們可以通過修改布局來讓按鈕仍然顯示在指定的位置，但是當用戶屏幕分辨率過小時呢？會導致某些控件顯示不出來。如下圖：

 

 二、問題的解決辦法

 　　針對上面的問題，我們來看看如何布局，來解決上面的問題，下面我們修改布局代碼如下，使用canvas布局：

<Window x:Class="布局篇.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Viewbox Stretch="Fill">
        <Canvas Width="520" Height="320">
            <Button Content="Button" Canvas.Left="10" Canvas.Top="10" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75"/>
            <Button Content="Button" Canvas.Left="435" Canvas.Top="288" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75"/>
            <Button Content="Button" Canvas.Left="164" Canvas.Top="96" HorizontalAlignment="Left" VerticalAlignment="Top" Width="182" Height="119"/>

        </Canvas>
    </Viewbox>
</Window>

主要部分是我們在Canvas最外層添加了ViewBox，由於ViewBox的stretch屬性默認是Uniform，所以我們要設置為Fill,這樣能保正是填充滿窗體，canvas的寬度和高度必須設定，否則顯示不出來。顯示效果如下：

縮小時的顯示效果

放大時的顯示效果，雖然空間有些變形，但是布局沒有亂。一般情況下顯示器的比例都是有標准的，變形不會這么嚴重的。

 

 好了，這篇博文內容很少很簡單，但相信對於一些朋友是有幫助的！

 

 作者：雲霏霏

QQ交流群：243633526

 博客地址：http://www.cnblogs.com/yunfeifei/

 聲明：本博客原創文字只代表本人工作中在某一時間內總結的觀點或結論，與本人所在單位沒有直接利益關系。非商業，未授權，貼子請以現狀保留，轉載時必須保留此段聲明，且在文章頁面明顯位置給出原文連接。

如果大家感覺我的博文對大家有幫助，請推薦支持一把，給我寫作的動力。