부트스트랩 스타일 WPF 스타일링-JS 튜토리얼-php.cn

소개

이 스타일은 bootstrap-3.3.0을 기반으로 합니다. 스타일 파일의 소스 코드 줄 수는 이 버전을 참조합니다. CSS 소스 파일은 bootstrap.css에 있습니다. 콘텐츠 폴더

WPF 스타일은 여전히 CSS와 동일하지 않으므로 일부 콘텐츠 구현에 약간의 차이가 있고, 일부 콘텐츠의 사용법이 다르며, 일부 콘텐츠가 구현되지 않습니다

그래도 최소한 컨셉이나 사이즈, 선택 색상은 여전히 좋은 참고용입니다

블로그 설명은 Bootstrap 공식 문서 순서대로 작성했습니다

Bootstrap.xaml 리소스가 인용되어 있습니다 App.xaml

<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/BootstrapWpfStyle;component/Styles/Bootstrap.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>

로그인 후 복사

타입 설정

제목

스타일 h1 ~ h6

효과

부트스트랩 스타일 WPF 스타일링

코드

<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

스타일은 h1 소형에서 h6 소형까지입니다. 간편한 정렬

효과

부트스트랩 스타일 WPF 스타일링

코드

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

로그인 후 복사

코드

인라인 코드

< ;Label> 스타일 코드를 사용하는 경우

효과

부트스트랩 스타일 WPF 스타일링

사용자 입력

<StackPanel Orientation="Horizontal">
<Label Content="内联代码:For example, "></Label>
<Label Content="<section>" Style="{DynamicResource code}"></Label>
<Label Content=" should be wrapped as inline."></Label>
</StackPanel>

로그인 후 복사

스타일 kbd. 사용 시 다른 과 함께

Effect

부트스트랩 스타일 WPF 스타일링 코드

코드 블록

<StackPanel Orientation="Horizontal">
<Label Content="用户输入:To edit settings, press "></Label>
<Label Content="ctrl + ," Style="{DynamicResource kbd}"></Label>
</StackPanel>

로그인 후 복사

스타일 사전

효과

부트스트랩 스타일 WPF 스타일링 코드

보조 텍스트

<Label xml:space="preserve" Style="{DynamicResource pre}">代码块:
Foreground:#333
Background:#f5f5f5
BorderBrush:#ccc</Label>

로그인 후 복사

스타일 도움말 블록 참고: 보조 텍스트는 Bootstrap 형식 스타일입니다. " 레벨의 폼 컨트롤용 보조 텍스트입니다. 폼 폼을 만들지 않았으니 그냥 여기에 적으세요

효과

부트스트랩 스타일 WPF 스타일링 코드

테이블

코드

Form

<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에는 형식 개념이 없으므로 지침이 공식 문서의 순서와 다릅니다

텍스트 입력 상자

스타일 제어 크기는 기본 스타일만 지원합니다

효과

부트스트랩 스타일 WPF 스타일링 비밀번호 상자

스타일 제어 크기는 기본 스타일만 지원합니다

효과

부트스트랩 스타일 WPF 스타일링 코드

스타일 체크박스가 부트스트랩과 좀 다릅니다.

<PasswordBox Password="PasswordBox"/>
<PasswordBox Password="PasswordBox IsEnabled=False" IsEnabled="False"/>
<PasswordBox Password="PasswordBox has-success" Style="{StaticResource has-success}"/>
<PasswordBox Password="PasswordBox has-warning" Style="{StaticResource has-warning}"/>
<PasswordBox 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}"/>

로그인 후 복사

효과

코드 부트스트랩 스타일 WPF 스타일링

;스타일 라디오는 부트스트랩과 좀 다릅니다.

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

로그인 후 복사

효과

코드

부트스트랩 스타일 WPF 스타일링 드롭다운 상자

기본 스타일은 이 스타일 세트입니다. 드롭다운

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

로그인 후 복사

효과를 볼 수 없기 때문에 gif 스크린샷

코드

버튼

< ;버튼> 스타일 btn

부트스트랩 스타일 WPF 스타일링 code

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

로그인 후 복사

토글 버튼

tbtn.Bootstrap 스타일에는 토글 버튼이 없습니다. .버튼을 누르는 효과와 동일하게 만들어졌습니다.

효과

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

로그인 후 복사

코드

보조수업

Contextual colors

样式 text 语境

效果

부트스트랩 스타일 WPF 스타일링

代码

Contextual backgrounds

样式 text bg 语境

效果

부트스트랩 스타일 WPF 스타일링

代码

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

로그인 후 복사

输入框组

插件

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

效果

부트스트랩 스타일 WPF 스타일링

代码

<TextBox Text="左边带插件的输入组" Tag="@" Style="{DynamicResource input-group-addon left}"></TextBox>
<TextBox Text="右边带插件的输入组" Tag=".00" Style="{DynamicResource input-group-addon right}"></TextBox>

로그인 후 복사

作为额外元素的按钮

样式 input-group-btn 输入框里带个