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 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
js模拟类继承小例子
Jul 17 Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
JS图片预加载插件详解
Jun 21 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
Node.js使用Angular简单示例
May 11 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
如何手写简易的 Vue Router
Oct 10 Javascript
JS+CSS实现动态时钟
Feb 19 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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
Django--权限Permissions的例子
2019/08/28 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
Python 在局部变量域中执行代码
2020/08/07 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
什么是接口(Interface)?
2013/02/01 面试题
房产公证书范本
2014/04/10 职场文书
优秀会计求职信
2014/07/04 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
学校社团活动总结
2015/05/07 职场文书
安全生产奖惩制度
2015/08/06 职场文书
深入理解Pytorch微调torchvision模型
2021/11/11 Python
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电