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/