Bootstrap-style WPF Style

This style is based on bootstrap-3.3.0, and the number of lines in the source code in the style file refers to this version. This article mainly introduces the relevant information of the Bootstrap style WPF style. For more information, see the introduction below.

Bytes

The WPF style and CSS are still not the same, so some content implementation is slightly different, some content usage is not the same, some content is not implemented

But at least, some concepts, sizes and colors are good references.

Blog instructions are written in the order of official Bootstrap documents

Reference Bootstrap. xaml resources in App. xaml

Typographical

Title

Style h1 to h6

Effect

Code

Subtitle

Style h1 small to h6 small. Put the title in one Easy to align

Effect

Code

Code

Inline code

Style code. used and otherPut one Li

Effect

Code

User input

Style kbd. used and otherPut one Li

Effect

Code

Code block

Style pre

Effect

Code

Code block: Foreground: #333 Background: # f5f5f5BorderBrush: # ccc

Auxiliary text

Style help-block. note: The auxiliary text is in the Bootstrap form style. The original explanation is as follows: the "block" level auxiliary text of the form control. I didn't create a form, so I wrote it here

Effect

Code

Table

By default, Styles belong to this group of styles and do not need to be referenced.

Code

Form

WPF does not have the form concept, so the instructions are not in the order of official documents.

Text input box

Only the default style is supported for style controls.

Effect

Code

Style checkbox and Bootstrap have different styles written by themselves.

Effect

Code

Single region

Style radio and Bootstrap have different styles.

Effect

Code

Drop-down list

By default, styles are in this group of styles. You do not need to reference gif because you cannot see the drop-down list.

Effect

Code

 
  
   
Apple
  
  
   
Rubber
  
  
   
Orange
  
 
 
  
   
Apple
  
  
   
Rubber
  
  
   
Orange
  
 
 
  
   
Apple
  
  
   
Rubber
  
  
   
Orange
  
 

Button

Style btn

Code

Switch button

There is no switch button in style tbtn. Bootstrap. This is the same as the button. The effect of pressing the button is Click Effect

Effect

Code

Auxiliary class

Contextual colors

Style text context

Effect

Code

Input box Group

Plug-ins

Style input-group-addon input box contains one In fact, it is not a plug-in. The addon word is translated into a plug-in using Baidu translation.Bind the content to the Tag attribute.

Effect

Code

Button as an additional element

Style input-group-btn input box contains one

, Bind the content to the Tag attribute.

Effect

Code

Xmal code:

Background code C #:

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

Progress bar

Style progress-bar

Effect

Code

Panel

Style panel

Basic instance

Effect

Code

Area with title

Effect

Code

Area with a footer

Effect

Code

Situational Effect

Effect

Code

For more articles about the Bootstrap-style WPF style, refer to the PHP Chinese website!