WPF佈局之讓你的控制元件隨著視窗等比放大縮小，適應多解析度滿屏填充應用

雲霏霏發表於2015-04-15
控制元件

　　一直以來，我們設計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/

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

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

 

相關文章