# 控件 Windows的XAML UI框架提供了很多控件，支持用戶界面開發庫。其中一些有可視化，一些布局。 一些控件例子：https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlUIBasics <!--more--> <div id="toc"></div> 我現在做的一個中文版的，很多都是照著微軟寫，除了注釋 我們先學微軟做一個簡單的frame，新建Page， 里面放title和跳轉頁 ```csharp 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 ```csharp 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 ```xml <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> ``` ```csharp 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風格按鈕 一個簡單的按鈕 ```xml <AppBarButton Label="按鈕" HorizontalContentAlignment="Center"/> ```  我們可以加上內容 ```xml <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> ```  我們可以在按鈕加浮出 ```xml <AppBarButton Icon="OpenWith" Label="浮出"> <AppBarButton.Flyout> <MenuFlyout> <MenuFlyoutItem Text="林德熙"/> <MenuFlyoutItem Text="csdn"/> <MenuFlyoutSeparator></MenuFlyoutSeparator> </MenuFlyout> </AppBarButton.Flyout> </AppBarButton> ```   ### App bar separator 命令欄中的命令組。 如果我們有很多按鈕，我們可以使用 ```xml <AppBarButton Content="林德熙"></AppBarButton> <AppBarSeparator></AppBarSeparator> <AppBarButton Content="csdn"></AppBarButton> ```  ### App bar toggle button 開關命名命令欄 ### Command bar 一種專門處理命令按鈕欄按鈕 我們把剛才的按鈕放在`<CommandBar>` ```xml <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> ```  我們也看到最后的按鈕，如果有一些用不到，但是有用 ```xml <CommandBar.SecondaryCommands> <AppBarButton Label="沒有授權"/> <AppBarButton Label="紅黑轉載"/> </CommandBar.SecondaryCommands> ```  ## Buttons ### Button 響應用戶輸入和點擊事件。 ```xml <Button Margin="72,163,0,0" Content="請勿轉載"></Button> ```  按鈕點擊可以使用`X:Bind` ### Hyperlink 超鏈接 ```xml <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 幻燈片播放 ```xml <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 ### Grid view 行列布局，可以水平滾動控件。 ### Items control 提供UI指定數據模板 ### List view 在一個列表上的項目的集合,可以垂直滾動控件 我們做一個viewmodel ```csharp public class viewmodel : notify_property { public viewmodel() { } } ``` 我們依列表 ```csharp public ObservableCollection<string> lindexi { set; get; } = new ObservableCollection<string>() { "林德熙", "csdn" }; ``` ```xml <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 顯示一條消息 ```xml <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 暫時顯示命令或列出選項給用戶選擇 ```xml <AppBarButton Icon="OpenWith" Label="浮出"> <AppBarButton.Flyout> <MenuFlyout> <MenuFlyoutItem Text="林德熙"/> <MenuFlyoutItem Text="csdn"/> <MenuFlyoutSeparator></MenuFlyoutSeparator> </MenuFlyout> </AppBarButton.Flyout> </AppBarButton> ``` ### Popup menu 彈出自己寫的菜單 ### Tooltip 提示 ```xml <Button Content="Button" Click="請勿轉載" ToolTipService.ToolTip="沒有授權紅黑轉" /> ``` ## Images ### Image 圖片 ```xml <Image Source="Assets/QQ截圖20160328094421.png"></Image> ```  如果需要gif可以 http://www.songsong.org/post/2015/10/11/ImageLib.html ## Graphics and ink ### InkCanvas ```xml <InkCanvas></InkCanvas> ``` 手寫  保存文件可以去edi.wang ### Shapes 橢圓,矩形、線、貝塞爾曲線路徑 ```xml <Ellipse Fill="Black" Width="100" Margin="10,10,10,10" Height="200"></Ellipse> ``` ```xml <Rectangle Fill="Black" Width="10" Height="100" Margin="10,10,10,10"></Rectangle> ``` ```xml <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 滾動視圖 ```xml <ScrollViewer Height="20" VerticalScrollBarVisibility="Visible"> <StackPanel Orientation="Vertical"> <TextBlock Text=" 林德熙"/> <TextBlock Text="腦殘粉"></TextBlock> </StackPanel> </ScrollViewer> ``` ### Viewbox 可以改變內容的長寬 ```xml <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  ```csharp 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之后找到解決將會寫一個，可能是預覽版，在真機就出錯 ### MediaTransportControls 控制播放 ## Navigation ### Hub 全景視圖控件 ```xml <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 進度條 ```xml <ProgressBar Value="10" Height="100"></ProgressBar> ```  ```xml <ProgressBar Value="10" IsIndeterminate="True" Height="100"></ProgressBar> ```  ### Progress ring ```xml <ProgressRing Width="100" IsActive="True"></ProgressRing> ```  ## Text controls ### Auto suggest box ```xml <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  ### Password box 密碼輸入 ```xml <PasswordBox Margin="10,10,10,10" Height="10" PlaceholderText="輸入中文密碼" IsPasswordRevealButtonEnabled="True"></PasswordBox> ```  ### Rich edit box ```xml <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 簡單輸出文本 ```xml <TextBlock HorizontalAlignment="Left" Margin="72,163,0,0" Text="博客發在csdn ，沒有授權紅黑轉載，沒有授權推酷轉載" TextWrapping="Wrap" VerticalAlignment="Top" ></TextBlock> ```  ### Text box 用戶輸入文本 ```xml <TextBox Margin="10,10,10,10" Height="10"></TextBox> ```  博客：http://blog.csdn.net/lindexi_gd 現在委托csdn維權，沒有授權的網站不要轉載 原文https://msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/controls-by-function