modified doc

uniform doc structure
This commit is contained in:
NaBian committed 2020-01-05 22:31:29 +08:00
1 parent 1fef31fbd2
commit cef6fd433e
5 files changed
+49 -115

No files matched your search

@@ -4,7 +4,7 @@ title: Lable标签
# LabelBaseStyle # LabelBaseStyle
Label标签 默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。 Label标签默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。
{% note info no-icon %} {% note info no-icon %}
用例: 用例:
@@ -2,11 +2,11 @@
title: ListView 列表视图 title: ListView 列表视图
--- ---
`HandyControl`中仅仅提供了一个默认的`ListView`的资源样式,可根据个人需求,自行定义 `HandyControl`中仅提供了一个默认的`ListView`样式,可根据个人需求,自行定义。
# 案例 {% note info no-icon %}
用例:
``` {% code %}
<ListView ItemsSource="{Binding DataList}" Margin="20"> <ListView ItemsSource="{Binding DataList}" Margin="20">
<ListView.View> <ListView.View>
<GridView> <GridView>
@@ -16,8 +16,8 @@ title: ListView 列表视图
</GridView> </GridView>
</ListView.View> </ListView.View>
</ListView> </ListView>
``` {% endcode %}
![ListView.DefaultStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/ListView.DefaultStyle.png)
{% endnote %}
![ListView.DefaultStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/ListView.DefaultStyle.png)
@@ -4,79 +4,20 @@ title: Menu 菜单
# MenuBaseStyle # MenuBaseStyle
`HandyControl`中的菜单默认样式,一般不建议直接使用,而是选择继承,便于个人自定义风格 菜单默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。
样式 {% note info no-icon %}
用例:
```xml {% code %}
<Style BasedOn="{StaticResource MenuItemBaseStyle}" TargetType="MenuItem"/> <Menu ItemsSource="{Binding Menus}">
<Style BasedOn="{StaticResource MenuBaseStyle}" TargetType="Menu"/>
```
使用
```
<Menu ItemsSource="{Binding Menus}">
<Menu.ItemTemplate> <Menu.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Children}"> <HierarchicalDataTemplate ItemsSource="{Binding Children}">
<TextBlock Text="{Binding Name}"></TextBlock> <TextBlock Text="{Binding Name}"></TextBlock>
</HierarchicalDataTemplate> </HierarchicalDataTemplate>
</Menu.ItemTemplate> </Menu.ItemTemplate>
</Menu> </Menu>
``` {% endcode %}
数据视图
```c#
//菜单子项视图类
public class MenuItemViewModel
{
public List<MenuItemViewModel> Children { get; set; }
public MenuItemViewModel Parent { get; set; }
public string Name { get; set; }
public string Remark { get; set; }
}
//菜单数据视图类
public class MenuViewModel
{
public MenuViewModel()
{
Menus = new List<MenuItemViewModel>
{
new MenuItemViewModel
{
Name="一级菜单",
Children = new List<MenuItemViewModel>{
new MenuItemViewModel{
Name="二级菜单"
}
}
},
new MenuItemViewModel
{
Name="一级菜单",
Children = new List<MenuItemViewModel>{
new MenuItemViewModel{
Name="二级菜单"
}
}
},
new MenuItemViewModel
{
Name="一级菜单",
Children = new List<MenuItemViewModel>{
new MenuItemViewModel{
Name="二级菜单"
}
}
}
};
}
public List<MenuItemViewModel> Menus { get; set; }
}
```
效果
![Menu.BaseStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/Menu.BaseStyle.png) ![Menu.BaseStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/Menu.BaseStyle.png)
{% endnote %}
@@ -4,29 +4,29 @@ title: PasswordBox 密码框
# PasswordBoxBaseStyle # PasswordBoxBaseStyle
控件默认样式,该样式不建议直接使用,而是选择继承的方式进行个人控件样式的处理,参考在线资源[PasswordBoxBaseStyle](https://github.com/HandyOrg/HandyControl/blob/master/src/Shared/HandyControl_Shared/Themes/Styles/Base/PasswordBoxBaseStyle.xaml) 原生密码框默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。
``` {% note info no-icon %}
<Style BasedOn="{StaticResource PasswordBoxBaseStyle}" TargetType="PasswordBox"/> 用例:
``` {% code %}
<PasswordBox PasswordChar="*" VerticalAlignment="Center" Width="120"></PasswordBox>
使用 {% endcode %}
```
<PasswordBox PasswordChar="*"
VerticalAlignment="Center"
Width="120"></PasswordBox>
```
效果
![PasswordBox.BaseStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/PasswordBox.BaseStyle.png) ![PasswordBox.BaseStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/PasswordBox.BaseStyle.png)
# PasswordBoxExtendBaseStyle {% endnote %}
控件拓展基础样式,是样式`PasswordBoxExtend`的基本样式,不建议直接使用,而是选择使用`PasswordBoxExtend`,该样式支持添加`PasswordBox`专用附加属性`PasswordBoxAttach`、额外信息元素`InfoElement`和标题元素`TitleElement` # PasswordBoxExtendBaseStyle : PasswordBoxBaseStyle
``` 原生密码框扩展默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。
# PasswordBoxExtend : PasswordBoxExtendBaseStyle
相对于原生密码框默认样式,它借助于附加属性可以实现标题、水印的功能。
{% note info no-icon %}
用例:
{% code %}
<!--为使普通密码输入文本框显示水印,需要设定PasswordBoxAttach.PasswordLength="0"--> <!--为使普通密码输入文本框显示水印,需要设定PasswordBoxAttach.PasswordLength="0"-->
<PasswordBox Style="{DynamicResource PasswordBoxExtend}" PasswordChar="*" <PasswordBox Style="{DynamicResource PasswordBoxExtend}" PasswordChar="*"
hc:PasswordBoxAttach.PasswordLength="0" hc:PasswordBoxAttach.PasswordLength="0"
@@ -38,9 +38,8 @@ title: PasswordBox 密码框
hc:TitleElement.TitleAlignment="Top" hc:TitleElement.TitleAlignment="Top"
VerticalAlignment="Center" VerticalAlignment="Center"
Width="120"></PasswordBox> Width="120"></PasswordBox>
``` {% endcode %}
效果
![PasswordBox.ExtendStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/PasswordBox.ExtendStyle.png) ![PasswordBox.ExtendStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/PasswordBox.ExtendStyle.png)
{% endnote %}
@@ -4,30 +4,25 @@ title: ProgressBar 进度条
# ProgressBarBaseStyle # ProgressBarBaseStyle
`HandyControl`中自带的默认样式,不建议直接使用而是选择继承的方式,案例如下: 进度条默认样式,不推荐直接使用,应该始终被其它样式以BasedOn的方式使用。
```
<Style BasedOn="{StaticResource ProgressBarBaseStyle}" TargetType="ProgressBar">
<Setter Property="Foreground" Value="{DynamicResource PrimaryBrush}"/>
</Style>
```
# 其他样式 # 其他样式
`HandyControl`中自带的其他样式和效果,其中包含如下样式: `HandyControl`中自带的其他样式和效果,其中包含如下样式:
| 样式Key | 用途 | | 样式Key | 用途 |父样式|
| ------------------ | ---- | | ------------------ | ---- ||
| ProgressBarSuccess | 成功色进度条 | | ProgressBarSuccess | 成功色进度条 |ProgressBarBaseStyle|
| ProgressBarInfo | 提示色进度条 | | ProgressBarInfo | 提示色进度条 |ProgressBarBaseStyle|
| ProgressBarWarning | 警告色进度条 | | ProgressBarWarning | 警告色进度条 |ProgressBarBaseStyle|
| ProgressBarDanger | 危险色进度条 | | ProgressBarDanger | 危险色进度条 |ProgressBarBaseStyle|
| ProgressBarPrimaryStripe | 主题色条纹进度条 | | ProgressBarStripeBaseStyle | 条纹进度条默认样式(不推荐直接使用) |-|
| ProgressBarSuccessStripe | 成功色条纹进度条 | | ProgressBarPrimaryStripe | 主题色条纹进度条 |ProgressBarStripeBaseStyle|
| ProgressBarInfoStripe | 信息色条纹进度条 | | ProgressBarSuccessStripe | 成功色条纹进度条 |ProgressBarStripeBaseStyle|
| ProgressBarWarningStripe | 警告色条纹进度条 | | ProgressBarInfoStripe | 信息色条纹进度条 |ProgressBarStripeBaseStyle|
| ProgressBarDangerStripe | 危险色条纹进度条 | | ProgressBarWarningStripe | 警告色条纹进度条 |ProgressBarStripeBaseStyle|
| ProgressBarFlat | 扁平风格 | | ProgressBarDangerStripe | 危险色条纹进度条 |ProgressBarStripeBaseStyle|
| ProgressBarFlat | 扁平风格 |-|
案例: 案例:
```xml ```xml
@@ -81,5 +76,4 @@ title: ProgressBar 进度条
# 温馨提示 # 温馨提示
对于进度条进度颜色、圆角以及其他样式的个人使用需求,可查看`HandyControl`开源目中的[源码样式部分](https://github.com/HandyOrg/HandyControl/blob/master/src/Shared/HandyControl_Shared/Themes/Styles/ProgressBar.xaml)自行定义 对于颜色、圆角或其它自定义需求,可参考[进度条样式源码](https://github.com/HandyOrg/HandyControl/blob/master/src/Shared/HandyControl_Shared/Themes/Styles/ProgressBar.xaml)自行定义。