Bootstrap风格的WPF样式(2)

<TextBox Text="TextBox"/> <TextBox Text="TextBox IsReadOnly=True" IsReadOnly="True"/> <TextBox Text="TextBox IsEnabled=False" IsEnabled="False"/> <TextBox Text="TextBox has-success"/> <TextBox Text="TextBox has-warning"/> <TextBox Text="TextBox has-error"/> <TextBox Text="TextBox input-sm"/> <TextBox Text="TextBox input-lg"/>

密码框

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

效果

代码

<PasswordBox Password="PasswordBox"/> <PasswordBox Password="PasswordBox IsEnabled=False" IsEnabled="False"/> <PasswordBox Password="PasswordBox has-success"/> <PasswordBox Password="PasswordBox has-warning"/> <PasswordBox Password="PasswordBox has-error"/> <PasswordBox Password="PasswordBox input-sm"/> <PasswordBox Password="PasswordBox input-lg"/>

<CheckBox>样式 checkbox 和Bootstrap有些不同 自己写的样式

效果

代码

<CheckBox Content="default"></CheckBox> <CheckBox Content="checkbox has-success" IsChecked="{x:Null}"></CheckBox> <CheckBox Content="checkbox has-warning" IsChecked="False"></CheckBox> <CheckBox Content="checkbox has-error" IsChecked="True"></CheckBox>

单选框

<RadioButton>样式 radio 和Bootstrap有些不同 自己写的样式

效果

代码

<RadioButton Content="default"></RadioButton> <RadioButton Content="radio has-success"></RadioButton> <RadioButton Content="radio has-warning"></RadioButton> <RadioButton Content="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"></Button> <Button Content="success"></Button> <Button Content="info"></Button> <Button Content="warning"></Button> <Button Content="danger"></Button>

切换按钮

<ToggleButton>样式 tbtn.Bootstrap中没有切换按钮,这里做成和按钮一样,按下去的效果就是按钮<Button>点击的效果

效果

代码

<ToggleButton Content="default"></ToggleButton> <ToggleButton Content="primary"></ToggleButton> <ToggleButton Content="success"></ToggleButton> <ToggleButton Content="info"></ToggleButton> <ToggleButton Content="warning"></ToggleButton> <ToggleButton Content="danger"></ToggleButton>

辅助类

Contextual colors

<Label>样式 text 语境

效果

代码