如何在 Windows 8 App 中，使用 XAML 做到 Responsive 響應式 設計

現在一般網頁開發，大多需要具備Responsive Web Design (RWD) 響應式網頁設計，也就是，能自動針對不同 size 的裝置調整網頁最佳的呈現方式，讓使用者操作經驗更好。

若我們在進行 C# / XAML 的 Windows Phone App 開發的時候，也希望我們的頁面能夠根據手機的轉向，自動進行調整，不需要任何的 [後置程式碼] (Code Behind) C# 程式碼來支援，也就是不需要透過任何的事件來呼叫與執行任何 C# 程式碼，這樣的需求，我們應該要如何做到呢?

這樣的問題是許多第一次接觸 Windows Phone App 的開發者所必定會遇到的問題，讓我們來看看底下的範例說明，在這個範例中，我們有兩個按鈕與一個文字要顯示在同一行中，當手機的轉向是直式的時候，會呈現如下圖的樣貌；這兩個按鈕分別要存在於左右兩邊，文字則需要顯示在兩個按鈕之間，而且中間的文字需要依據當時手機解析度，自動調整最大寬度與高度之可以最多顯示文字。

若手機轉個90度，上述需求需要同時存在，不過，在橫式頁面上，文字可以顯示的寬度會變得更大，而且可以看到的文字字數應該要更多，如同下圖所顯示。

這樣的需求真的可以做到嗎? 我們來看看這個頁面的 XAML 定義。

<!--LayoutRoot 是放置所有頁面的根資料格-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
 
        <!--TitlePanel 包含應用程式的名稱和頁面標題-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="我的應用程式" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="頁面名稱" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>
 
        <!--ContentPanel - 其他內容置於此-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <!--在這使用 Grid 來將這三個控制項定義在-->
            <Grid Height="100" VerticalAlignment="Top" >
                <!--左邊的按鈕-->
                <Button HorizontalAlignment="Left">Add</Button>
 
                <!--中間的文字-->
                <TextBlock Text="這是要 顯示的 文字內容 這是要 顯示的 文字內容 這是要 顯示的 文字內容 這是要 顯示的 文字內容 這是要 顯示的 文字內容 這是要 顯示的 文字內容 " Margin="100,0,100,0" TextWrapping="Wrap"/>
 
                <!--右邊的按鈕-->
                <Button HorizontalAlignment="Right">Add</Button>
            </Grid>
        </Grid>
 
    </Grid>

我們將這三個控制項使用 Grid 面板(Panel)定義在其裡面，並且記得：
左邊的按鈕
需要使用 HorizontalAlignment="Left"，設定該按鈕需要往左對其

右邊的按鈕
需要使用 HorizontalAlignment="Right" ，設定該按鈕需要往右對其

中間的文字
請使用 Margin="100,0,100,0" 設定左右的邊界各為100，目的是要保留文字的左右顯示邊界，不要蓋到按鈕；接著在 TextBlock 控制向上設定屬性 TextWrapping="Wrap" ，讓 TextBlock 根據當時可用的空間，顯示出最多的文字。

這樣就可以做到 [響應式] (Responsive) 的 Windows Phone App 頁面設計技巧了。

若每次要測試手機轉向 直式 / 橫式 的執行結果，都要透過執行程式才能夠看到最後結果，那麼，您對於 Windows Phone 開發工具必定不是十分孰悉，記得這句話，若是可以在設計模式下就可以看到的結果，就要讓您的設計內容可以於設計模式下看到每個頁面的最後執行結果，不需要等到執行時期才能夠看到。(也許您會問說，這樣會有問題，有些頁面上面有許多控制項，裡面的資料需要等到執行時期才能夠透過 C# 程式透過本地檔案或者從網路抓取才能夠讀取出來，並且顯示在頁面上，例如，圖片檔案，JSON內容；不用擔心，您只需要學會設計時期的範例資料的功能，就可以讓您的App的每個頁面，在設計時期的時候，模擬出需要再執行時期才能夠看到的資料，這樣不但可以加入您的程式開發時程，而且可以讓您在設計時期，就可以知道未來執行後的每個頁面真實的樣貌，我會另外寫篇文章告訴大家如何做到這樣的需求)

請在您的 Visual Studio (或者 Blend (這是個好東西，想要成為 Windows Phone 開發專家，一定要學會 Blend) )，使用 [裝置] 視窗來調整您設計時期的頁面螢幕轉向，如下圖所示的紅色方框，左邊的圖示就是讓您的設計時期的手機螢幕轉向成為橫式，而右邊的圖示，就是可以將您設計時期的頁面轉向成為直式。