懶癌晚期兼正月裏都是過年,一直拖到今天才繼續更新。以前的幾篇介紹了數據的來源,屬於準備工做。本篇咱們正式開始構建漲姿式UWP程序的UI界面。git
咱們這個Hello World程序比較簡單,總共只有一個頁面,在PC和Tablet上呈左右分開,左邊以列表顯示新聞標題及簡述,右邊則顯示新聞正文。github
對於這樣的一個佈局,Grid無疑是最爲合適的Panel,大致是如下的結構:windows
<Grid> <Grid.ColumnDefinitions> <ColumnDefinition x:Name="columnLeft" Width="4*"></ColumnDefinition> <ColumnDefinition x:Name="columnRight" Width="6*"></ColumnDefinition> </Grid.ColumnDefinitions> <ListView x:Name="listViewItems" Grid.Column="0" SelectedItem="{Binding SelectedItem,Mode=TwoWay}" ItemsSource="{Binding Items}" ItemTemplate="{StaticResource ZzsItemTemplate}" ItemContainerStyle="{StaticResource ZzsItemStyle}" > </ListView> <ProgressBar Grid.Column="0" IsIndeterminate="True" Visibility="{Binding IsLoading,Converter={StaticResource boolToVisible}}" ></ProgressBar> <ContentControl Grid.Column="1" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" Margin="4,0" ContentTemplate="{StaticResource WebViewTemplate}" Content="{Binding}"></ContentControl> </Grid>
仔細觀察能夠發現,左上角參照UWP APP的風格,設置了一個漢堡包菜單,經過點擊這個按鈕會彈出部分選項:api
彈出部分的效果一般都是經過SplitView控件來實現,SplitView在UWP中是橫向劃分空間的不二法寶,也能夠參考系統自帶的「郵件」APP,其中嵌套了多層SplitView來實現遞進的漸次佈局。工具
<SplitView Grid.Row="1" x:Name="splitView" DisplayMode="CompactOverlay" CompactPaneLength="48" IsPaneOpen="{Binding IsOpen}"> <SplitView.Pane> <ListView ItemsSource="{Binding CategoryList}" ItemTemplate="{StaticResource NavigationItemTemplate}" ItemContainerStyle="{StaticResource NavigationItemStyle}" SelectedItem="{Binding SelectedCategory,Mode=TwoWay}"></ListView> </SplitView.Pane> <SplitView.Content> <Grid> <!-- 這裏是上面那個主體內容的Grid --> </Grid> </SplitView.Content> </SplitView>
能夠看到SplitView的Pane裏放了一個CategoryList,Content就放了主體內容的Grid,在IsPaneOpen屬性變化爲True時,則展開顯示。佈局
到目前爲止,還沒有涉及頂部的綠色工具欄。這裏不得不感慨一下,雖然UWP能夠作到在不一樣尺寸的Windows10設備上運行,可是UI的適配確實是很麻煩的,同時考慮到Windows Phone的佔有率,UWP APP不出Phone版就不難理解了。ui
爲了可以適配Phone的豎屏界面,使工具欄的按鈕能按比列分配到左右兩邊,同時不被SplitView的Pane遮擋。我在SplitView的外層再包了一層Grid,能夠看到做爲最外層的Grid,僅有兩行。工具欄Height=Auto置於頂部,第二行放置SplitView佔據剩餘空間。spa
<Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition Height="*"></RowDefinition> </Grid.RowDefinitions> <Grid Grid.Row="0"> <Grid.ColumnDefinitions> <ColumnDefinition x:Name="columnLeftBar" Width="4*"></ColumnDefinition> <ColumnDefinition Width="Auto" ></ColumnDefinition> <ColumnDefinition x:Name="columnRightBar" Width="6*"></ColumnDefinition> </Grid.ColumnDefinitions> <Grid Grid.Column="0" Background="{StaticResource SystemControlBackgroundAccentBrush}"> <Button Content="" FontFamily="{ThemeResource SymbolThemeFontFamily}" HorizontalAlignment="Left" Background="{StaticResource SystemControlBackgroundAccentBrush}" Width="48" Height="48" Command="{Binding OpenPaneCommand,Mode=OneTime}"></Button> <Button x:Name="buttonSync" Content="" FontFamily="{ThemeResource SymbolThemeFontFamily}" HorizontalAlignment="Right" Background="{StaticResource SystemControlBackgroundAccentBrush}" Width="48" Height="48" Command="{Binding SyncCommand,Mode=OneTime}"></Button> </Grid> <Border x:Name="borderMiddle" Grid.Column="1" Background="{StaticResource SystemControlBackgroundAccentBrush}"> </Border> <Border Grid.Column="2" Background="{StaticResource SystemControlBackgroundAccentBrush}"> <Button Content="" FontFamily="{ThemeResource SymbolThemeFontFamily}" Background="{StaticResource SystemControlBackgroundAccentBrush}" Width="48" Height="48" Command="{Binding GoBackCommand,Mode=OneTime}"></Button> </Border> </Grid> <SplitView Grid.Row="1" x:Name="splitView" DisplayMode="CompactOverlay" CompactPaneLength="48" IsPaneOpen="{Binding IsOpen}"> <!-- SplitView --> </SplitView> </Grid>
這裏值得一提的是微軟提供了大量系統的icon圖標,在XAML中,僅需將FontFamily設置成SymbolThemeFontFamily,同時填寫編號,便可使用這些很是精緻的系統圖標。例如:3d
<Button Content="" FontFamily="{ThemeResource SymbolThemeFontFamily}" HorizontalAlignment="Left" Background="{StaticResource SystemControlBackgroundAccentBrush}" Width="48" Height="48" Command="{Binding OpenPaneCommand,Mode=OneTime}"></Button>
具體的icon圖標能夠參考這兩篇:code
https://docs.microsoft.com/zh-cn/windows/uwp/style/segoe-ui-symbol-font
https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Controls.Symbol
除了icon圖標之外,咱們一樣能夠發現一些的系統定義的樣式,好比:
<Grid Grid.Column="0" Background="{StaticResource SystemControlBackgroundAccentBrush}">
鼠標放在SystemControlBackgroundAccentBrush上,右鍵菜單點擊轉到定義,會打開一個genric.xaml,該文件存在大量的系統配色和樣式,很是方便且值得使用。
咱們也能夠增長一些自定義的Style,例如ListView的ItemContainerStyle:
<ListView ItemsSource="{Binding CategoryList}" ItemTemplate="{StaticResource NavigationItemTemplate}" ItemContainerStyle="{StaticResource NavigationItemStyle}" SelectedItem="{Binding SelectedCategory,Mode=TwoWay}"></ListView>
這裏的ItemContainerStyle常常須要自定義樣式,通常的作法是經過左側文檔大綱,找到ListView節點,而後再選擇「編輯其餘模板」->「編輯生成的項目容器(ItemContainerStyle)」,一般會在xaml文件的頂部生成<Page.Resources>節點,其中會包含控件自己的Default Style,在此基礎上進行修改事半功倍。
若是須要徹底從新定義的模板,例如:ItemTemplate="{StaticResource NavigationItemTemplate}"
假設這個NavigationItemTemplate會在多處使用,那能夠考慮將該資源定義在App.xaml中供整個程序使用:
<Application.Resources> <ResourceDictionary> <local:ViewModelLocator x:Key="Locator" /> <local:BoolToVisible x:Key="boolToVisible"></local:BoolToVisible> <DataTemplate x:Key="NavigationItemTemplate"> <TextBlock Text="{Binding}" Margin="48,0"></TextBlock> </DataTemplate> </ResourceDictionary> </Application.Resources>
以上就是MainPage.xaml的大概內容分析,下一篇會結合MainPage.xaml.cs的代碼來進一步介紹漲姿式UWP的相關內容。
GitHub源代碼地址:
https://github.com/manupstairs/ZhangZiShiRSSRead
Windows Store:
https://www.microsoft.com/zh-cn/store/p/%e6%b6%a8%e5%a7%bf%e5%8a%bfuwp/9nblggh3zqd1