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 相关文章推荐
JavaScript 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 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
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
PHP多文件上传类实例
2015/03/07 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
PHP中list方法用法示例
2016/12/01 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
python笔记(2)
2012/10/24 Python
Django中几种重定向方法
2015/04/28 Python
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
简单了解python PEP的一些知识
2019/07/13 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
Java如何格式化日期
2012/08/07 面试题
研发工程师岗位职责
2014/04/28 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书