Bootstrap WPF Style,Bootstrap风格的WPF样式

分类：Bootstrap作者：编程之家用户

简介

GitHub地址:https://github.com/ptddqr/bootstrap-wpf-style

此样式基于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" 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" 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资源,详情见http://www.cnblogs.com/tsliwei/p/6378659.html

 

分享图片

代码

1 <Path Style="{DynamicResource glyphicon}" Data="{DynamicResource glyphicon-asterisk}"></Path>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Bootstrap 按钮总结
前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自己重新定义class类即可，主要样式要随具体情况而定包括位置任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。但是Bootstrap提供了一些选项来定义按钮的样式。<buttontype="button"class="btn">基本
Python学习-day52-bootstrap
起步导入：<linkrel="stylesheet"href="bootstrap-3.3.7-dist/css/bootstrap.css"><scriptsrc="js/jquery-3.3.1.js"></script><scriptsrc="bootstrap-3.3.7-dist/js/bootstrap.js"></script>屏幕
bootstrap 模态框
（1）modal声明一个模态框（2）modal-dialog定义模态框尺寸（3）modal-lg定义大尺寸模态框（4）modal-sm定义小尺寸模态框（5）modal-header（6）modal-body（7）modal-footer<!doctypehtml><html><head><metacharset="utf-8"><title>模态框<itle><linkrel=&quo
BootStrap图片样式
图片在Bootstrap版本3中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width:100%;、 height:auto; 和 display:block; 属性，从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居
bootstrap日期选择
<inputtype="text"class="form-controldatepicker"style="padding:0.375rem0.75rem;"placeholder="开始时间"readonly="true" id="start_time"name="start_time"> $(".datepicke
bootstrap-treeview 使用小记
目录bootstrap-treeview使用小记零、写在前面的话一、功能说明二、特性简述三、实战3.1依赖环境3.2数据源格式3.3Options选项3.4Methods方法3.5Events事件N-2、番外N-1、本文demoN、参考资料bootstrap-treeview使用小记零、写在前面的话p.s.bootst
bootstrap 在django中的使用
  一、应用http://www.bootcss.com/进入bootstrap4或bootstrap3中文网，想要快速地将Bootstrap应用到你的项目中，有以下两种办法： 1、bootstrap可以在线引用，方法如下：A、CSS将引入Bootstrap样式表的 <link> 标签复制并粘贴到 <head> 中，并放在所有其他样式表之前。<!
第87节：Java中的Bootstrap基础与SQL入门
第87节：Java中的Bootstrap基础与SQL入门前言复习什么是JQ？:writelessdomore写更少的代码，做更多的事找出所有兄弟：$("div").siblings()基本过滤器：选择器：过滤器$("div:first"):first:找到第一个元素:last:找到最后一个元素:even:找出偶数索引:odd:找出奇叔索引
bootstrap表单
1.bootstrap表单（1）form声明一个表单域（2）form-inline内联表单域（3）form-horizontal水平排列表单域（4）form-group表单组、包括表单文字和表单控件（5）form-control文本输入框、下拉列表控件样式（6）checkboxcheck-inline多选框样式（7）radioradio-inline单选框样式（8）input-group表单控件组
bootstrap-validator基本使用
<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>首页<itle><
算是立flag吧~~~看明天结果了~~~
嗯。。。以前做ssh。应该是stratusspringhibernate。 然后现在来了一个新的需求。 要用java，bootstrap，oracle，springboot，jquery，mybatis。 开始，我也挺心虚的，但是后来一看，，，其实本没有必要这么虚。。。毕竟。。。这些东西，写的有问题。。。问题在于没有逻辑。 bootstrap，j
BootStrap表格
表格基本实例为任意 <table> 标签添加 .table 类可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。
Bootstrap-查询按钮和重置按钮
1、问题背景   一般情况下，查询列表有查询条件、查询按钮和重置按钮，输入查询条件，点击查询按钮查询列表等数据；点击重置按钮会将查询条件恢复到原始状态 2、实现源码 <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>Bootstrap-查询按钮和重置按钮<
Bootstrap学习第一天笔记
Bootstrap简介什么是Bootstrap？Bootstrap官网框架：库liblibraryjQuery作为一个框架来讲，提供一套比较便捷的操作DOM的方式把大家都需要的功能预先写好到一些文件这就是一个框架Bootstrap让我们的Web开发更简单，更快捷；注意是Bootstrap不是BootStrap！这是一个词，不是
bootstrap 菜单
1.bootstrap图片img-responsive声明响应式图片2.bootstrap字体图标通过字体代替图标，font文件夹需要和css文件夹在同一目录3.bootst导航条（1）navbar声明导航条（2）navbar-default声明默认的导航条样式（3）navbar-inverse声明反白的导航条样式（4）navbar-static-top去掉导航条的圆角（5）n
bootstrap布局实例
1.路径导航<!doctypehtml><html><head><metacharset="utf-8"><title>路径导航<itle><linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css"><scripttype="text/ja
BootStrap中引用glyphicon图标无法显示【已解决】
问题描述：最近在学习BootStrap，过程中遇到引用glyphicon图标无法显示的问题，经过在百度后该问题已解决。1、首先看一下图标显示失败的页面：2、经过参考大佬们的经验，我找到了解决办法。首先我的BootStrap的css样式表是经过下载之后直接拷贝了其中一个文件到编译器中使用的，没有把所有
BootStrap系列：BootStrap布局
BootStrap布局一、BootStrap布局CSS组件主要包括栅格系统、列表组、进度条、icon图标、导航栏等组件。JavaScript插件主要有动画效果、窗体模式、下拉菜单、选项卡等二、网格系统Bootstrap内置了一套响应式、移动优先的流式栅格系统，随着屏幕设备或可视窗口（viewport）尺寸的
bootstrap-multiselect组件的使用
1引入所需要的文件2用法
bootstrap之table列内容超出部分省略号
想让bootstrap的table列内容超出部分省略号，要在table上加table-layout:fixed和word-break:break-all，然后在头部thead的th加上宽度百分比，最后在列里加个标签如span，在这个span加上单行超出部分省略号的css：display:inline-block，overflow:hidden，white-space:nowrap，text-overflow:e
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot