lindexi-gd
- 浏览: 140030 次
-
文章分类
最新评论
win10 UWP Controls by function
Windows的XAML UI框架提供了很多控件，支持用户界面开发库。其中一些有可视化，一些布局。
一些控件例子：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=""></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
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
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
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
全景视图控件
<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
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
现在委托csdn维权，没有授权的网站不要转载
原文https://msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/controls-by-function
分享到：
发表评论
相关推荐
Win10 UWP 开发教程 课程 资源 80课时 课程地址：http://blog.csdn.net/shanguuncle/article/details/78111649
全选设置之后UWP即可访问localhost，可以走代理。
下面我们将深入探讨如何在Win10下通过UWP实现这些功能。 首先，我们需要了解UWP（Universal Windows Platform）是微软为Windows 10推出的一种跨设备的应用程序开发框架。它允许开发者编写一次代码，就能在各种...
总结来说，"win10 uwp 轻量级 MVVM 框架入门 2.1.5.3199 例子"提供了一个实际操作的平台，让开发者学习如何在UWP环境中利用MVVM模式进行开发。通过分析和实践这个框架，你将能够更好地理解MVVM的工作原理，以及如何...
在Windows 10 UWP应用开发中，常常需要创建一种用户友好的交互方式，即当用户右键点击某个元素时，能在一个特定的位置显示一个浮出菜单（MenuFlyout）。本篇文章将详细介绍如何使用C#实现这样的功能，使得MenuFlyout...
在本文中，我们将探讨如何利用Windows 10的UWP（通用Windows平台）应用程序与ASP.NET Core构建一个图床服务器的客户端。这是一个涉及到跨平台开发和云端图像存储管理的项目，旨在提供一种高效且灵活的方式来上传和...
win10 moblie uwp qq5.6.1150.1000主程序,不含依赖程序
win10 moblie uwp 越飞阅读1.4.68.0主程序,不含依赖程序
title: "win10 uwp 字符文本转语音声音文件方法"在 UWP 中，支持将传入的字符串文本内容转换为音频语音，可以将这个语音声音通过 MediaEl
但是LTSB/C也没了应用商店和UWP运行环境.,LTSC自动恢复win10应用商店,应用商店也是Win10的一大特色! Win10的应用商店也有一些优秀的应用可以代替臃肿的桌面程序. 使用该工具即可在 Windows10 LTSC(2019,1809) 上...
首先打开 使用微软的账号或 github 账号登陆点击 add new 添加一个 UWP 程序，需要写出 app 的
但是LTSB/C也没了应用商店和UWP运行环境.,LTSC自动恢复win10应用商店,应用商店也是Win10的一大特色! Win10的应用商店也有一些优秀的应用可以代替臃肿的桌面程序. 使用该工具即可在 Windows10 LTSC(2019,1809) 上安装...
如果需要反过来，把同步转异步，可以使用 同步方法转异步写你的代码使用Task.Wait 时需要小心死锁不会出现死锁的代码使用Task.Delay等待即使使用方法
此安装包为win10的uwp版应用软件Sound Blaster Connect，有需要的朋友可以去下载下来
【描述】提到的"一个uwp开发源码，可以移植到一切win10系统"意味着该项目遵循了UWP的跨平台特性，使得开发者能够在不同类型的Windows 10设备上部署和运行同一套代码。UWP是微软为了统一Windows生态而推出的新开发...
win10应用商店安装包，Microsoft.WindowsStore_11804.1001.913.0_neutral_~_8wekyb3d8bbwe，可用于不带应用商店的安装
微软推出的开源UWP社区工具包（Windows Community Toolkit）是一个关键的资源，它旨在简化和加速开发流程，使得开发者能够更高效地利用Win10 SDK进行编程。 UWP社区工具包是一个集合了各种辅助工具、组件和示例代码...
Windows10 引入了通用 Windows 平台 (UWP)，这进一步推动了 Windows 运行时模型的发展，并将该平台引入到 Windows 10 统一核心版 中。作为核心版的一部分，UWP 现提供了一个可供在每个运行 Windows 10 的设备上使用...
借助 Windows Explorer 上的这种现代 UWP，以更有效，更令人满意的方式管理文件 我们认为我们大多数人都可以同意 Windows 10 是迄今为止 Microsoft 操作系统的最佳版本，尽管它具有各种可感知的或多或少的主观缺点...
此安装包为win10的uwp版应用软件Realtek Audio Control，有需要的朋友可以去下载下来