Bootstrap风格的WPF样式


Posted in Javascript onDecember 07, 2016

简介

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

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

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

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

App.xaml里引用Bootstrap.xaml资源

<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/BootstrapWpfStyle;component/Styles/Bootstrap.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>

排版

标题

<Label>样式 h1到h6

效果

Bootstrap风格的WPF样式

代码

<Label Content="h1. Bootstrap heading" Style="{DynamicResource h1}"></Label>
<Label Content="h2. Bootstrap heading" Style="{DynamicResource h2}"></Label>
<Label Content="h3. Bootstrap heading" Style="{DynamicResource h3}"></Label>
<Label Content="h4. Bootstrap heading" Style="{DynamicResource h4}"></Label>
<Label Content="h5. Bootstrap heading" Style="{DynamicResource h5}"></Label>
<Label Content="h6. Bootstrap heading" Style="{DynamicResource h6}"></Label>

副标题

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

效果

Bootstrap风格的WPF样式

代码

<StackPanel Orientation="Horizontal">
<Label Content="h1. Bootstrap heading" Style="{DynamicResource h1}"></Label>
<Label Content="Secondary text" Style="{DynamicResource h1 small}"></Label>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="h2. Bootstrap heading" Style="{DynamicResource h2}"></Label>
<Label Content="Secondary text" Style="{DynamicResource h2 small}"></Label>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="h3. Bootstrap heading" Style="{DynamicResource h3}"></Label>
<Label Content="Secondary text" Style="{DynamicResource h3 small}"></Label>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="h4. Bootstrap heading" Style="{DynamicResource h4}"></Label>
<Label Content="Secondary text" Style="{DynamicResource h4 small}"></Label>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="h5. Bootstrap heading" Style="{DynamicResource h5}"></Label>
<Label Content="Secondary text" Style="{DynamicResource h5 small}"></Label>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="h6. Bootstrap heading" Style="{DynamicResource h6}"></Label>
<Label Content="Secondary text" Style="{DynamicResource h6 small}"></Label>
</StackPanel>

代码

内联代码

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

效果

Bootstrap风格的WPF样式

代码

<StackPanel Orientation="Horizontal">
<Label Content="内联代码:For example, "></Label>
<Label Content="<section>" Style="{DynamicResource code}"></Label>
<Label Content=" should be wrapped as inline."></Label>
</StackPanel>

用户输入

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

效果

Bootstrap风格的WPF样式

代码

<StackPanel Orientation="Horizontal">
<Label Content="用户输入:To edit settings, press "></Label>
<Label Content="ctrl + ," Style="{DynamicResource kbd}"></Label>
</StackPanel>

代码块

<Label>样式 pre

效果

Bootstrap风格的WPF样式

代码

<Label xml:space="preserve" Style="{DynamicResource pre}">代码块:
Foreground:#333
Background:#f5f5f5
BorderBrush:#ccc</Label>

辅助文本

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

效果

Bootstrap风格的WPF样式

代码

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

表格

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

效果

Bootstrap风格的WPF样式

代码

<DataGrid AutoGenerateColumns="False" DataContext="{Binding Source={StaticResource SampleDataSource}}" ItemsSource="{Binding Collection}">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Property1}" Header="Property1" ElementStyle="{StaticResource DataGridTextCenter}"/>
<DataGridTextColumn Binding="{Binding Property2}" Header="Property2" ElementStyle="{StaticResource DataGridTextCenter}"/>
<DataGridTextColumn Binding="{Binding Property3}" Header="Property3" ElementStyle="{StaticResource DataGridTextCenter}"/>
</DataGrid.Columns>
</DataGrid>

表单

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

文本输入框

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

效果

Bootstrap风格的WPF样式

代码

<TextBox Text="TextBox"/>
<TextBox Text="TextBox IsReadOnly=True" IsReadOnly="True"/>
<TextBox Text="TextBox IsEnabled=False" IsEnabled="False"/>
<TextBox Text="TextBox has-success" Style="{StaticResource has-success}"/>
<TextBox Text="TextBox has-warning" Style="{StaticResource has-warning}"/>
<TextBox Text="TextBox has-error" Style="{StaticResource has-error}"/>
<TextBox Text="TextBox input-sm" Style="{StaticResource input-sm}"/>
<TextBox Text="TextBox input-lg" Style="{StaticResource input-lg}"/>

密码框

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

效果

Bootstrap风格的WPF样式

代码

<PasswordBox Password="PasswordBox"/>
<PasswordBox Password="PasswordBox IsEnabled=False" IsEnabled="False"/>
<PasswordBox Password="PasswordBox has-success" Style="{StaticResource has-success}"/>
<PasswordBox Password="PasswordBox has-warning" Style="{StaticResource has-warning}"/>
<PasswordBox Password="PasswordBox has-error" Style="{StaticResource has-error}"/>
<PasswordBox Password="PasswordBox input-sm" Style="{StaticResource input-sm}"/>
<PasswordBox Password="PasswordBox input-lg" Style="{StaticResource input-lg}"/>

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

效果

Bootstrap风格的WPF样式

代码

<CheckBox Content="default"></CheckBox>
<CheckBox Content="checkbox has-success" Style="{DynamicResource checkbox has-success}" IsChecked="{x:Null}"></CheckBox>
<CheckBox Content="checkbox has-warning" Style="{DynamicResource checkbox has-warning}" IsChecked="False"></CheckBox>
<CheckBox Content="checkbox has-error" Style="{DynamicResource checkbox has-error}" IsChecked="True"></CheckBox>

单选框

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

效果

Bootstrap风格的WPF样式

代码

<RadioButton Content="default"></RadioButton>
<RadioButton Content="radio has-success" Style="{DynamicResource radio has-success}"></RadioButton>
<RadioButton Content="radio has-warning" Style="{DynamicResource radio has-warning}"></RadioButton>
<RadioButton Content="radio has-error" Style="{DynamicResource radio has-error}" IsChecked="True"></RadioButton>

下拉框

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

效果

Bootstrap风格的WPF样式

代码

<ComboBox>
<ComboBoxItem>苹果</ComboBoxItem>
<ComboBoxItem>橡胶</ComboBoxItem>
<ComboBoxItem>桔子</ComboBoxItem>
</ComboBox>
<ComboBox IsEditable="True">
<ComboBoxItem>苹果</ComboBoxItem>
<ComboBoxItem>橡胶</ComboBoxItem>
<ComboBoxItem>桔子</ComboBoxItem>
</ComboBox>
<ComboBox IsEnabled="False">
<ComboBoxItem>苹果</ComboBoxItem>
<ComboBoxItem>橡胶</ComboBoxItem>
<ComboBoxItem>桔子</ComboBoxItem>
</ComboBox>

按钮

按钮

<Button>样式 btn

效果

Bootstrap风格的WPF样式

代码

<Button Content="default"></Button>
<Button Content="primary" Style="{DynamicResource btn-primary}"></Button>
<Button Content="success" Style="{DynamicResource btn-success}"></Button>
<Button Content="info" Style="{DynamicResource btn-info}"></Button>
<Button Content="warning" Style="{DynamicResource btn-warning}"></Button>
<Button Content="danger" Style="{DynamicResource btn-danger}"></Button>

切换按钮

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

效果

Bootstrap风格的WPF样式

代码

<ToggleButton Content="default"></ToggleButton>
<ToggleButton Content="primary" Style="{DynamicResource tbtn-primary}"></ToggleButton>
<ToggleButton Content="success" Style="{DynamicResource tbtn-success}"></ToggleButton>
<ToggleButton Content="info" Style="{DynamicResource tbtn-info}"></ToggleButton>
<ToggleButton Content="warning" Style="{DynamicResource tbtn-warning}"></ToggleButton>
<ToggleButton Content="danger" Style="{DynamicResource tbtn-danger}"></ToggleButton>

辅助类

Contextual colors

<Label>样式 text 语境

效果

Bootstrap风格的WPF样式

代码

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

Contextual backgrounds

<Label>样式 text bg 语境

效果

Bootstrap风格的WPF样式

代码

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

输入框组

插件

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

效果

Bootstrap风格的WPF样式

代码

<TextBox Text="左边带插件的输入组" Tag="@" Style="{DynamicResource input-group-addon left}"></TextBox>
<TextBox Text="右边带插件的输入组" Tag=".00" Style="{DynamicResource input-group-addon right}"></TextBox>

作为额外元素的按钮

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

效果

Bootstrap风格的WPF样式

代码

xmal代码:

<TextBox Text="左边带按钮的输入组" Tag="GO!" Style="{DynamicResource input-group-btn left}" Button.Click="InputGroupButton_Click"></TextBox>
<TextBox Text="右边带按钮的输入组" Style="{DynamicResource input-group-btn right}" Button.Click="InputGroupButton_Click">
<TextBox.Tag>
<Path Style="{DynamicResource InputGroupPathStyle}" Data="{DynamicResource PathDataSearch}"></Path>
</TextBox.Tag>
</TextBox>

后台代码C#:

private void InputGroupButton_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show(((TextBox)sender).Text);
}

进度条

<ProgressBar>样式 progress-bar

效果

Bootstrap风格的WPF样式

代码

<ProgressBar Value="20" Style="{DynamicResource progress-bar}"></ProgressBar>
<ProgressBar Value="40" Style="{DynamicResource progress-bar-success}"></ProgressBar>
<ProgressBar Value="60" Style="{DynamicResource progress-bar-info}"></ProgressBar>
<ProgressBar Value="80" Style="{DynamicResource progress-bar-warning}"></ProgressBar>
<ProgressBar Value="100" Style="{DynamicResource progress-bar-danger}"></ProgressBar>

面板

<ContentControl>样式 panel

基本实例

效果

Bootstrap风格的WPF样式

代码

<ContentControl Style="{StaticResource panel-default}">
<ContentControl Style="{StaticResource panel-body}" Content="内容 Padding=15"/>
</ContentControl>

带标题的面版

效果

Bootstrap风格的WPF样式

代码

<ContentControl Style="{StaticResource panel-default}">
<StackPanel>
<ContentControl Style="{StaticResource panel-heading-default}" Content="标题 Padding=15,10"/>
<ContentControl Style="{StaticResource panel-body}" Content="内容"/>
</StackPanel>
</ContentControl>

带脚注的面版

效果

Bootstrap风格的WPF样式

代码

<ContentControl Style="{StaticResource panel-default}">
<StackPanel>
<ContentControl Style="{StaticResource panel-body}" Content="内容"/>
<ContentControl Style="{StaticResource panel-footer-default}" Content="脚标 Padding=15,10"/>
</StackPanel>
</ContentControl>

情境效果

效果

Bootstrap风格的WPF样式

代码

<ContentControl Style="{StaticResource panel-primary}">
<StackPanel>
<ContentControl Style="{StaticResource panel-heading-primary}" Content="primary"/>
<ContentControl Style="{StaticResource panel-body}">
<ContentControl.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Content="内容:" VerticalAlignment="Center"></Label>
<TextBox Grid.Column="1" Grid.Row="0" Margin="5,0,0,0" Text="BorderBrush=#428bca Foreground=#fff Background=#428bca"></TextBox>
<Label Grid.Column="0" Grid.Row="1" Content="内容:" VerticalAlignment="Center"></Label>
<TextBox Grid.Column="1" Grid.Row="1" Margin="5,0,0,0" Text="BorderBrush=#428bca Foreground=#fff Background=#428bca"></TextBox>
</Grid>
</ContentControl.Content>
</ContentControl>
</StackPanel>
</ContentControl>
<ContentControl Style="{StaticResource panel-success}">
<StackPanel>
<ContentControl Style="{StaticResource panel-heading-success}" Content="success"/>
<ContentControl Style="{StaticResource panel-body}" Content="BorderBrush=#d6e9c6 Foreground=#3c763d Background=#dff0d8"/>
</StackPanel>
</ContentControl>
<ContentControl Style="{StaticResource panel-info}">
<StackPanel>
<ContentControl Style="{StaticResource panel-heading-info}" Content="info"/>
<ContentControl Style="{StaticResource panel-body}" Content="BorderBrush=#bce8f1 Foreground=#31708f Background=#d9edf7"/>
</StackPanel>
</ContentControl>
<ContentControl Style="{StaticResource panel-warning}">
<StackPanel>
<ContentControl Style="{StaticResource panel-heading-warning}" Content="warning"/>
<ContentControl Style="{StaticResource panel-body}" Content="BorderBrush=#faebcc Foreground=#8a6d3b Background=#fcf8e3"/>
</StackPanel>
</ContentControl>
<ContentControl Style="{StaticResource panel-danger}">
<StackPanel>
<ContentControl Style="{StaticResource panel-heading-danger}" Content="danger"/>
<ContentControl Style="{StaticResource panel-body}" Content="BorderBrush=#ebccd1 Foreground=#a94442 Background=#f2dede"/>
</StackPanel>
</ContentControl>

源码下载:http://xiazai.3water.com/201612/yuanma/http://demo.3water.com/js/2016/BootstrapWpfStyle

Javascript 相关文章推荐
js用图作提交按钮或超连接
Mar 26 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 Javascript
验证码按回车不变解决方法
Mar 29 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
前端jquery部分很精彩
May 03 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 #Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 #Javascript
详解ES6中的let命令
Apr 05 #Javascript
jquery操作ID带有变量的节点实例
Dec 07 #Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 #Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 #Javascript
浅述Javascript的外部对象
Dec 07 #Javascript
You might like
php 函数使用方法与函数定义方法
2010/05/09 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
python封装对象实现时间效果
2020/04/23 Python
Python help()函数用法详解
2014/03/11 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
python使用turtle库绘制时钟
2020/03/25 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
如何在python中实现随机选择
2019/11/02 Python
Python项目打包成二进制的方法
2020/12/30 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
HEMA英国:荷兰原创设计
2018/08/28 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
普通大学毕业生自荐信范文
2014/02/23 职场文书
党员三严三实心得体会
2014/10/13 职场文书
英文感谢信格式
2015/01/21 职场文书
体育教师个人总结
2015/02/09 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
Redis入门教程详解
2021/08/30 Redis