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>
复制代码

排版
标题
样式 h1到h6

效果

代码

1
2
3
4
5
6

副标题
样式 h1 small到h6 small.使用时 和标题放到一个里 方便对齐

效果

代码

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
复制代码
代码
内联代码
样式 code.使用时 和其他放到一个里

效果

代码

1
2
3
4
5
用户输入
样式 kbd.使用时 和其他放到一个里

效果

代码

1
2
3
4
代码块
样式 pre

效果

代码

1 代码块:
2 Foreground:#333
3 Background:#f5f5f5
4 BorderBrush:#ccc
辅助文本
样式 help-block.注:辅助文本在Bootstrap表单样式里,原本的解释:针对表单控件的“块（block）”级辅助文本.我并没有建一个表单窗体,所以就写在了这里

效果

代码

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
复制代码
按钮
按钮
样式 btn

效果

代码

1

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

效果

代码

1
2
3
4
5
6
辅助类
Contextual colors
样式 text 语境

效果

代码

复制代码
1
2
3
4
5
6
复制代码
Contextual backgrounds
样式 text bg 语境

效果

代码

1
2
3
4
5
输入框组
插件
样式 input-group-addon 输入框里带个,其实并不是插件,addon这个单词,使用百度翻译,翻译成插件.里显示的内容绑定到Tag属性

效果

代码

1
2
作为额外元素的按钮
样式 input-group-btn 输入框里带个

,里显示的内容绑定到Tag属性

效果

代码

复制代码
1 xmal代码:
2
3
4 <TextBox.Tag>
5
6 </TextBox.Tag>
7
8
9 后台代码C#:
10 private void InputGroupButton_Click(object sender, RoutedEventArgs e)
11 {
12 MessageBox.Show(((TextBox)sender).Text);
13 }
复制代码
进度条
样式 progress-bar

效果

代码

1
2
3
4
5
面板
样式 panel

基本实例
效果

代码

1
2
3
带标题的面版
效果

代码

复制代码
1
2
3
4
5
6
复制代码
带脚注的面版
效果

代码

复制代码
1
2
3
4
5
6
复制代码
情境效果
效果

代码

复制代码
1
2
3
4
5 <ContentControl.Content>
6
7 <Grid.ColumnDefinitions>
8
9
10 </Grid.ColumnDefinitions>
11 <Grid.RowDefinitions>
12
13
14 </Grid.RowDefinitions>
15
16
17
18
19
20 </ContentControl.Content>
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
复制代码
Glyphicons 字体图标
path资源,详情见http://www.cnblogs.com/tsliwei/p/6378659.html

效果

代码

1
日期选择
样式 datepicker 参考textbox

效果

代码

1
2
3
4
5

2016-12-17更新:

感谢博友 散客游 的反馈,修复了进度条模糊的问题.

2016-12-19更新:

发布到GitHub,地址:https://github.com/ptddqr/bootstrap-wpf-style

2017-02-08更新:

添加Glyphicons字体图标

2018-04-03更新:

添加日期控件样式

源码下载:BootstrapWpfStyle.zip