微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Bootstrap WPF Style,Bootstrap风格的WPF样式

转自:https://www.cnblogs.com/tsliwei/p/6138412.html
简介
GitHub地址:https://github.com/ptddqr/bootstrap-wpf-style

此样式基于bootstrap-3.3.0,样式文件里的源码行数都是指的这个版本.CSS源文件放到了Content文件夹下的bootstrap.css

WPF样式和CSS还是不太相同,所以有些内容实现上稍有出入,有些内容用法不太一样,有些内容并没有实现

但至少,一些概念,尺寸和取色,还是很好的借鉴

博客说明按Bootstrap官方文档的顺序来写

App.xaml里引用Bootstrap.xaml资源

复制代码
1 <Application.Resources>
2
3 <ResourceDictionary.MergedDictionaries>
4
5 </ResourceDictionary.MergedDictionaries>
6

7 </Application.Resources>
复制代码

排版
标题

效果

代码

1
2
3
4
5
6

标题

效果

代码

复制代码
1
2
3
4

5
6
7
8

9
10
11
12

13
14
15
16

17
18
19
20

21
22
23
24

复制代码
代码
内联代码

效果

代码

1
2
3
4
5

用户输入

效果

代码

1
2
3
4

代码

效果

代码

1
辅助文本

效果

代码

1
表格
样式 认就这一组样式,不用引用

效果

代码

复制代码
1
2 <DataGrid.Columns>
3
4
5
6 </DataGrid.Columns>
7

复制代码
表单
WPF没有表单的概念,所以说明就不按官方文档的顺序了

文本输入框
样式 控件尺寸只支持认样式

效果

代码

复制代码
1
2
3
4
5
6
7
8
复制代码
密码框
样式 控件尺寸只支持认样式

效果

代码

复制代码
1
2
3
4
5
6
7
复制代码
复选框
样式 checkBox 和Bootstrap有些不同 自己写的样式

效果

代码

1
2
3
4
单选框
样式 radio 和Bootstrap有些不同 自己写的样式

效果

代码

1
2
3
4
下拉框
样式 认就这一组样式,不用引用 gif截图的原因,看不到下拉

效果

代码

复制代码
1
2 苹果
3 橡胶
4 桔子
5

6
7 苹果
8 橡胶
9 桔子
10

11
12 苹果
13 橡胶
14 桔子
15

复制代码
按钮
按钮

2
3
4
5
6
切换按钮
样式 tbtn.Bootstrap中没有切换按钮,这里做成和按钮一样,按下去的效果就是按钮

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐