此样式基于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"></Label> <Label Content="h2. Bootstrap heading"></Label> <Label Content="h3. Bootstrap heading"></Label> <Label Content="h4. Bootstrap heading"></Label> <Label Content="h5. Bootstrap heading"></Label> <Label Content="h6. Bootstrap heading"></Label>
副标题
<Label>样式 h1 small到h6 small.使用时 和标题放到一个<StackPanel>里 方便对齐
效果
代码
<StackPanel Orientation="Horizontal"> <Label Content="h1. Bootstrap heading"></Label> <Label Content="Secondary text"></Label> </StackPanel> <StackPanel Orientation="Horizontal"> <Label Content="h2. Bootstrap heading"></Label> <Label Content="Secondary text"></Label> </StackPanel> <StackPanel Orientation="Horizontal"> <Label Content="h3. Bootstrap heading"></Label> <Label Content="Secondary text"></Label> </StackPanel> <StackPanel Orientation="Horizontal"> <Label Content="h4. Bootstrap heading"></Label> <Label Content="Secondary text"></Label> </StackPanel> <StackPanel Orientation="Horizontal"> <Label Content="h5. Bootstrap heading"></Label> <Label Content="Secondary text"></Label> </StackPanel> <StackPanel Orientation="Horizontal"> <Label Content="h6. Bootstrap heading"></Label> <Label Content="Secondary text"></Label> </StackPanel>
代码
内联代码
<Label>样式 code.使用时 和其他<Label>放到一个<StackPanel>里
效果
代码
<StackPanel Orientation="Horizontal"> <Label Content="内联代码:For example, "></Label> <Label Content="<section>"></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 + ,"></Label> </StackPanel>
代码块
<Label>样式 pre
效果
代码
<Label xml:space="preserve">代码块: Foreground:#333 Background:#f5f5f5 BorderBrush:#ccc</Label>
辅助文本
<Label>样式 help-block.注:辅助文本在Bootstrap表单样式里,原本的解释:针对表单控件的“块（block）”级辅助文本.我并没有建一个表单窗体,所以就写在了这里
效果
代码
<Label Content="辅助文本:上面为代码块"></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>样式 控件尺寸只支持默认样式
效果
代码