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

add GotoTop, Gravatar and Grid docs

Browse Source
This commit is contained in:
NaBian committed 2020-08-09 14:22:09 +08:00
1 parent 90e208eb7c
commit 2539a1c77d
4 files changed
+273 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

doc/source/handycontrol/extend_controls/gifImage/index.md
-1
View File
@@ -22,7 +22,6 @@ public class GifImage : Image, IDisposable
![GifImage](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/GifImage.gif)
{% note warning %}
不再使用 `GifImage` 时记得调用 `Dispose` 方法清理资源。
{% endnote %}
doc/source/handycontrol/extend_controls/gotoTop/index.md
+36 -2
View File
@@ -1,5 +1,39 @@
---
title: 建设中
title: GotoTop 回到顶部
---
建设中
通过点击 `GotoTop` 可以让 `ScrollView` 或带有 `ScrollView` 的控件滚动到顶部位置.
```cs
public class GotoTop : Button
```
# 属性
|属性|描述|默认值|备注|
|-|-|-|-|
|Target|`ScrollView` 或带有 `ScrollView` 的控件|||
|Animated|是否使用动画|true||
|AnimationTime|动画持续时间|0.2s||
|HidingHeight|当 `ScrollView` 滚动该高度后 `GotoTop` 会被隐藏|0||
|AutoHiding|是否自动隐藏|true|||
# 案例
```xml
<hc:SimplePanel Width="500" Height="400">
<hc:ScrollViewer Name="ScrollViewerDemo" IsInertiaEnabled="True" Margin="0,10,0,0">
<Border Height="2000" Margin="8,0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</hc:ScrollViewer>
<hc:GotoTop Animated="True" AutoHiding="True" AnimationTime="500" Target="{Binding ElementName=ScrollViewerDemo}" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,20,20"/>
</hc:SimplePanel>
```
![GotoTop](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/GoToTop.gif)
doc/source/handycontrol/extend_controls/gravatar/index.md
+48 -2
View File
@@ -1,5 +1,51 @@
---
title: 建设中
title: Gravatar 头像
---
建设中
一种用户随机头像的实现方式.
```cs
public class Gravatar : ContentControl
```
# 属性
|属性|描述|默认值|备注|
|-|-|-|-|
|Generator|头像生成器|GithubGravatarGenerator||
|Id|用户Id|||
|Source|用户头像||||
# 样式
|样式|描述|
|-|-|
|GravatarBaseStyle|默认样式|
|GravatarCircle|圆形头像|
|GravatarCircleImg|圆形图片头像|
# 案例
```xml
<StackPanel Margin="32" Orientation="Horizontal">
<UniformGrid Rows="3" Columns="3" Width="240" Height="240">
<hc:Gravatar Id="User1"/>
<hc:Gravatar Id="User2"/>
<hc:Gravatar Style="{StaticResource GravatarCircleImg}">
<Image Source="/HandyControlDemo;component/Resources/Img/Album/2.jpg"/>
</hc:Gravatar>
<hc:Gravatar Id="User4"/>
<hc:Gravatar Id="User5" Style="{StaticResource GravatarCircle}"/>
<hc:Gravatar Id="User6"/>
<hc:Gravatar Style="{StaticResource GravatarCircle}" Source="/HandyControlDemo;component/Resources/Img/Album/1.jpg"/>
<hc:Gravatar Id="User8"/>
<hc:Gravatar Id="User9"/>
</UniformGrid>
<StackPanel Margin="16,0,0,0" Height="220" VerticalAlignment="Center">
<TextBox Text="User1" Name="TextBoxName" Width="180"/>
<hc:Gravatar Height="180" Width="180" Id="{Binding Text,ElementName=TextBoxName}" Margin="10"/>
</StackPanel>
</StackPanel>
```
![Gravatar](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Gravatar.gif)
doc/source/handycontrol/extend_controls/grid/index.md
+189 -1
View File
@@ -1,3 +1,191 @@
---
title: Grid
title: Grid 栅格
---
栅格系统的wpf实现，web版本可参考 [element/layout](https://element.eleme.cn/#/zh-CN/component/layout)
```cs
public class Row : Panel
```
```cs
public class Col : ContentControl
```
# 属性
## Row 行
|属性|描述|默认值|备注|
|-|-|-|-|
|Gutter|栅格间隔|0|||
## Col 列
|属性|描述|默认值|备注|
|-|-|-|-|
|Layout|布局方式|||
|Offset|栅格左侧的间隔格数|0||
|Span|栅格占据的列数|24||
|IsFixed|该列是否固定|false|||
# 案例
```xml
<StackPanel Margin="32">
<TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.BasicLayout}}" Style="{StaticResource TextBlockLargeBold}" HorizontalAlignment="Left"/>
<hc:Row Margin="0,20,0,0">
<hc:Col Span="24">
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
</hc:Row>
<hc:Row Margin="0,20,0,0">
<hc:Col Span="12">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="12">
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
</hc:Row>
<hc:Row Margin="0,20,0,0">
<hc:Col Span="8">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="8">
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="8">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
</hc:Row>
<hc:Row Margin="0,20,0,0">
<hc:Col Span="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="6">
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="6">
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
</hc:Row>
<hc:Row Margin="0,20,0,0">
<hc:Col Span="4">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="4">
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="4">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="4">
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="4">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="4">
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
</hc:Row>
<TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ColumnSpacing}}" Margin="0,32,0,0" Style="{StaticResource TextBlockLargeBold}" HorizontalAlignment="Left"/>
<hc:Row Margin="0,20,0,0" Gutter="20">
<hc:Col Span="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
</hc:Row>
<TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.HybridLayout}}" Margin="0,32,0,0" Style="{StaticResource TextBlockLargeBold}" HorizontalAlignment="Left"/>
<hc:Row Margin="0,20,0,0" Gutter="20">
<hc:Col Span="16">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="8">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
</hc:Row>
<hc:Row Margin="0,20,0,0" Gutter="20">
<hc:Col Span="8">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="8">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="4">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="4">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
</hc:Row>
<hc:Row Margin="0,20,0,0" Gutter="20">
<hc:Col Span="4">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="16">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="4">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
</hc:Row>
<TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ColumnOffset}}" Margin="0,32,0,0" Style="{StaticResource TextBlockLargeBold}" HorizontalAlignment="Left"/>
<hc:Row Margin="0,20,0,0" Gutter="20">
<hc:Col Span="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="6" Offset="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
</hc:Row>
<hc:Row Margin="0,20,0,0" Gutter="20">
<hc:Col Span="6" Offset="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Span="6" Offset="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
</hc:Row>
<hc:Row Margin="0,20,0,0" Gutter="20">
<hc:Col Span="12" Offset="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
</hc:Row>
<TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ResponsiveLayout}}" Margin="0,32,0,0" Style="{StaticResource TextBlockLargeBold}" HorizontalAlignment="Left"/>
<hc:Row Margin="0,20,0,0" Gutter="10">
<hc:Col Layout="8,6,4,3,1">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Layout="4 6 8 9 11">
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Layout="{extension:ColLayout Xs=4, Sm=6, Md=8, Lg=9, Xl=11}">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
<hc:Col Layout="{extension:ColLayout Xs=8, Sm=6, Md=4, Lg=3, Xl=1}">
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/>
</hc:Col>
</hc:Row>
</StackPanel>
```
![Grid](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Grid.gif)
{% note info %}
xaml中 `Layout` 写法的3种方式：
Layout="{extension:ColLayout Xs=4, Sm=6, Md=8, Lg=9, Xl=11}"
Layout="4,6,8,9,11"
Layout="4 6 8 9 11"
{% endnote %}