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

简介

github地址:

此样式基于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 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>

 

副标题效果

代码如下:

 <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="&lt;section&gt;" style="{dynamicresource code}"></label>
     <label content=" should be wrapped as inline."></label>
 </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

代码如下:

 <label xml:space="preserve" style="{dynamicresource pre}">代码块:
 foreground:#333
 background:#f5f5f5
 borderbrush:#ccc</label>

辅助文本效果

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

代码如下:

1 <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>

文本输入框效果

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

代码如下:

 <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>样式 控件尺寸只支持默认样式

代码如下:

 <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>

glyphicons 字体图标效果

path资源,详情见

 

代码

1 <path style="{dynamicresource glyphicon}" data="{dynamicresource glyphicon-asterisk}"></path>