Bootstrap style _javascript techniques for WPF styles

Brief introduction

This style is based on bootstrap-3.3.0, and the number of source lines in the style file refers to this version. CSS source files are placed under the content folder of the Bootstrap.css

WPF styles and CSS are still not the same, so some content implementations are slightly different, some content usage is not the same, some content is not implemented

But at least, some concept, size and color, still good for reference

Blog descriptions are written in the order of Bootstrap official documents

App.xaml Reference Bootstrap.xaml Resources

<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<resourcedictionary source= "pack://application:,,,/bootstrapwpfstyle;component/styles/bootstrap.xaml"/ >
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</ Application.resources>

Typesetting

Title

<Label> style H1 to H6

Effect

Code

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

Subtitle

<Label> style H1 small to H6 small. When used and caption in a <StackPanel> to easily align

Effect

Code

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

Code

Inline code

<Label> style code. Use and other <Label> put in a <StackPanel>

Effect

Code

<stackpanel orientation= "Horizontal" >
<label content= "Inline code: for example," ></Label>
< Label content= "<section>" style= "{DynamicResource code}" ></Label>
<label content= "should be Wrapped as inline. " ></Label>
</StackPanel>

User input

<Label> style kbd. Use and other <Label> put in a <StackPanel>

Effect

Code

<stackpanel orientation= "Horizontal" >
<label content= "user input: To edit settings, press ></Label>
<label content= "Ctrl +," style= "{DynamicResource kbd}" ></Label>
</StackPanel>

code block

<Label> Style Pre

Effect

Code

<label xml:space= "preserve" style= "{DynamicResource pre}" > code block:
foreground: #333
Background: #f5f5f5
BorderBrush: #ccc </Label>

Secondary text

<Label> style help-block. Note: Secondary text in the bootstrap form style, the original interpretation: for the form control of the block-level auxiliary text. I didn't build a form form, so I wrote it here.

Effect

Code

<label content= "Auxiliary text: Above for code block" style= "{DynamicResource Help-block}" ></Label>

Form

<DataGrid> style defaults to this set of styles without referencing

Effect

Code

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

Form

WPF does not have a form concept, so the description is not in the order of the official document

Text input Box

<TextBox> style control dimensions only support default styles

Effect

Code

<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} "/>

Password box

<PasswordBox> style control dimensions only support default styles

Effect

Code

<passwordbox password= "PasswordBox"/> <passwordbox password= "PasswordBox IsEnabled=False"
False "/>
<passwordbox password= passwordbox has-success" style= "{StaticResource has-success}"/>
<passwordbox password= "PasswordBox has-warning" style= "{StaticResource has-warning}"/>
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> style CheckBox and bootstrap some different styles of writing

Effect

Code

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

Single selection box

<RadioButton> Styles Radio and bootstrap have different styles of writing

Effect

Code

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

Drop down box

<ComboBox> style default to this group of styles, do not refer to the GIF screenshot of the reason, do not see the dropdown

Effect

Code

<ComboBox>
<ComboBoxItem> Apple </ComboBoxItem>
<ComboBoxItem> rubber </comboboxitem >
<ComboBoxItem> Orange </ComboBoxItem>
</ComboBox>
<combobox iseditable= "True" >
<ComboBoxItem> Apple </ComboBoxItem>
<ComboBoxItem> rubber </ComboBoxItem>
< comboboxitem> Orange </ComboBoxItem>
</ComboBox>
<combobox isenabled= "False" >
< comboboxitem> Apple </ComboBoxItem>
<ComboBoxItem> rubber </ComboBoxItem>
<comboboxitem > Orange </ComboBoxItem>
</ComboBox>

Button

Button

<Button> style BTN

Effect

Code

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

Toggle button

<ToggleButton> style tbtn. There is no toggle button in the bootstrap, the same as the button, press down the effect is the button <Button> click Effect

Effect

Code

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

Auxiliary class

Contextual colors

<Label> Style Text context

Effect

Code

<label content= "text-muted: hint, use light gray" style= "{DynamicResource text-muted}" ></Label>
<label content= "Text-primary: Main, using Blue" style= "{DynamicResource text-primary}" ></Label>
<label content= "text-success: Success, use light green" style= "{DynamicResource text-success}" ></Label>
<label content= "TEXT-INFO: Notification information, using light blue" style= "{DynamicResource text-info}" ></Label>
<label content= "text-warning: Warning, using yellow" style= "{DynamicResource text-warning}" ></Label>
<label content= "Text-danger: Dangerous, use brown" style= "{DynamicResource Text-danger}" ></Label>

Contextual Backgrounds

<Label> Style Text BG context

Effect

Code

<label content= "text bg-primary: Main, use blue, foreground use white" style= "{DynamicResource text bg-primary}" ></label >
<label content= "text bg-success: successful, using light green" style= "{DynamicResource text bg-success}" ></Label>
<label content= "text bg-info: Notification information, using light blue" style= "{DynamicResource text Bg-info}" ></Label>
< Label content= "text bg-warning: Warning, using yellow" style= "{DynamicResource text bg-warning}" ></Label>
<label content= "text Bg-danger: Dangerous, use brown" style= "{DynamicResource text Bg-danger}" ></Label>

Input Box Group

Plug - ins

<TextBox>The Style input-group-addon input box <Label>, is actually not a plug-in, addon this word, using Baidu translation, translated into Plug-ins .<label> the contents of the display binding to the Tag property

Effect

Code

<textbox text= "input group to left with plug-in" tag= "@" style= "{DynamicResource Input-group-addon left}" ></TextBox>
< TextBox text= "tag=" style= "{DynamicResource Input-group-addon right}" with the plug-in's input group "" on the right-hand side. ></TextBox>

Buttons as extra elements

<TextBox> style input-group-btn input box The content shown in <Button>,<Button> is bound to the Tag property

Effect

Code

Xmal Code:

<textbox text= "input group with buttons on left" tag= "go!" Style= "{DynamicResource input-group-btn left}" button.click= "Inputgroupbutton_click" ></TextBox>
< TextBox text= "right button input Group" style= "{DynamicResource input-group-btn rights}" button.click= "Inputgroupbutton_click" >
<TextBox.Tag>
<path style= "{DynamicResource Inputgrouppathstyle}" data= "{DynamicResource Pathdatasearch} "></Path>
</TextBox.Tag>
</TextBox>

Background Code C #:

private void Inputgroupbutton_click (object sender, RoutedEventArgs e)
{
MessageBox.Show ((TextBox) sender). Text);
}

Progress bar

<ProgressBar> style Progress-bar

Effect

Code

<progressbar value= "style=" {DynamicResource Progress-bar} "></ProgressBar>
<progressbar Value= "Style=" "{DynamicResource progress-bar-success}" ></ProgressBar>
<progressbar value= "60" Style= "{DynamicResource progress-bar-info}" ></ProgressBar>
<progressbar value= "style=" { DynamicResource progress-bar-warning} "></ProgressBar>
<progressbar value=" style= "{ DynamicResource Progress-bar-danger} "></ProgressBar>

Panel

<ContentControl>Stylepanel

Basic example

Effect

Code

<contentcontrol style= "{StaticResource Panel-default}" >
<contentcontrol style= "{StaticResource Panel-body} "content=" Content padding=15/>
</ContentControl>

Face Plate with Title

Effect

Code

<contentcontrol style= "{StaticResource Panel-default}" >
<StackPanel>
<contentcontrol Style= ' {StaticResource panel-heading-default} ' content= ' title padding=15,10 '/> <contentcontrol Style=
' { StaticResource Panel-body} "content= content"/>
</StackPanel>
</ContentControl>

Face plate with footnotes

Effect

Code

<contentcontrol style= "{StaticResource Panel-default}" >
<StackPanel>
<contentcontrol Style = ' {StaticResource panel-body} ' content= ' content '/>
<contentcontrol style= ' {StaticResource Panel-footer-default} "content=" Pin padding=15,10 "/>
</StackPanel>
</ContentControl>

Situational effects

Effect

Code

<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= ></RowDefinition> <rowdefinition height= "40" ></RowDefinition> </Grid.RowDefinitions> <label grid.column= "0" grid.row= "0" content= "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= "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 >

Source Download: Http://xiazai.jb51.net/201612/yuanma/http://demo.jb51.net/js/2016/BootstrapWpfStyle