UWP開發-自適應布局

了解css的人知道，對於不同的屏幕尺寸，css使用一種名為媒體查詢的東東來適用不同的屏幕尺寸，以提升用戶體驗。當用戶使用PC等大屏幕的設備時，網頁將呈現一種布局形式；而當用戶使用手機等小屏幕設備時，布局將發生變化，比如將原來的兩列布局變為一列。

就是這個！

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}

參考鏈接：http://zh.learnlayout.com/media-queries.html

　　　　　https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

當然，作為宣稱跨設備的UWP，也有對應的機制，這就是UWP的自適應布局。

UWP的自適應布局十分簡單，只在XAML里面寫就好，使得我們再也不會因為用戶使用手機時，某些UI元素被掩蓋或者變得異常丑陋，或者在C#里面處理這些破事啦。

一個例子：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualState x:Name="Narrow">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="img.Width" Value="40"/>
                        <Setter Target="tb.FontSize" Value="14"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Wide">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="800"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="img.Width" Value="80"/>
                        <Setter Target="tb.FontSize" Value="24"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Image x:Name="img"
               Source="Assets/logo.png"
               Grid.Row="1"/>
        <TextBlock x:Name="tb"
                   Grid.Row="2"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   TextWrapping="Wrap"
                   Text="微軟開發者峰會明天就開了，土鱉只能看直播了"/>
    </Grid>

運行結果：

（大屏幕）

 

 

 

（小屏幕）

解釋一下XAML，實際上十分簡單。在這個例子里，我們需要注意幾點：視覺狀態管理器（VisualStateManager）,自適應觸發器（AdaptiveTiggers）,在設置器（Setter）中對相應元素屬性的值賦值即可，就像上面的那樣。

 

當然，你也可以對特定設備寫特定的布局。比如你希望在pc上將一個按鈕放在標題附近，但是在mobile上，為了操作方便，你希望將這個按鈕放在最下面，方便用戶的點擊，這里我提供一篇博客，寫的非常好。

對特定設備定制特定布局 鏈接：http://igrali.com/2015/08/02/three-ways-to-set-specific-devicefamily-xaml-views-in-uwp/