使用 XAML 設計您的應用程式:調整大小

將您的 C#/XAML 應用程式設計為可依預期調整大小。

Windows 8 有一個非常引人注目的功能,就是能夠在畫面上同時顯示兩個或更多的應用程式。當使用者從畫面頂端向下拖曳時,可以將應用程式推向畫面左邊或右邊,如此空出空間以顯示新應用程式。您的應用程式必須為此動作做好準備,並視需要變更目前在畫面上顯示的方法或內容。

檢視中顯示一個應用程式,且留有空間可開啟和顯示第二個應用程式的畫面

如果您已經使用 XAML 格線放置控制項,在預設情況下內容看起來應該沒有問題,但是您可能希望微調一些項目。最好能夠回應相同的訊息,以及使用 Visual State Manager,如使用 XAML 設計您的應用程式:方向中所述。例如,您可能希望建立一個稱為 Narrow 的 Visual State 以隱藏一些控制項,以便將更多空間留給其他項目。方法如下。

偵測畫面大小變更

首先,將處理常式新增到 .cs 程式碼後置頁面 (如果還沒有這麼做) 以和方向變更配合使用:


        public MyPage()
        {
            this.InitializeComponent();
           
            // Add the handler
            Window.Current.SizeChanged += Current_SizeChanged;
         }
        
        void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
        {
            double width = e.Size.Width;

            // Obtain the orientation - Landscape or Portait
            string CurrentViewState = ApplicationView.GetForCurrentView().Orientation.ToString();

            // Test to see if the app is fullscreen or not
            if (ApplicationView.GetForCurrentView().IsFullScreen)
            {
                // It is, so handle Landscape or Portrait visual states as before
                VisualStateManager.GoToState(this, CurrentViewState, false);
                return;
            }

            // At this point, the screen is split, so decide if it's narrow enough
            // to require a new visual state

            if (width < 800)
                VisualStateManager.GoToState(this, "Narrow", false);
        }



我們使用這個處理常式中的第二個屬性 ApplicationView.GetForCurrentView().IsFullScreen,這個屬性會告訴我們應用程式目前是否為全螢幕。如果不是全螢幕,就必須進行分割,我們才能在寬度變成太窄時決定啟動新的視覺狀態。

支援新的視覺狀態

定義新視覺狀態的方法和之前定義直向/橫向狀態相同。在此範例中,會隱藏其中一個顯示的資訊欄位,以便多空出一些空間。


       <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ApplicationViewStates">

                <VisualState x:Name="Portrait"/>
                <VisualState x:Name="Landscape"/>
                <VisualState x:Name="Narrow">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames
          Storyboard.TargetName="TheSuperfluousColumn"
          Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
  

若要了解運作的方式,以下是畫面分割之前的應用程式:

三欄,一般大小

現在這裡是使用者將畫面一分為二後的應用程式,對於較窄的畫面不提供任何其他支援。請注意相同的內容已經被擠壓在較小的空間中。

三欄,但被擠壓

而現在透過只顯示最重要的資訊,所有項目就不會那麼擁擠。

一欄,且不擠壓

寬度下限

您的應用程式可以指定寬度下限值。預設值是 500。如果您的檢視小於大小下限,應用程式隨即放棄 - 基本上就表示「我拒絕在這種條件下運作!」,然後暫停。這個值最小可變更成 320,讓您的應用程式在畫面一側保留一個細欄 – 對使用者來說,這對於使用者拿來放置經常存在的公用程式可能會很有用。

重要  應用程式寬度大小調整取決於使用者:您無法以程式設計的方式強制發生。

相關主題

使用 XAML 設計您的應用程式:格線
使用 XAML 設計您的應用程式:方向
視窗大小以及調整成螢幕大小的指導方針 (Windows 市集應用程式)
快速入門:針對不同視窗大小設計應用程式
將視窗大小調整為高窄格式配置的指導方針
快速入門:定義應用程式配置 (使用 JavaScript 和 HTML 的 Windows 市集應用程式)

 

 

顯示:
© 2015 Microsoft