简介
此样式基于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
效果
代码
<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>里 方便对齐
效果
代码
<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>里
效果
代码
<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>里
效果
代码
<stackpanel orientation="horizontal"> <label content="用户输入:to edit settings, press "></label> <label content="ctrl + ," style="{dynamicresource kbd}"></label> </stackpanel>
代码块
<label>样式 pre
效果
代码
<label xml:space="preserve" style="{dynamicresource pre}">代码块: foreground:#333 background:#f5f5f5 borderbrush:#ccc</label>
辅助文本
<label>样式 help-block.注:辅助文本在bootstrap表单样式里,原本的解释:针对表单控件的“块（block）”级辅助文本.我并没有建一个表单窗体,所以就写在了这里
效果
代码
<label content="辅助文本:上面为代码块" style="{dynamicresource help-block}"></label>
表格
<datagrid>样式 默认就这一组样式,不用引用
代码
<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>样式 控件尺寸只支持默认样式
效果
密码框
<passwordbox>样式 控件尺寸只支持默认样式
效果
代码
<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有些不同 自己写的样式
效果
代码
<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有些不同 自己写的样式
效果
代码
<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截图的原因,看不到下拉
效果
代码
<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
代码
<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>点击的效果
效果
代码
<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 语境
效果
代码
<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 语境
效果
代码
<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属性
效果
代码
<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属性
效果
代码
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
效果
代码
<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
基本实例
效果
代码
<contentcontrol style="{staticresource panel-default}"> <contentcontrol style="{staticresource panel-body}" content="内容 padding=15"/> </contentcontrol>
带标题的面版
效果
代码
<contentcontrol style="{staticresource panel-default}"> <stackpanel> <contentcontrol style="{staticresource panel-heading-default}" content="标题 padding=15,10"/> <contentcontrol style="{staticresource panel-body}" content="内容"/> </stackpanel> </contentcontrol>
带脚注的面版
效果
代码
<contentcontrol style="{staticresource panel-default}"> <stackpanel> <contentcontrol style="{staticresource panel-body}" content="内容"/> <contentcontrol style="{staticresource panel-footer-default}" content="脚标 padding=15,10"/> </stackpanel> </contentcontrol>
情境效果
效果
代码
<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>
更多bootstrap风格的wpf样式。