chfei/HandyControl
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #289 from HandyOrg/pr/258

Browse Source 
Pr/258
This commit is contained in:
NaBian authored and GitHub committed 2020-01-05 22:32:13 +08:00
2 parents 98c277ca6f cef6fd433e
commit d24590abde
7 files changed
+206 -17
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

doc/source/handycontrol/attach/tipElement/index.md
+39 -2
View File
@@ -1,5 +1,42 @@
---
title: 建设中
title: TipElement 提示元素
---
建设中
# 属性
| 名称 | 用途 |
| ---------- | -------- |
| Placement | 提示元素显示位置 |
| Visibility | 是否可见 |
# 使用案例
## Placement 提示元素显示位置
该属性，用于设定提示元素显示位置，目前支持BottomRight和TopLeft（默认值）
```
<hc:RangeSlider Width="400"
hc:TipElement.Visibility="Visible"
TickPlacement="BottomRight"
IsSnapToTickEnabled="True"
Maximum="100" ValueEnd="60"
TickFrequency="10"
Margin="0,32,0,0"/>
<hc:RangeSlider Width="400"
hc:TipElement.Visibility="Visible"
hc:TipElement.Placement="BottomRight"
TickPlacement="BottomRight"
IsSnapToTickEnabled="True"
Maximum="100" ValueEnd="60"
TickFrequency="10"
Margin="0,32,0,0"/>
```
效果
![TipElement.Default](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/attach/TipElement.Default.png)
![TipElement.TopLeft](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/attach/TipElement.TopLeft.png)
doc/source/handycontrol/native_controls/border/index.md
+8 -6
View File
@@ -12,32 +12,32 @@ title: Border 边框
``` xml
<UniformGrid Margin="32,32,0,0" Columns="3" Rows="2">
<Border Style="{StaticResource BorderRegionStyle}" Width="200" Height="200" Margin="0,0,32,32">
<Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="0,0,32,32">
<Border Background="{DynamicResource PrimaryBrush}">
<TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
</Border>
</Border>
<Border Style="{StaticResource BorderRegionStyle}" Width="200" Height="200" Margin="0,0,32,32" Effect="{StaticResource EffectShadow1}">
<Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="0,0,32,32" Effect="{StaticResource EffectShadow1}">
<Border Background="{DynamicResource InfoBrush}">
<TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
</Border>
</Border>
<Border Style="{StaticResource BorderRegionStyle}" Width="200" Height="200" Margin="0,0,32,32" Effect="{StaticResource EffectShadow2}">
<Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="0,0,32,32" Effect="{StaticResource EffectShadow2}">
<Border Background="{DynamicResource WarningBrush}">
<TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
</Border>
</Border>
<Border Style="{StaticResource BorderRegionStyle}" Width="200" Height="200" Margin="0,0,32,32" Effect="{StaticResource EffectShadow3}">
<Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="0,0,32,32" Effect="{StaticResource EffectShadow3}">
<Border Background="{DynamicResource DangerBrush}">
<TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
</Border>
</Border>
<Border Style="{StaticResource BorderRegionStyle}" Width="200" Height="200" Margin="0,0,32,32" Effect="{StaticResource EffectShadow4}">
<Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="0,0,32,32" Effect="{StaticResource EffectShadow4}">
<Border Background="{DynamicResource AccentBrush}">
<TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
</Border>
</Border>
<Border Style="{StaticResource BorderRegionStyle}" Width="200" Height="200" Margin="0,0,32,32" Effect="{StaticResource EffectShadow5}">
<Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="0,0,32,32" Effect="{StaticResource EffectShadow5}">
<Border Background="{DynamicResource BorderBrush}">
<TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
@@ -45,6 +45,8 @@ title: Border 边框
</UniformGrid>
```
提示：新版本中使用的`BorderRegion`，有别于老版本使用样式`BorderRegionStyle`，由直角变更为圆角
# BorderVerticallySplitter
此样式使用1单位宽度的Border来分割横向排列的控件。
doc/source/handycontrol/native_controls/label/index.md
+1 -1
View File
@@ -4,7 +4,7 @@ title: Lable标签
# LabelBaseStyle
Label标签 默认样式，不推荐直接使用，应该始终被其它样式以BasedOn的方式使用。
Label标签默认样式，不推荐直接使用，应该始终被其它样式以BasedOn的方式使用。
{% note info no-icon %}
用例：
doc/source/handycontrol/native_controls/listView/index.md
+20 -2
View File
@@ -1,5 +1,23 @@
---
title: 建设中
title: ListView 列表视图
---
建设中
`HandyControl`中仅提供了一个默认的`ListView`样式，可根据个人需求，自行定义。
{% note info no-icon %}
用例：
{% code %}
<ListView ItemsSource="{Binding DataList}" Margin="20">
<ListView.View>
<GridView>
<GridViewColumn Width="80" Header="标题1" DisplayMemberBinding="{Binding Index}"/>
<GridViewColumn Width="100" Header="标题2" DisplayMemberBinding="{Binding Name}"/>
<GridViewColumn Width="200" Header="标题3" DisplayMemberBinding="{Binding Remark}"/>
</GridView>
</ListView.View>
</ListView>
{% endcode %}
![ListView.DefaultStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/ListView.DefaultStyle.png)
{% endnote %}
doc/source/handycontrol/native_controls/menu/index.md
+20 -2
View File
@@ -1,5 +1,23 @@
---
title: 建设中
title: Menu 菜单
---
建设中
# MenuBaseStyle
菜单默认样式，不推荐直接使用，应该始终被其它样式以BasedOn的方式使用。
{% note info no-icon %}
用例：
{% code %}
<Menu ItemsSource="{Binding Menus}">
<Menu.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Children}">
<TextBlock Text="{Binding Name}"></TextBlock>
</HierarchicalDataTemplate>
</Menu.ItemTemplate>
</Menu>
{% endcode %}
![Menu.BaseStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/Menu.BaseStyle.png)
{% endnote %}
doc/source/handycontrol/native_controls/passwordBox/index.md
+42 -2
View File
@@ -1,5 +1,45 @@
---
title: 建设中
title: PasswordBox 密码框
---
建设中
# PasswordBoxBaseStyle
原生密码框默认样式，不推荐直接使用，应该始终被其它样式以BasedOn的方式使用。
{% note info no-icon %}
用例：
{% code %}
<PasswordBox PasswordChar="*" VerticalAlignment="Center" Width="120"></PasswordBox>
{% endcode %}
![PasswordBox.BaseStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/PasswordBox.BaseStyle.png)
{% endnote %}
# PasswordBoxExtendBaseStyle : PasswordBoxBaseStyle
原生密码框扩展默认样式，不推荐直接使用，应该始终被其它样式以BasedOn的方式使用。
# PasswordBoxExtend : PasswordBoxExtendBaseStyle
相对于原生密码框默认样式，它借助于附加属性可以实现标题、水印的功能。
{% note info no-icon %}
用例：
{% code %}
<!--为使普通密码输入文本框显示水印,需要设定PasswordBoxAttach.PasswordLength="0"-->
<PasswordBox Style="{DynamicResource PasswordBoxExtend}" PasswordChar="*"
hc:PasswordBoxAttach.PasswordLength="0"
hc:InfoElement.Placeholder="请输入密码"
VerticalAlignment="Center"
Width="120"></PasswordBox>
<PasswordBox Style="{DynamicResource PasswordBoxExtend}" PasswordChar="*"
hc:TitleElement.Title="用户密码："
hc:TitleElement.TitleAlignment="Top"
VerticalAlignment="Center"
Width="120"></PasswordBox>
{% endcode %}
![PasswordBox.ExtendStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/PasswordBox.ExtendStyle.png)
{% endnote %}
doc/source/handycontrol/native_controls/progressBar/index.md
+76 -2
View File
@@ -1,5 +1,79 @@
---
title: 建设中
title: ProgressBar 进度条
---
建设中
# ProgressBarBaseStyle
进度条默认样式，不推荐直接使用，应该始终被其它样式以BasedOn的方式使用。
# 其他样式
`HandyControl`中自带的其他样式和效果，其中包含如下样式：
| 样式Key | 用途 |父样式|
| ------------------ | ---- ||
| ProgressBarSuccess | 成功色进度条 |ProgressBarBaseStyle|
| ProgressBarInfo | 提示色进度条 |ProgressBarBaseStyle|
| ProgressBarWarning | 警告色进度条 |ProgressBarBaseStyle|
| ProgressBarDanger | 危险色进度条 |ProgressBarBaseStyle|
| ProgressBarStripeBaseStyle | 条纹进度条默认样式（不推荐直接使用） |-|
| ProgressBarPrimaryStripe | 主题色条纹进度条 |ProgressBarStripeBaseStyle|
| ProgressBarSuccessStripe | 成功色条纹进度条 |ProgressBarStripeBaseStyle|
| ProgressBarInfoStripe | 信息色条纹进度条 |ProgressBarStripeBaseStyle|
| ProgressBarWarningStripe | 警告色条纹进度条 |ProgressBarStripeBaseStyle|
| ProgressBarDangerStripe | 危险色条纹进度条 |ProgressBarStripeBaseStyle|
| ProgressBarFlat | 扁平风格 |-|
案例：
```xml
<StackPanel Margin="20">
<TextBlock Text="默认样式"></TextBlock>
<ProgressBar Value="40"></ProgressBar>
</StackPanel>
<StackPanel Margin="20">
<TextBlock Text="ProgressBarSuccess"></TextBlock>
<ProgressBar Style="{DynamicResource ProgressBarSuccess}" Value="40"></ProgressBar>
</StackPanel>
<StackPanel Margin="20">
<TextBlock Text="ProgressBarInfo"></TextBlock>
<ProgressBar Style="{DynamicResource ProgressBarInfo}" Value="40"></ProgressBar>
</StackPanel>
<StackPanel Margin="20">
<TextBlock Text="ProgressBarWarning"></TextBlock>
<ProgressBar Style="{DynamicResource ProgressBarWarning}" Value="40"></ProgressBar>
</StackPanel>
<StackPanel Margin="20">
<TextBlock Text="ProgressBarDanger"></TextBlock>
<ProgressBar Style="{DynamicResource ProgressBarDanger}" Value="40"></ProgressBar>
</StackPanel>
<StackPanel Margin="20">
<TextBlock Text="ProgressBarPrimaryStripe"></TextBlock>
<ProgressBar Style="{DynamicResource ProgressBarPrimaryStripe}" Value="40"></ProgressBar>
</StackPanel>
<StackPanel Margin="20">
<TextBlock Text="ProgressBarSuccessStripe"></TextBlock>
<ProgressBar Style="{DynamicResource ProgressBarSuccessStripe}" Value="40"></ProgressBar>
</StackPanel>
<StackPanel Margin="20">
<TextBlock Text="ProgressBarInfoStripe"></TextBlock>
<ProgressBar Style="{DynamicResource ProgressBarInfoStripe}" Value="40"></ProgressBar>
</StackPanel>
<StackPanel Margin="20">
<TextBlock Text="ProgressBarWarningStripe"></TextBlock>
<ProgressBar Style="{DynamicResource ProgressBarWarningStripe}" Value="40"></ProgressBar>
</StackPanel>
<StackPanel Margin="20">
<TextBlock Text="ProgressBarDangerStripe"></TextBlock>
<ProgressBar Style="{DynamicResource ProgressBarDangerStripe}" Value="40"></ProgressBar>
</StackPanel>
<StackPanel Margin="20">
<TextBlock Text="ProgressBarFlat"></TextBlock>
<ProgressBar Style="{DynamicResource ProgressBarFlat}" Value="40"></ProgressBar>
</StackPanel>
```
效果：
![ProgressBar.Styles](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/ProgressBar.Styles.png)
# 温馨提示
对于颜色、圆角或其它自定义需求，可参考[进度条样式源码](https://github.com/HandyOrg/HandyControl/blob/master/src/Shared/HandyControl_Shared/Themes/Styles/ProgressBar.xaml)自行定义。