add RelativePanel, Rate, RunningBlock and ScrollViewer docs
This commit is contained in:
NaBian committed
1 parent
ab4cbba2be
commit
968cffe1bd
5 files changed
+293
-6
No files matched your search
@@ -1,5 +1,55 @@
|
||||
---
|
||||
title: 建设中
|
||||
title: Rate 评分
|
||||
---
|
||||
|
||||
建设中
|
||||
当对评价进行展示或对事物进行快速的评级操作时，可使用评分控件.
|
||||
|
||||
```cs
|
||||
[DefaultProperty("Items")]
|
||||
[ContentProperty("Items")]
|
||||
[TemplatePart(Name = ElementPanel, Type = typeof(Panel))]
|
||||
public class SimpleItemsControl : Control
|
||||
```
|
||||
|
||||
```cs
|
||||
public class RegularItemsControl : SimpleItemsControl
|
||||
```
|
||||
|
||||
```cs
|
||||
public class Rate : RegularItemsControl
|
||||
```
|
||||
|
||||
# 属性
|
||||
|
||||
|属性|描述|默认值|备注|
|
||||
|-|-|-|-|
|
||||
|AllowHalf|是否允许半选|false||
|
||||
|AllowClear|是否允许再次点击后清除|true||
|
||||
|Icon|图标|||
|
||||
|Count|star 总数|5||
|
||||
|DefaultValue|默认值|0||
|
||||
|Value|当前评分|0||
|
||||
|Text|评分文字|||
|
||||
|ShowText|是否显示评分文字|false||
|
||||
|IsReadOnly|是否只读|false||
|
||||
|Value|当前评分|0|||
|
||||
|
||||
# 事件
|
||||
|
||||
|名称|说明|
|
||||
|-|-|
|
||||
| ValueChanged | 评分改变时触发 |
|
||||
|
||||
# 案例
|
||||
|
||||
```xml
|
||||
<StackPanel Width="170">
|
||||
<hc:Rate Value="2"/>
|
||||
<hc:Rate Value="5" Count="6" Margin="0,16,0,0" Foreground="{DynamicResource SuccessBrush}"/>
|
||||
<hc:Rate DefaultValue="3" IsReadOnly="True" AllowHalf="True" Margin="0,16,0,0" Foreground="{DynamicResource WarningBrush}"/>
|
||||
<hc:Rate DefaultValue="1" AllowClear="False" AllowHalf="True" Margin="0,16,0,0" Foreground="{DynamicResource DangerBrush}" Icon="{StaticResource LoveGeometry}"/>
|
||||
<hc:Rate Value="4.5" AllowHalf="True" ShowText="True" Margin="0,16,0,0" Foreground="{DynamicResource DangerBrush}" Icon="{StaticResource LoveGeometry}"/>
|
||||
</StackPanel>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,3 +1,91 @@
|
||||
---
|
||||
title: RelativePanel
|
||||
title: RelativePanel 相对布局
|
||||
---
|
||||
|
||||
可以使用 `RelativePanel` 的附加属性对其内容进行相对布局.
|
||||
详见：[RelativePanel Class](https://docs.microsoft.com/zh-cn/uwp/api/Windows.UI.Xaml.Controls.RelativePanel)
|
||||
|
||||
```cs
|
||||
public class RelativePanel : Panel
|
||||
```
|
||||
|
||||
# 属性
|
||||
|
||||
|属性|描述|默认值|备注|
|
||||
|-|-|-|-|
|
||||
|Above|使此元素位于目标元素的上方|||
|
||||
|AlignBottomWith|使此元素与目标元素底部对齐|||
|
||||
|AlignBottomWithPanel|使此元素与Panel底部对齐|false||
|
||||
|AlignHorizontalCenterWith|使此元素与目标元素水平居中对齐|||
|
||||
|AlignHorizontalCenterWithPanel|使此元素与Panel水平居中对齐|false||
|
||||
|AlignLeftWith|使此元素与目标元素左侧对齐|||
|
||||
|AlignLeftWithPanel|使此元素与Panel左侧对齐|false||
|
||||
|AlignRightWith|使此元素与目标元素右侧对齐|||
|
||||
|AlignRightWithPanel|使此元素与Panel右侧对齐|false||
|
||||
|AlignTopWith|使此元素与目标元素顶部对齐|||
|
||||
|AlignTopWithPanel|使此元素与Panel顶侧对齐|false||
|
||||
|AlignVerticalCenterWith|使此元素与目标元素垂直居中对齐|||
|
||||
|AlignVerticalCenterWithPanel|使此元素与Panel垂直居中对齐|false||
|
||||
|Below|使此元素位于目标元素的下方|||
|
||||
|LeftOf|使此元素位于目标元素的左侧|||
|
||||
|RightOf|使此元素位于目标元素的右侧||||
|
||||
|
||||
# 案例
|
||||
|
||||
```xml
|
||||
<hc:RelativePanel Width="620" Height="700" Margin="32">
|
||||
<Border Name="Rect1" Background="{DynamicResource DangerBrush}" Height="50" Width="50">
|
||||
<TextBlock Text="Rect1" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
</Border>
|
||||
<Border Name="Rect2" Background="{DynamicResource PrimaryBrush}" Height="50" Width="50" hc:RelativePanel.AlignHorizontalCenterWithPanel="True">
|
||||
<TextBlock Text="Rect2" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
</Border>
|
||||
<Border Name="Rect3" Background="{DynamicResource SuccessBrush}" Height="50" Width="50" hc:RelativePanel.AlignRightWithPanel="True">
|
||||
<TextBlock Text="Rect3" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
</Border>
|
||||
<Border Name="Rect4" Background="{DynamicResource DangerBrush}" Height="50" Width="50" hc:RelativePanel.AlignBottomWithPanel="True">
|
||||
<TextBlock Text="Rect4" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
</Border>
|
||||
<Border Name="Rect5" Background="{DynamicResource PrimaryBrush}" Height="50" Width="50" hc:RelativePanel.AlignBottomWithPanel="True" hc:RelativePanel.AlignHorizontalCenterWithPanel="True">
|
||||
<TextBlock Text="Rect5" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
</Border>
|
||||
<Border Name="Rect6" Background="{DynamicResource SuccessBrush}" Height="50" Width="50" hc:RelativePanel.AlignBottomWithPanel="True" hc:RelativePanel.AlignRightWithPanel="True">
|
||||
<TextBlock Text="Rect6" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
</Border>
|
||||
<Border Name="Rect7" Background="{DynamicResource PrimaryBrush}" Height="50" hc:RelativePanel.RightOf="{Binding ElementName=Rect1}">
|
||||
<TextBlock Text="Rect7 (RightOf Rect1)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
</Border>
|
||||
<Border Name="Rect8" Background="{DynamicResource SuccessBrush}" Height="50" hc:RelativePanel.Below="{Binding ElementName=Rect7}">
|
||||
<TextBlock Text="Rect8 (Below Rect7)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
</Border>
|
||||
<Border Name="Rect9" Background="{DynamicResource PrimaryBrush}" Height="140" Width="460" hc:RelativePanel.AlignHorizontalCenterWithPanel="True" hc:RelativePanel.AlignVerticalCenterWithPanel="True">
|
||||
<TextBlock Text="Rect9" Padding="10" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Top"/>
|
||||
</Border>
|
||||
<Border Name="Rect10" Background="{DynamicResource DangerBrush}" Width="50" hc:RelativePanel.RightOf="{Binding ElementName=Rect9}" hc:RelativePanel.AlignVerticalCenterWith="{Binding ElementName=Rect9}">
|
||||
<TextBlock Text="Rect14 (RightOf Rect9, AlignVerticalCenterWith Rect9)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center">
|
||||
<TextBlock.LayoutTransform>
|
||||
<TransformGroup>
|
||||
<RotateTransform Angle="-90"/>
|
||||
</TransformGroup>
|
||||
</TextBlock.LayoutTransform>
|
||||
</TextBlock>
|
||||
</Border>
|
||||
<Border Name="Rect11" Background="{DynamicResource DangerBrush}" Height="50" hc:RelativePanel.AlignBottomWith="{Binding ElementName=Rect9}" hc:RelativePanel.AlignHorizontalCenterWith="{Binding ElementName=Rect9}">
|
||||
<TextBlock Text="Rect11 (AlignBottomWith Rect9, AlignHorizontalCenterWith Rect9)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
</Border>
|
||||
<Border Name="Rect12" Background="{DynamicResource DangerBrush}" Height="50" hc:RelativePanel.Below="{Binding ElementName=Rect8}" hc:RelativePanel.AlignLeftWith="{Binding ElementName=Rect7}">
|
||||
<TextBlock Text="Rect12 (Below Rect8, AlignLeftWith Rect7)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
</Border>
|
||||
<Border Name="Rect13" Background="{DynamicResource PrimaryBrush}" Height="50" hc:RelativePanel.Below="{Binding ElementName=Rect12}" hc:RelativePanel.AlignRightWith="{Binding ElementName=Rect12}">
|
||||
<TextBlock Text="Rect13 (Below Rect12, AlignRightWith Rect12)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
</Border>
|
||||
<Border Name="Rect14" Background="{DynamicResource SuccessBrush}" Height="50" hc:RelativePanel.Above="{Binding ElementName=Rect9}" hc:RelativePanel.AlignRightWith="{Binding ElementName=Rect9}">
|
||||
<TextBlock Text="Rect14 (Above Rect9, AlignRightWith Rect9)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
</Border>
|
||||
<Border Name="Rect15" Background="{DynamicResource DangerBrush}" Height="50" hc:RelativePanel.LeftOf="{Binding ElementName=Rect2}" hc:RelativePanel.AlignTopWith="{Binding ElementName=Rect9}">
|
||||
<TextBlock Text="Rect15 (LeftOf Rect2, AlignTopWith Rect9)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
</Border>
|
||||
</hc:RelativePanel>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,3 +1,46 @@
|
||||
---
|
||||
title: RunningBlock
|
||||
title: RunningBlock 滚动块
|
||||
---
|
||||
|
||||
滚动块可用于对连续性内容进行轮播.
|
||||
|
||||
```cs
|
||||
[TemplatePart(Name = ElementContent, Type = typeof(FrameworkElement))]
|
||||
[TemplatePart(Name = ElementPanel, Type = typeof(Panel))]
|
||||
public class RunningBlock : ContentControl
|
||||
```
|
||||
|
||||
|属性|描述|默认值|备注|
|
||||
|-|-|-|-|
|
||||
|Runaway|滚动内容是否可以脱离视野|true||
|
||||
|AutoRun|是否自动触发滚动|false|当显示区域不够时才触发滚动|
|
||||
|Orientation|滚动方向|Orientation.Horizontal||
|
||||
|Duration|滚动一个周期需要的时间|5s||
|
||||
|Speed|滚动速度|NaN|如果设定了值，则会覆盖Duration的值|
|
||||
|IsRunning|是否处于滚动中|true||
|
||||
|AutoReverse|是否反转滚动|false|||
|
||||
|
||||
# 案例
|
||||
|
||||
```xml
|
||||
<StackPanel Margin="32" VerticalAlignment="Center">
|
||||
<hc:RunningBlock Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=5}"/>
|
||||
<hc:RunningBlock Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=10}" FontSize="20" FontWeight="Bold" Foreground="OrangeRed" Duration="0:0:10" Margin="0,16,0,0"/>
|
||||
<hc:RunningBlock Margin="0,16,0,0" Duration="0:0:20" IsRunning="{Binding IsMouseOver,RelativeSource={RelativeSource Self},Converter={StaticResource Boolean2BooleanReConverter}}">
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<hc:GifImage Uri="/HandyControlDemo;component/Resources/Img/QQ/1.gif" Margin="10,0" Width="30" Height="30"/>
|
||||
<hc:GifImage Uri="/HandyControlDemo;component/Resources/Img/QQ/2.gif" Margin="10,0" Width="30" Height="30"/>
|
||||
<hc:GifImage Uri="/HandyControlDemo;component/Resources/Img/QQ/3.gif" Margin="10,0" Width="30" Height="30"/>
|
||||
<hc:GifImage Uri="/HandyControlDemo;component/Resources/Img/QQ/4.gif" Margin="10,0" Width="30" Height="30"/>
|
||||
<hc:GifImage Uri="/HandyControlDemo;component/Resources/Img/QQ/5.gif" Margin="10,0" Width="30" Height="30"/>
|
||||
<hc:GifImage Uri="/HandyControlDemo;component/Resources/Img/QQ/6.gif" Margin="10,0" Width="30" Height="30"/>
|
||||
<hc:GifImage Uri="/HandyControlDemo;component/Resources/Img/QQ/7.gif" Margin="10,0" Width="30" Height="30"/>
|
||||
<hc:GifImage Uri="/HandyControlDemo;component/Resources/Img/QQ/8.gif" Margin="10,0" Width="30" Height="30"/>
|
||||
<hc:GifImage Uri="/HandyControlDemo;component/Resources/Img/QQ/9.gif" Margin="10,0" Width="30" Height="30"/>
|
||||
<hc:GifImage Uri="/HandyControlDemo;component/Resources/Img/QQ/10.gif" Margin="10,0" Width="30" Height="30"/>
|
||||
</StackPanel>
|
||||
</hc:RunningBlock>
|
||||
</StackPanel>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,5 +1,93 @@
|
||||
---
|
||||
title: 建设中
|
||||
title: ScrollViewer 滚动视图
|
||||
---
|
||||
|
||||
建设中
|
||||
对原生滚动视图的扩展.
|
||||
|
||||
```cs
|
||||
public class ScrollViewer : System.Windows.Controls.ScrollViewer
|
||||
```
|
||||
|
||||
# 属性
|
||||
|
||||
|属性|描述|默认值|备注|
|
||||
|-|-|-|-|
|
||||
|Orientation|滚动方向|Orientation.Vertical||
|
||||
|CanMouseWheel|是否响应鼠标滚轮操作|true||
|
||||
|IsInertiaEnabled|是否支持惯性滚动|false||
|
||||
|IsPenetrating|是否可以穿透点击|false|||
|
||||
|
||||
# 案例
|
||||
|
||||
```xml
|
||||
<Grid>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto"/>
|
||||
<RowDefinition/>
|
||||
</Grid.RowDefinitions>
|
||||
<Border BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}">
|
||||
<hc:ScrollViewer Orientation="Horizontal" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden" IsInertiaEnabled="True">
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="10,10,32,10">
|
||||
<Border Background="{DynamicResource PrimaryBrush}">
|
||||
<TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
|
||||
</Border>
|
||||
</Border>
|
||||
<Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="10,10,32,10">
|
||||
<Border Background="{DynamicResource PrimaryBrush}">
|
||||
<TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
|
||||
</Border>
|
||||
</Border>
|
||||
<Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="10,10,32,10">
|
||||
<Border Background="{DynamicResource PrimaryBrush}">
|
||||
<TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
|
||||
</Border>
|
||||
</Border>
|
||||
<Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="10,10,32,10">
|
||||
<Border Background="{DynamicResource PrimaryBrush}">
|
||||
<TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
|
||||
</Border>
|
||||
</Border>
|
||||
<Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="10,10,32,10">
|
||||
<Border Background="{DynamicResource PrimaryBrush}">
|
||||
<TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
|
||||
</Border>
|
||||
</Border>
|
||||
</StackPanel>
|
||||
</hc:ScrollViewer>
|
||||
</Border>
|
||||
<Border Grid.Row="1" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}" Margin="0,16,0,0">
|
||||
<hc:ScrollViewer IsInertiaEnabled="True">
|
||||
<WrapPanel Orientation="Horizontal">
|
||||
<Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="10,10,32,10">
|
||||
<Border Background="{DynamicResource PrimaryBrush}">
|
||||
<TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
|
||||
</Border>
|
||||
</Border>
|
||||
<Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="10,10,32,10">
|
||||
<Border Background="{DynamicResource PrimaryBrush}">
|
||||
<TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
|
||||
</Border>
|
||||
</Border>
|
||||
<Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="10,10,32,10">
|
||||
<Border Background="{DynamicResource PrimaryBrush}">
|
||||
<TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
|
||||
</Border>
|
||||
</Border>
|
||||
<Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="10,10,32,10">
|
||||
<Border Background="{DynamicResource PrimaryBrush}">
|
||||
<TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
|
||||
</Border>
|
||||
</Border>
|
||||
<Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="10,10,32,10">
|
||||
<Border Background="{DynamicResource PrimaryBrush}">
|
||||
<TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
|
||||
</Border>
|
||||
</Border>
|
||||
</WrapPanel>
|
||||
</hc:ScrollViewer>
|
||||
</Border>
|
||||
</Grid>
|
||||
```
|
||||
|
||||
|
||||
+18
@@ -1,5 +1,23 @@
|
||||
// Custom styles.
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background: #bdbdbd;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #757575;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background: #212121;
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
box-shadow: 0 4px 8px 1.5px rgba(0,0,0,0.15);
|
||||
border-radius: 0 0 10px 10px;
|
||||
|
||||
Reference in new issue
Block a user