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