简介

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. <ResourceDictionary>
  3. <ResourceDictionary.MergedDictionaries>
  4. <ResourceDictionary Source="pack://application:,,,/BootstrapWpfStyle;component/Styles/Bootstrap.xaml"/>
  5. </ResourceDictionary.MergedDictionaries>
  6. </ResourceDictionary>
  7. </Application.Resources>

排版

标题

<Label>样式 h1到h6

效果

代码

  1. <Label Content="h1. Bootstrap heading" Style="{DynamicResource h1}"></Label>
  2. <Label Content="h2. Bootstrap heading" Style="{DynamicResource h2}"></Label>
  3. <Label Content="h3. Bootstrap heading" Style="{DynamicResource h3}"></Label>
  4. <Label Content="h4. Bootstrap heading" Style="{DynamicResource h4}"></Label>
  5. <Label Content="h5. Bootstrap heading" Style="{DynamicResource h5}"></Label>
  6. <Label Content="h6. Bootstrap heading" Style="{DynamicResource h6}"></Label>
副标题

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

效果

代码

  1. <StackPanel Orientation="Horizontal">
  2. <Label Content="h1. Bootstrap heading" Style="{DynamicResource h1}"></Label>
  3. <Label Content="Secondary text" Style="{DynamicResource h1 small}"></Label>
  4. </StackPanel>
  5. <StackPanel Orientation="Horizontal">
  6. <Label Content="h2. Bootstrap heading" Style="{DynamicResource h2}"></Label>
  7. <Label Content="Secondary text" Style="{DynamicResource h2 small}"></Label>
  8. </StackPanel>
  9. <StackPanel Orientation="Horizontal">
  10. <Label Content="h3. Bootstrap heading" Style="{DynamicResource h3}"></Label>
  11. <Label Content="Secondary text" Style="{DynamicResource h3 small}"></Label>
  12. </StackPanel>
  13. <StackPanel Orientation="Horizontal">
  14. <Label Content="h4. Bootstrap heading" Style="{DynamicResource h4}"></Label>
  15. <Label Content="Secondary text" Style="{DynamicResource h4 small}"></Label>
  16. </StackPanel>
  17. <StackPanel Orientation="Horizontal">
  18. <Label Content="h5. Bootstrap heading" Style="{DynamicResource h5}"></Label>
  19. <Label Content="Secondary text" Style="{DynamicResource h5 small}"></Label>
  20. </StackPanel>
  21. <StackPanel Orientation="Horizontal">
  22. <Label Content="h6. Bootstrap heading" Style="{DynamicResource h6}"></Label>
  23. <Label Content="Secondary text" Style="{DynamicResource h6 small}"></Label>
  24. </StackPanel>

代码

内联代码

<Label>样式 code.使用时 和其他<Label>放到一个<StackPanel>里

效果

代码

  1. <StackPanel Orientation="Horizontal">
  2. <Label Content="内联代码:For example, "></Label>
  3. <Label Content="&lt;section&gt;" Style="{DynamicResource code}"></Label>
  4. <Label Content=" should be wrapped as inline."></Label>
  5. </StackPanel>
用户输入

<Label>样式 kbd.使用时 和其他<Label>放到一个<StackPanel>里

效果

代码

  1. <StackPanel Orientation="Horizontal">
  2. <Label Content="用户输入:To edit settings, press "></Label>
  3. <Label Content="ctrl + ," Style="{DynamicResource kbd}"></Label>
  4. </StackPanel>
代码块

<Label>样式 pre

效果

代码

  1. <Label xml:space="preserve" Style="{DynamicResource pre}">代码块:
  2. Foreground:#333
  3. Background:#f5f5f5
  4. BorderBrush:#ccc</Label>
辅助文本

<Label>样式 help-block.注:辅助文本在Bootstrap表单样式里,原本的解释:针对表单控件的“块(block)”级辅助文本.我并没有建一个表单窗体,所以就写在了这里

效果

代码

  1. <Label Content="辅助文本:上面为代码块" Style="{DynamicResource help-block}"></Label>

表格

<DataGrid>样式 默认就这一组样式,不用引用

效果

代码

  1. <DataGrid AutoGenerateColumns="False" DataContext="{Binding Source={StaticResource SampleDataSource}}" ItemsSource="{Binding Collection}">
  2. <DataGrid.Columns>
  3. <DataGridTextColumn Binding="{Binding Property1}" Header="Property1" ElementStyle="{StaticResource DataGridTextCenter}"/>
  4. <DataGridTextColumn Binding="{Binding Property2}" Header="Property2" ElementStyle="{StaticResource DataGridTextCenter}"/>
  5. <DataGridTextColumn Binding="{Binding Property3}" Header="Property3" ElementStyle="{StaticResource DataGridTextCenter}"/>
  6. </DataGrid.Columns>
  7. </DataGrid>

表单

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

文本输入框

<TextBox>样式 控件尺寸只支持默认样式

效果

代码

  1. <TextBox Text="TextBox"/>
  2. <TextBox Text="TextBox IsReadOnly=True" IsReadOnly="True"/>
  3. <TextBox Text="TextBox IsEnabled=False" IsEnabled="False"/>
  4. <TextBox Text="TextBox has-success" Style="{StaticResource has-success}"/>
  5. <TextBox Text="TextBox has-warning" Style="{StaticResource has-warning}"/>
  6. <TextBox Text="TextBox has-error" Style="{StaticResource has-error}"/>
  7. <TextBox Text="TextBox input-sm" Style="{StaticResource input-sm}"/>
  8. <TextBox Text="TextBox input-lg" Style="{StaticResource input-lg}"/>
密码框

<PasswordBox>样式 控件尺寸只支持默认样式

效果

代码

  1. <PasswordBox Password="PasswordBox"/>
  2. <PasswordBox Password="PasswordBox IsEnabled=False" IsEnabled="False"/>
  3. <PasswordBox Password="PasswordBox has-success" Style="{StaticResource has-success}"/>
  4. <PasswordBox Password="PasswordBox has-warning" Style="{StaticResource has-warning}"/>
  5. <PasswordBox Password="PasswordBox has-error" Style="{StaticResource has-error}"/>
  6. <PasswordBox Password="PasswordBox input-sm" Style="{StaticResource input-sm}"/>
  7. <PasswordBox Password="PasswordBox input-lg" Style="{StaticResource input-lg}"/>
复选框

<CheckBox>样式 checkbox 和Bootstrap有些不同 自己写的样式

效果

代码

  1. <CheckBox Content="default"></CheckBox>
  2. <CheckBox Content="checkbox has-success" Style="{DynamicResource checkbox has-success}" IsChecked="{x:Null}"></CheckBox>
  3. <CheckBox Content="checkbox has-warning" Style="{DynamicResource checkbox has-warning}" IsChecked="False"></CheckBox>
  4. <CheckBox Content="checkbox has-error" Style="{DynamicResource checkbox has-error}" IsChecked="True"></CheckBox>
单选框

<RadioButton>样式 radio 和Bootstrap有些不同 自己写的样式

效果

代码

  1. <RadioButton Content="default"></RadioButton>
  2. <RadioButton Content="radio has-success" Style="{DynamicResource radio has-success}"></RadioButton>
  3. <RadioButton Content="radio has-warning" Style="{DynamicResource radio has-warning}"></RadioButton>
  4. <RadioButton Content="radio has-error" Style="{DynamicResource radio has-error}" IsChecked="True"></RadioButton>
下拉框

<ComboBox>样式 默认就这一组样式,不用引用 gif截图的原因,看不到下拉

效果

代码

  1. <ComboBox>
  2. <ComboBoxItem>苹果</ComboBoxItem>
  3. <ComboBoxItem>橡胶</ComboBoxItem>
  4. <ComboBoxItem>桔子</ComboBoxItem>
  5. </ComboBox>
  6. <ComboBox IsEditable="True">
  7. <ComboBoxItem>苹果</ComboBoxItem>
  8. <ComboBoxItem>橡胶</ComboBoxItem>
  9. <ComboBoxItem>桔子</ComboBoxItem>
  10. </ComboBox>
  11. <ComboBox IsEnabled="False">
  12. <ComboBoxItem>苹果</ComboBoxItem>
  13. <ComboBoxItem>橡胶</ComboBoxItem>
  14. <ComboBoxItem>桔子</ComboBoxItem>
  15. </ComboBox>

按钮

按钮

<Button>样式 btn

效果

代码

  1. <Button Content="default"></Button>
  2. <Button Content="primary" Style="{DynamicResource btn-primary}"></Button>
  3. <Button Content="success" Style="{DynamicResource btn-success}"></Button>
  4. <Button Content="info" Style="{DynamicResource btn-info}"></Button>
  5. <Button Content="warning" Style="{DynamicResource btn-warning}"></Button>
  6. <Button Content="danger" Style="{DynamicResource btn-danger}"></Button>
切换按钮

<ToggleButton>样式 tbtn.Bootstrap中没有切换按钮,这里做成和按钮一样,按下去的效果就是按钮<Button>点击的效果

效果

代码

  1. <ToggleButton Content="default"></ToggleButton>
  2. <ToggleButton Content="primary" Style="{DynamicResource tbtn-primary}"></ToggleButton>
  3. <ToggleButton Content="success" Style="{DynamicResource tbtn-success}"></ToggleButton>
  4. <ToggleButton Content="info" Style="{DynamicResource tbtn-info}"></ToggleButton>
  5. <ToggleButton Content="warning" Style="{DynamicResource tbtn-warning}"></ToggleButton>
  6. <ToggleButton Content="danger" Style="{DynamicResource tbtn-danger}"></ToggleButton>

辅助类

Contextual colors

<Label>样式 text 语境

效果

代码

  1. <Label Content="text-muted:提示,使用浅灰色" Style="{DynamicResource text-muted}"></Label>
  2. <Label Content="text-primary:主要,使用蓝色" Style="{DynamicResource text-primary}"></Label>
  3. <Label Content="text-success:成功,使用浅绿色" Style="{DynamicResource text-success}"></Label>
  4. <Label Content="text-info:通知信息,使用浅蓝色" Style="{DynamicResource text-info}"></Label>
  5. <Label Content="text-warning:警告,使用黄色" Style="{DynamicResource text-warning}"></Label>
  6. <Label Content="text-danger:危险,使用褐色" Style="{DynamicResource text-danger}"></Label>
Contextual backgrounds

<Label>样式 text bg 语境

效果

代码

  1. <Label Content="text bg-primary:主要,使用蓝色,Foreground使用白色" Style="{DynamicResource text bg-primary}"></Label>
  2. <Label Content="text bg-success:成功,使用浅绿色" Style="{DynamicResource text bg-success}"></Label>
  3. <Label Content="text bg-info:通知信息,使用浅蓝色" Style="{DynamicResource text bg-info}"></Label>
  4. <Label Content="text bg-warning:警告,使用黄色" Style="{DynamicResource text bg-warning}"></Label>
  5. <Label Content="text bg-danger:危险,使用褐色" Style="{DynamicResource text bg-danger}"></Label>

输入框组

插件

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

效果

代码

  1. <TextBox Text="左边带插件的输入组" Tag="@" Style="{DynamicResource input-group-addon left}"></TextBox>
  2. <TextBox Text="右边带插件的输入组" Tag=".00" Style="{DynamicResource input-group-addon right}"></TextBox>
作为额外元素的按钮

<TextBox>样式 input-group-btn 输入框里带个<Button>,<Button>里显示的内容绑定到Tag属性

效果

代码

  1. xmal代码:
  2. <TextBox Text="左边带按钮的输入组" Tag="GO!" Style="{DynamicResource input-group-btn left}" Button.Click="InputGroupButton_Click"></TextBox>
  3. <TextBox Text="右边带按钮的输入组" Style="{DynamicResource input-group-btn right}" Button.Click="InputGroupButton_Click">
  4. <TextBox.Tag>
  5. <Path Style="{DynamicResource InputGroupPathStyle}" Data="{DynamicResource PathDataSearch}"></Path>
  6. </TextBox.Tag>
  7. </TextBox>
  8.  
  9. 后台代码C#:
  10. private void InputGroupButton_Click(object sender, RoutedEventArgs e)
  11. {
  12. MessageBox.Show(((TextBox)sender).Text);
  13. }

进度条

<ProgressBar>样式 progress-bar

效果

代码

  1. <ProgressBar Value="20" Style="{DynamicResource progress-bar}"></ProgressBar>
  2. <ProgressBar Value="40" Style="{DynamicResource progress-bar-success}"></ProgressBar>
  3. <ProgressBar Value="60" Style="{DynamicResource progress-bar-info}"></ProgressBar>
  4. <ProgressBar Value="80" Style="{DynamicResource progress-bar-warning}"></ProgressBar>
  5. <ProgressBar Value="100" Style="{DynamicResource progress-bar-danger}"></ProgressBar>

面板

<ContentControl>样式 panel

基本实例

效果

代码

  1. <ContentControl Style="{StaticResource panel-default}">
  2. <ContentControl Style="{StaticResource panel-body}" Content="内容 Padding=15"/>
  3. </ContentControl>
带标题的面版

效果

代码

  1. <ContentControl Style="{StaticResource panel-default}">
  2. <StackPanel>
  3. <ContentControl Style="{StaticResource panel-heading-default}" Content="标题 Padding=15,10"/>
  4. <ContentControl Style="{StaticResource panel-body}" Content="内容"/>
  5. </StackPanel>
  6. </ContentControl>
带脚注的面版

效果

代码

  1. <ContentControl Style="{StaticResource panel-default}">
  2. <StackPanel>
  3. <ContentControl Style="{StaticResource panel-body}" Content="内容"/>
  4. <ContentControl Style="{StaticResource panel-footer-default}" Content="脚标 Padding=15,10"/>
  5. </StackPanel>
  6. </ContentControl>
情境效果

效果

代码

  1. <ContentControl Style="{StaticResource panel-primary}">
  2. <StackPanel>
  3. <ContentControl Style="{StaticResource panel-heading-primary}" Content="primary"/>
  4. <ContentControl Style="{StaticResource panel-body}">
  5. <ContentControl.Content>
  6. <Grid>
  7. <Grid.ColumnDefinitions>
  8. <ColumnDefinition Width="auto"></ColumnDefinition>
  9. <ColumnDefinition></ColumnDefinition>
  10. </Grid.ColumnDefinitions>
  11. <Grid.RowDefinitions>
  12. <RowDefinition Height="40"></RowDefinition>
  13. <RowDefinition Height="40"></RowDefinition>
  14. </Grid.RowDefinitions>
  15. <Label Grid.Column="0" Grid.Row="0" Content="内容:" VerticalAlignment="Center"></Label>
  16. <TextBox Grid.Column="1" Grid.Row="0" Margin="5,0,0,0" Text="BorderBrush=#428bca Foreground=#fff Background=#428bca"></TextBox>
  17. <Label Grid.Column="0" Grid.Row="1" Content="内容:" VerticalAlignment="Center"></Label>
  18. <TextBox Grid.Column="1" Grid.Row="1" Margin="5,0,0,0" Text="BorderBrush=#428bca Foreground=#fff Background=#428bca"></TextBox>
  19. </Grid>
  20. </ContentControl.Content>
  21. </ContentControl>
  22. </StackPanel>
  23. </ContentControl>
  24. <ContentControl Style="{StaticResource panel-success}">
  25. <StackPanel>
  26. <ContentControl Style="{StaticResource panel-heading-success}" Content="success"/>
  27. <ContentControl Style="{StaticResource panel-body}" Content="BorderBrush=#d6e9c6 Foreground=#3c763d Background=#dff0d8"/>
  28. </StackPanel>
  29. </ContentControl>
  30. <ContentControl Style="{StaticResource panel-info}">
  31. <StackPanel>
  32. <ContentControl Style="{StaticResource panel-heading-info}" Content="info"/>
  33. <ContentControl Style="{StaticResource panel-body}" Content="BorderBrush=#bce8f1 Foreground=#31708f Background=#d9edf7"/>
  34. </StackPanel>
  35. </ContentControl>
  36. <ContentControl Style="{StaticResource panel-warning}">
  37. <StackPanel>
  38. <ContentControl Style="{StaticResource panel-heading-warning}" Content="warning"/>
  39. <ContentControl Style="{StaticResource panel-body}" Content="BorderBrush=#faebcc Foreground=#8a6d3b Background=#fcf8e3"/>
  40. </StackPanel>
  41. </ContentControl>
  42. <ContentControl Style="{StaticResource panel-danger}">
  43. <StackPanel>
  44. <ContentControl Style="{StaticResource panel-heading-danger}" Content="danger"/>
  45. <ContentControl Style="{StaticResource panel-body}" Content="BorderBrush=#ebccd1 Foreground=#a94442 Background=#f2dede"/>
  46. </StackPanel>
  47. </ContentControl>

Glyphicons 字体图标

path资源,详情见http://www.cnblogs.com/tsliwei/p/6378659.html

效果

代码

  1. <Path Style="{DynamicResource glyphicon}" Data="{DynamicResource glyphicon-asterisk}"></Path>

日期选择

<DatePicker>样式 datepicker 参考textbox

效果

代码

  1. <DatePicker/>
  2. <DatePicker IsEnabled="False"/>
  3. <DatePicker Style="{StaticResource datepicker has-success}"/>
  4. <DatePicker Style="{StaticResource datepicker has-warning}"/>
  5. <DatePicker Style="{StaticResource datepicker has-error}"/>

2016-12-17更新:

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

2016-12-19更新:

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

2017-02-08更新:

添加Glyphicons字体图标

2018-04-03更新:

添加日期控件样式

源码下载:BootstrapWpfStyle.zip

Bootstrap WPF Style,Bootstrap风格的WPF样式的更多相关文章

  1. C#工具:Bootstrap WPF Style,Bootstrap风格的WPF样式

    简介 GitHub地址:https://github.com/ptddqr/bootstrap-wpf-style 此样式基于bootstrap-3.3.0,样式文件里的源码行数都是指的这个版本.CS ...

  2. Bootstrap WPF Style(二)--Glyphicons 字体图标

    介绍 关于Glyphicons字体图标,首先给出友情链接 Glyphicons 这个项目是在Bootstrap WPF Style项目基础上做的,详见http://www.cnblogs.com/ts ...

  3. WPF 动态添加控件以及样式字典的引用(Style introduction)

    原文:WPF 动态添加控件以及样式字典的引用(Style introduction) 我们想要达到的结果是,绑定多个Checkbox然后我们还可以获取它是否被选中,其实很简单,我们只要找到那几个关键的 ...

  4. [WPF]控件应用多个样式

    最近在做WPF项目,公司没有专门的UI工程师,什么都要自己做.接触WPF已经有好几年了,自定义样式什么的也可以做一些.WPF在使用样式的时候一般都是 Style="{StaticResour ...

  5. [WPF]控件应用多个样式(转)

    最近在做WPF项目,公司没有专门的UI工程师,什么都要自己做.接触WPF已经有好几年了,自定义样式什么的也可以做一些.WPF在使用样式的时候一般都是 Style="{StaticResour ...

  6. WPF实现斜纹圆角进度条样式

    原文:WPF实现斜纹圆角进度条样式 运行效果: 进度条样式: <!--进度条样式--> <LinearGradientBrush x:Key="ProgressBar.Pr ...

  7. Bootstrap中关于input里file的样式更改

    给input里file类型加button样式 1.在Bootstrap中input里的file类型样式很不美观,一个按钮加一段文字,还会随浏览器的不同呈现不同的样式,所以开发的时候可以将file的样式 ...

  8. bootstrap课程4 bootstrap的css样式有哪些内容需要注意

    bootstrap课程4 bootstrap的css样式有哪些内容需要注意 一.总结 一句话总结: 1.如何选择产品(框架)的版本? 大版本下的最后一个版本,但是同时又要选择稳定的版本,也就是如果做产 ...

  9. bootstrap课程3 bootstrap中常用的排版样式有哪些

    bootstrap课程3 bootstrap中常用的排版样式有哪些 一.总结 一句话总结:bootstrap里面对常用表情比如p.h1.code等html中的常用表情都修改了样式,照着手册用就好,样式 ...

随机推荐

  1. mysql每秒最多能插入多少条数据 ? 死磕性能压测

    前段时间搞优化,最后瓶颈发现都在数据库单点上. 问DBA,给我的写入答案是在1W(机械硬盘)左右. 联想起前几天infoQ上一篇文章说他们最好的硬件写入速度在2W后也无法提高(SSD硬盘) 但这东西感 ...

  2. Jquery的点击事件,三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  3. LeetCode-3LongestSubstringWithoutRepeatingCharacters(C#)

    # 题目 3. Longest Substring Without Repeating Characters Given a string, find the length of the longes ...

  4. Linux scp 设置nohup后台运行

    Linux scp 设置nohup后台运行 1.正常执行scp命令 2.输入ctrl + z 暂停任务 3.bg将其放入后台 4.disown -h 将这个作业忽略HUP信号 5.测试会话中断,任务继 ...

  5. SQL Server 2014 新特性——内存数据库

    SQL Server 2014 新特性——内存数据库 目录 SQL Server 2014 新特性——内存数据库 简介: 设计目的和原因: 专业名词 In-Memory OLTP不同之处 内存优化表 ...

  6. Xamarin+Prism小试牛刀:定制跨平台Outlook邮箱应用(后续)

    在[Xamarin+Prism小试牛刀:定制跨平台Outlook邮箱应用]里面提到了Microsoft 身份认证,其实这也是一大块需要注意的地方,特作为后续补充这些知识点.上章是使用了Microsof ...

  7. nginx源码分析之网络初始化

    nginx作为一个高性能的HTTP服务器,网络的处理是其核心,了解网络的初始化有助于加深对nginx网络处理的了解,本文主要通过nginx的源代码来分析其网络初始化. 从配置文件中读取初始化信息 与网 ...

  8. bzoj4724--数论

    题目大意: B进制数,每个数字i(i=0,1,...,B-1)有a[i]个.你要用这些数字组成一个最大的B进制数X(不能有前导零,不需要 用完所有数字),使得X是B-1的倍数.q次询问,每次询问X在B ...

  9. Block解析(iOS)

    1. 操作系统中的栈和堆 我们先来看看一个由C/C++/OBJC编译的程序占用内存分布的结构: 栈区(stack):由系统自动分配,一般存放函数参数值.局部变量的值等.由编译器自动创建与释放.其操作方 ...

  10. 2000条你应知的WPF小姿势 基础篇<51-56 依赖属性>

    前一阵子由于个人生活原因,具体见上一篇,耽搁了一阵子,在这里也十分感谢大家支持和鼓励.现在开始继续做WPF2000系列. 在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件 ...