Bootstrap风格的WPF样式(3)

<Label Content="text-muted：提示，使用浅灰色"></Label>
<Label Content="text-primary：主要，使用蓝色"></Label>
<Label Content="text-success：成功，使用浅绿色"></Label>
<Label Content="text-info：通知信息，使用浅蓝色"></Label>
<Label Content="text-warning：警告，使用黄色"></Label>
<Label Content="text-danger：危险，使用褐色"></Label>

Contextual backgrounds

<Label>样式 text bg 语境

效果

代码

<Label Content="text bg-primary：主要，使用蓝色，Foreground使用白色"></Label> <Label Content="text bg-success：成功，使用浅绿色"></Label> <Label Content="text bg-info：通知信息，使用浅蓝色"></Label> <Label Content="text bg-warning：警告，使用黄色"></Label> <Label Content="text bg-danger：危险，使用褐色"></Label>

输入框组

插件

<TextBox>样式 input-group-addon 输入框里带个<Label>,其实并不是插件,addon这个单词,使用百度翻译,翻译成插件.<Label>里显示的内容绑定到Tag属性

效果

代码

<TextBox Text="左边带插件的输入组" Tag="@"></TextBox> <TextBox Text="右边带插件的输入组" Tag=".00"></TextBox>

作为额外元素的按钮

<TextBox>样式 input-group-btn 输入框里带个<Button>,<Button>里显示的内容绑定到Tag属性

效果

代码

xmal代码:

<TextBox Text="左边带按钮的输入组" Tag="GO!" Button.Click="InputGroupButton_Click"></TextBox> <TextBox Text="右边带按钮的输入组" Button.Click="InputGroupButton_Click"> <TextBox.Tag> <Path 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"></ProgressBar> <ProgressBar Value="40"></ProgressBar> <ProgressBar Value="60"></ProgressBar> <ProgressBar Value="80"></ProgressBar> <ProgressBar Value="100"></ProgressBar>

面板

<ContentControl>样式 panel

基本实例

效果

代码

<ContentControl> <ContentControl Content="内容 Padding=15"/> </ContentControl>

带标题的面版

效果

代码

<ContentControl> <StackPanel> <ContentControl Content="标题 Padding=15,10"/> <ContentControl Content="内容"/> </StackPanel> </ContentControl>

带脚注的面版

效果

代码

<ContentControl> <StackPanel> <ContentControl Content="内容"/> <ContentControl Content="脚标 Padding=15,10"/> </StackPanel> </ContentControl>

情境效果

效果

代码

<ContentControl> <StackPanel> <ContentControl Content="primary"/> <ContentControl> <ContentControl.Content> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Label Grid.Column="0" Grid.Row="0" 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="内容:" 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> <StackPanel> <ContentControl Content="success"/> <ContentControl Content="BorderBrush=#d6e9c6 Foreground=#3c763d Background=#dff0d8"/> </StackPanel> </ContentControl> <ContentControl> <StackPanel> <ContentControl Content="info"/> <ContentControl Content="BorderBrush=#bce8f1 Foreground=#31708f Background=#d9edf7"/> </StackPanel> </ContentControl> <ContentControl> <StackPanel> <ContentControl Content="warning"/> <ContentControl Content="BorderBrush=#faebcc Foreground=#8a6d3b Background=#fcf8e3"/> </StackPanel> </ContentControl> <ContentControl> <StackPanel> <ContentControl Content="danger"/> <ContentControl Content="BorderBrush=#ebccd1 Foreground=#a94442 Background=#f2dede"/> </StackPanel> </ContentControl>

源码下载：://demo.jb51.net/js/2016/BootstrapWpfStyle

您可能感兴趣的文章: