Windows的XAML UI框架提供了很多控件，支持用戶界面開發庫。其中一些有可視化，一些布局。? 一些控件例子：[https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlUIBasics](https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlUIBasics) 我現在做的一個中文版的，很多都是照著微軟寫，除了注釋 我們先學微軟做一個簡單的frame，新建Page，? 里面放title和跳轉頁 ~~~ public class page { public page() { } /// <summary> /// 跳轉頁 /// </summary> public Type navigate { set { _navigate = value; } get { return _navigate; } } /// <summary> /// 頁面名 /// </summary> public string title { set { _title = value; } get { return _title; } } private Type _navigate; private string _title; } ~~~ 我們需要把所有頁放到一個類，本來這個類可以不弄，直接放Page? 使用索引? 最后我還是想給寶資通打廣告? 弄了一個類，本來應該叫page管理器，我叫baozitong? 輸入title返回type ~~~ public static Type page(string title) { foreach (var temp in _page) { if (temp.title == title) { return temp.navigate; } } return null; } public static List<page> _page { set; get; }=new List<page>() { new page() { title = "appbar", navigate = typeof(appbar) } }; ~~~ 每次添加page可以在baozitong._page new page 界面splitview ~~~ <ToggleButton Grid.Row="0" IsChecked="{Binding ElementName=split,Path=IsPaneOpen,Mode=TwoWay}" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"></ToggleButton> <SplitView x:Name="split" Grid.Row="1" IsPaneOpen="True"> <SplitView.Pane> <ListView ItemsSource="{x:Bind _page}" SelectionChanged="nagivate"> <ListView.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding title}"></TextBlock> </DataTemplate> </ListView.ItemTemplate> </ListView> </SplitView.Pane> <Frame x:Name="frame" ></Frame> </SplitView> ~~~ ~~~ private void nagivate(object sender, SelectionChangedEventArgs e) { //跳轉navigate frame.Navigate(((sender as ListView).SelectedItem as page).navigate); } ~~~ ## Appbars and commands ### App bar 用于顯示應用程序特定命令的工具欄。 ### App bar button 使用app bar風格按鈕? 一個簡單的按鈕 ~~~ <AppBarButton Label="按鈕" HorizontalContentAlignment="Center"/> ~~~ ? 我們可以加上內容 ~~~ <AppBarButton Label="按鈕" HorizontalContentAlignment="Center"> <Grid Width="48" Height="48" Margin="0,-8,0,-4"> <SymbolIcon Symbol="Memo"/> <TextBlock Text="內容" Margin="0,2,0,0" Style="{StaticResource CaptionTextBlockStyle}" HorizontalAlignment="Center"/> </Grid> </AppBarButton> ~~~ ? 我們可以在按鈕加浮出 ~~~ <AppBarButton Icon="OpenWith" Label="浮出"> <AppBarButton.Flyout> <MenuFlyout> <MenuFlyoutItem Text="林德熙"/> <MenuFlyoutItem Text="csdn"/> <MenuFlyoutSeparator></MenuFlyoutSeparator> </MenuFlyout> </AppBarButton.Flyout> </AppBarButton> ~~~   ### App bar separator 命令欄中的命令組。? 如果我們有很多按鈕，我們可以使用 ~~~ <AppBarButton Content="林德熙"></AppBarButton> <AppBarSeparator></AppBarSeparator> <AppBarButton Content="csdn"></AppBarButton> ~~~  ### App bar toggle button 開關命名命令欄 ### Command bar 一種專門處理命令按鈕欄按鈕 我們把剛才的按鈕放在`<CommandBar>` ~~~ <CommandBar> <AppBarButton Label="按鈕" HorizontalContentAlignment="Center"> <Grid Width="48" Height="48" Margin="0,-8,0,-4"> <SymbolIcon Symbol="Memo"/> <TextBlock Text="內容" Margin="0,2,0,0" Style="{StaticResource CaptionTextBlockStyle}" HorizontalAlignment="Center"/> </Grid> </AppBarButton> <AppBarButton Icon="OpenWith" Label="浮出"> <AppBarButton.Flyout> <MenuFlyout> <MenuFlyoutItem Text="林德熙"/> <MenuFlyoutItem Text="csdn"/><!--博客沒有授權紅黑轉載--> <MenuFlyoutSeparator></MenuFlyoutSeparator> </MenuFlyout> </AppBarButton.Flyout> </AppBarButton> </CommandBar> ~~~  我們也看到最后的按鈕，如果有一些用不到，但是有用 ~~~ <CommandBar.SecondaryCommands> <AppBarButton Label="沒有授權"/> <AppBarButton Label="紅黑轉載"/> </CommandBar.SecondaryCommands> ~~~  ## Buttons ### Button 響應用戶輸入和點擊事件。 ~~~ <Button Margin="72,163,0,0" Content="請勿轉載"></Button> ~~~  按鈕點擊可以使用`X:Bind` ### Hyperlink 超鏈接 ~~~ <TextBlock HorizontalAlignment="Left" Margin="72,163,0,0" TextWrapping="Wrap" VerticalAlignment="Top"> <Hyperlink NavigateUri="http://blog.csdn.net/lindexi_gd"> 博客發在csdn </Hyperlink>，沒有授權紅黑轉載，沒有授權推酷轉載 </TextBlock> ~~~  ### Repeat button 用戶點擊不停響應。 ## Collection/data controls ### Flip view 幻燈片播放 ~~~ <FlipView> <Image Source="Assets/QQ截圖20160328094421.png"></Image> <Image Source="Assets/QQ截圖20160328094435.png"></Image> </FlipView> ~~~  [http://www.cnblogs.com/Damai-Pang/p/5201206.html](http://www.cnblogs.com/Damai-Pang/p/5201206.html) ### Grid view 行列布局，可以水平滾動控件。 ### Items control 提供UI指定數據模板 ### List view 在一個列表上的項目的集合,可以垂直滾動控件? 我們做一個viewmodel ~~~ public class viewmodel : notify_property { public viewmodel() { } } ~~~ 我們依列表 ~~~ public ObservableCollection<string> lindexi { set; get; } = new ObservableCollection<string>() { "林德熙", "csdn" }; ~~~ ~~~ <ListView ItemsSource="{x:Bind view.lindexi}"> <ListView.ItemTemplate> <DataTemplate> <TextBlock Text="{x:Bind }"></TextBlock> </DataTemplate> </ListView.ItemTemplate> </ListView> ~~~  ## Date and time controls ### Calendar date picker 日歷日期選擇器? ?  ### Calendar view 日程表，讓用戶選擇日期?  ### Time picker 用戶選擇一個時間?  ## Flyouts ### Flyout 顯示一條消息 ~~~ <Button Margin="200,153,0,0" Content="請勿轉載"> <Button.Flyout> <Flyout> <StackPanel> <TextBlock Text="http://blog.csdn.net/lindexi_gd"/> </StackPanel> </Flyout> </Button.Flyout> </Button> ~~~  ### Menu flyout 暫時顯示命令或列出選項給用戶選擇 ~~~ <AppBarButton Icon="OpenWith" Label="浮出"> <AppBarButton.Flyout> <MenuFlyout> <MenuFlyoutItem Text="林德熙"/> <MenuFlyoutItem Text="csdn"/> <MenuFlyoutSeparator></MenuFlyoutSeparator> </MenuFlyout> </AppBarButton.Flyout> </AppBarButton> ~~~ ### Popup menu 彈出自己寫的菜單 ### Tooltip 提示 ~~~ <Button Content="Button" Click="請勿轉載" ToolTipService.ToolTip="沒有授權紅黑轉" /> ~~~ ## Images ### Image 圖片 ~~~ <Image Source="Assets/QQ截圖20160328094421.png"></Image> ~~~  如果需要gif可以?[http://www.songsong.org/post/2015/10/11/ImageLib.html](http://www.songsong.org/post/2015/10/11/ImageLib.html) ## Graphics and ink ### InkCanvas ~~~ <InkCanvas></InkCanvas> ~~~ 手寫 ? 保存文件可以去edi.wang ### Shapes 橢圓,矩形、線、貝塞爾曲線路徑 ~~~ <Ellipse Fill="Black" Width="100" Margin="10,10,10,10" Height="200"></Ellipse> ~~~ ~~~ <Rectangle Fill="Black" Width="10" Height="100" Margin="10,10,10,10"></Rectangle> ~~~ ~~~ <Path Stroke="Black" StrokeThickness="10"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigure StartPoint="10,100"> <PathFigure.Segments> <BezierSegment Point1="100,50" Point2="150,200" Point3="200,100"></BezierSegment> </PathFigure.Segments> </PathFigure> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path> ~~~    ## Layout controls ### Border 邊框 ### Canvas 畫板 ### Grid 網格布局 ### StackPanel 堆放布局 ### Scroll viewer 滾動視圖 ~~~ <ScrollViewer Height="20" VerticalScrollBarVisibility="Visible"> <StackPanel Orientation="Vertical"> <TextBlock Text=" 林德熙"/> <TextBlock Text="腦殘粉"></TextBlock> </StackPanel> </ScrollViewer> ~~~ ### Viewbox 可以改變內容的長寬 ~~~ <Viewbox Width="100"> <TextBlock Margin="10,10,10,10" Text="林德熙"></TextBlock> </Viewbox> <Viewbox Width="200"> <TextBlock Margin="10,10,10,10" Text="林德熙"></TextBlock> </Viewbox> <Viewbox Width="300"> <TextBlock Margin="10,10,10,10" Text="林德熙"></TextBlock> </Viewbox> ~~~  ## Media controls ### Media element 播放視頻? 其實我之前用它播放音頻[https://github.com/lindexi/Markdown](https://github.com/lindexi/Markdown)?  ~~~ private async void speech(string str, MediaElement media_element) { SpeechSynthesizer synthesizer = new SpeechSynthesizer(); SpeechSynthesisStream stream = await synthesizer.SynthesizeTextToStreamAsync(str); media_element.SetSource(stream, stream.ContentType); //http://blog.csdn.net/lindexi_gd media_element.Play(); } ~~~ 還有沒寫好，全屏出問題，可以來我博客[http://blog.csdn.net/lindexi_gd](http://blog.csdn.net/lindexi_gd)之后找到解決將會寫一個，可能是預覽版，在真機就出錯 ### MediaTransportControls 控制播放 ## Navigation ### Hub 全景視圖控件 ~~~ <Hub> <HubSection Header="林德熙"> <DataTemplate> <Image Source="Assets/QQ截圖20160328094421.png"></Image> </DataTemplate> </HubSection> <HubSection Header="http://blog.csdn.net/lindexi_gd"> <DataTemplate> <Image Source="Assets/QQ截圖20160328094435.png"></Image> </DataTemplate> </HubSection> <HubSection Header="sharp"> <DataTemplate> <StackPanel Orientation="Horizontal"> <Ellipse Fill="Black" Width="100" Margin="10,10,10,10" Height="200"></Ellipse> <Rectangle Fill="Black" Width="100" Height="100" Margin="10,10,10,10"></Rectangle> <Path Stroke="Black" StrokeThickness="10"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigure StartPoint="10,100"> <PathFigure.Segments> <BezierSegment Point1="100,50" Point2="150,200" Point3="200,100"></BezierSegment> </PathFigure.Segments> </PathFigure> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path> </StackPanel> </DataTemplate> </HubSection> </Hub> ~~~  ## Progress controls ### Progress bar 進度條 ~~~ <ProgressBar Value="10" Height="100"></ProgressBar> ~~~  ~~~ <ProgressBar Value="10" IsIndeterminate="True" Height="100"></ProgressBar> ~~~  ### Progress ring ~~~ <ProgressRing Width="100" IsActive="True"></ProgressRing> ~~~  ## Text controls ### Auto suggest box ~~~ <AutoSuggestBox PlaceholderText="輸入林德熙" QueryIcon="Find" Margin="10,10,10,10" TextChanged="query" DisplayMemberPath="name" ></AutoSuggestBox> ~~~ 需要在后臺[https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlAutoSuggestBox](https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlAutoSuggestBox)  ### Password box 密碼輸入 ~~~ <PasswordBox Margin="10,10,10,10" Height="10" PlaceholderText="輸入中文密碼" IsPasswordRevealButtonEnabled="True"></PasswordBox> ~~~  ### Rich edit box ~~~ <RichEditBox Name="redit" Grid.Row="3" Margin="10,10,10,10" ContextMenuOpening="OnContextMenuOpening"> <FlyoutBase.AttachedFlyout> <MenuFlyout> <MenuFlyoutItem Text="復制" Click="OnCopy"/> <MenuFlyoutItem Text="剪切" Click="OnCut"/> <MenuFlyoutItem Text="粘貼" Click="OnPaste"/> <MenuFlyoutSeparator/> <MenuFlyoutSubItem Text="字號"> <MenuFlyoutItem Text="16" Tag="16" Click="OnFontSize" /> <MenuFlyoutItem Text="20" Tag="20" Click="OnFontSize"/> <MenuFlyoutItem Text="24" Tag="24" Click="OnFontSize" /> <MenuFlyoutItem Text="36" Tag="36" Click="OnFontSize"/> <MenuFlyoutItem Text="48" Tag="48" Click="OnFontSize"/> </MenuFlyoutSubItem> <!--分割--> <MenuFlyoutSeparator/> <ToggleMenuFlyoutItem Text="加粗" Click="OnBold" /> <MenuFlyoutSeparator/> <MenuFlyoutSubItem Text="下劃線"> <MenuFlyoutItem Text="無" Tag="-1" Click="OnUnderline" /> <MenuFlyoutItem Text="單實線" Tag="0" Click="OnUnderline"/> <MenuFlyoutItem Text="雙實線" Tag="1" Click="OnUnderline"/> <MenuFlyoutItem Text="虛線" Tag="2" Click="OnUnderline"/> </MenuFlyoutSubItem> <MenuFlyoutSeparator/> <MenuFlyoutSubItem Text="顏色"> <MenuFlyoutItem Text="黑色" Tag="黑色" Click="OnTinct"/> <MenuFlyoutItem Text="藍色" Tag="藍色" Click="OnTinct"/> <MenuFlyoutItem Text="白色" Tag="白色" Click="OnTinct"/> </MenuFlyoutSubItem> </MenuFlyout> </FlyoutBase.AttachedFlyout> </RichEditBox> ~~~ ### Text block 簡單輸出文本 ~~~ <TextBlock HorizontalAlignment="Left" Margin="72,163,0,0" Text="博客發在csdn ，沒有授權紅黑轉載，沒有授權推酷轉載" TextWrapping="Wrap" VerticalAlignment="Top" ></TextBlock> ~~~  ### Text box 用戶輸入文本 ~~~ <TextBox Margin="10,10,10,10" Height="10"></TextBox> ~~~  博客：[http://blog.csdn.net/lindexi_gd](http://blog.csdn.net/lindexi_gd) 現在委托csdn維權，沒有授權的網站不要轉載 原文[https://msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/controls-by-function](https://msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/controls-by-function)