improved grid demo

This commit is contained in:
NaBian committed 2019-05-09 23:38:53 +08:00
1 parent ec9a588dec
commit da38306a0a
13 files changed
+319 -66

No files matched your search

+6 -2
View File
@@ -54,6 +54,10 @@ Step 3:enjoy coding
## Latest examples
### Grid
![Grid](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Grid.gif)
### SideMenu
![SideMenu](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/SideMenu.png)
@@ -70,12 +74,12 @@ Step 3:enjoy coding
![WaveProgressBar](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/WaveProgressBar.gif)
## History publication
### Badge
![Badge](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Badge.png)
## History publication
### Gravatar
![Gravatar](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Gravatar.gif)
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

@@ -315,6 +315,9 @@
<Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\WindowsForm_16x.png">
<Link>Resources\Img\LeftMainContent\WindowsForm_16x.png</Link>
</Resource>
<Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\WindowsForm_16x.png">
<Link>Resources\Img\LeftMainContent\GridPane_16x.png</Link>
</Resource>
<Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\qq-group.jpg">
<Link>Resources\Img\qq-group.jpg</Link>
</Resource>
@@ -395,6 +395,9 @@
<Generator>TextTemplatingFileGenerator</Generator>
<LastGenOutput>MessageToken.cs</LastGenOutput>
</Content>
<Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\GridPane_16x.png">
<Link>Resources\Img\LeftMainContent\GridPane_16x.png</Link>
</Resource>
<Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\MainMenuControl_16x.png">
<Link>Resources\Img\LeftMainContent\MainMenuControl_16x.png</Link>
</Resource>
@@ -114,6 +114,15 @@ namespace HandyControlDemo.Properties.Langs {
}
}
/// <summary>
/// 查找类似 基础布局 的本地化字符串。
/// </summary>
public static string BasicLayout {
get {
return ResourceManager.GetString("BasicLayout", resourceCulture);
}
}
/// <summary>
/// 查找类似 闪烁 的本地化字符串。
/// </summary>
@@ -135,9 +144,9 @@ namespace HandyControlDemo.Properties.Langs {
/// <summary>
/// 查找类似 边框 的本地化字符串。
/// </summary>
public static string Border1 {
public static string Border {
get {
return ResourceManager.GetString("Border1", resourceCulture);
return ResourceManager.GetString("Border", resourceCulture);
}
}
@@ -276,6 +285,24 @@ namespace HandyControlDemo.Properties.Langs {
}
}
/// <summary>
/// 查找类似 分栏偏移 的本地化字符串。
/// </summary>
public static string ColumnOffset {
get {
return ResourceManager.GetString("ColumnOffset", resourceCulture);
}
}
/// <summary>
/// 查找类似 分栏间隔 的本地化字符串。
/// </summary>
public static string ColumnSpacing {
get {
return ResourceManager.GetString("ColumnSpacing", resourceCulture);
}
}
/// <summary>
/// 查找类似 组合框 的本地化字符串。
/// </summary>
@@ -627,6 +654,15 @@ namespace HandyControlDemo.Properties.Langs {
}
}
/// <summary>
/// 查找类似 混合布局 的本地化字符串。
/// </summary>
public static string HybridLayout {
get {
return ResourceManager.GetString("HybridLayout", resourceCulture);
}
}
/// <summary>
/// 查找类似 忽略 的本地化字符串。
/// </summary>
@@ -1086,6 +1122,15 @@ namespace HandyControlDemo.Properties.Langs {
}
}
/// <summary>
/// 查找类似 响应式布局 的本地化字符串。
/// </summary>
public static string ResponsiveLayout {
get {
return ResourceManager.GetString("ResponsiveLayout", resourceCulture);
}
}
/// <summary>
/// 查找类似 富文本框 的本地化字符串。
/// </summary>
@@ -309,9 +309,6 @@
<data name="TreeView" xml:space="preserve">
<value>TreeView</value>
</data>
<data name="Border1" xml:space="preserve">
<value>Border</value>
</data>
<data name="ScrollViewer" xml:space="preserve">
<value>ScrollViewer</value>
</data>
@@ -585,4 +582,22 @@
<data name="Grid" xml:space="preserve">
<value>Grid</value>
</data>
<data name="BasicLayout" xml:space="preserve">
<value>Basic layout</value>
</data>
<data name="ColumnSpacing" xml:space="preserve">
<value>Column spacing</value>
</data>
<data name="HybridLayout" xml:space="preserve">
<value>Hybrid layout</value>
</data>
<data name="ColumnOffset" xml:space="preserve">
<value>Column offset</value>
</data>
<data name="ResponsiveLayout" xml:space="preserve">
<value>Responsive layout</value>
</data>
<data name="Border" xml:space="preserve">
<value>Border</value>
</data>
</root>
@@ -309,7 +309,7 @@
<data name="TreeView" xml:space="preserve">
<value>树视图</value>
</data>
<data name="Border1" xml:space="preserve">
<data name="Border" xml:space="preserve">
<value>边框</value>
</data>
<data name="ScrollViewer" xml:space="preserve">
@@ -585,4 +585,19 @@
<data name="Grid" xml:space="preserve">
<value>栅格</value>
</data>
<data name="BasicLayout" xml:space="preserve">
<value>基础布局</value>
</data>
<data name="ColumnSpacing" xml:space="preserve">
<value>分栏间隔</value>
</data>
<data name="HybridLayout" xml:space="preserve">
<value>混合布局</value>
</data>
<data name="ColumnOffset" xml:space="preserve">
<value>分栏偏移</value>
</data>
<data name="ResponsiveLayout" xml:space="preserve">
<value>响应式布局</value>
</data>
</root>
@@ -3,57 +3,153 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:HandyControl.Controls;assembly=HandyControl"
xmlns:extension="clr-namespace:HandyControl.Tools.Extension;assembly=HandyControl"
xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs"
Background="{DynamicResource RegionBrush}">
<ScrollViewer>
<StackPanel Margin="32">
<controls:Row>
<controls:Col>
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" Margin="10"/>
<TextBlock Text="{x:Static langs:Lang.BasicLayout}" Style="{StaticResource TextBlockLargeBold}" HorizontalAlignment="Left"/>
<controls:Row Margin="0,20,0,0">
<controls:Col Span="24">
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col>
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4" Margin="10"/>
</controls:Row>
<controls:Row Margin="0,20,0,0">
<controls:Col Span="12">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col>
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" Margin="10"/>
<controls:Col Span="12">
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col>
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4" Margin="10"/>
</controls:Row>
<controls:Row Margin="0,20,0,0">
<controls:Col Span="8">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col>
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" Margin="10"/>
<controls:Col Span="8">
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col>
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4" Margin="10"/>
<controls:Col Span="8">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col>
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" Margin="10"/>
</controls:Row>
<controls:Row Margin="0,20,0,0">
<controls:Col Span="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col>
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4" Margin="10"/>
<controls:Col Span="6">
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col>
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" Margin="10"/>
<controls:Col Span="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col>
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4" Margin="10"/>
<controls:Col Span="6">
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col>
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" Margin="10"/>
</controls:Row>
<controls:Row Margin="0,20,0,0">
<controls:Col Span="4">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col>
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4" Margin="10"/>
<controls:Col Span="4">
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col>
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" Margin="10"/>
<controls:Col Span="4">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col>
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4" Margin="10"/>
<controls:Col Span="4">
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col>
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4" Margin="10"/>
<controls:Col Span="4">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col>
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4" Margin="10"/>
<controls:Col Span="4">
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
</controls:Row>
<TextBlock Text="{x:Static langs:Lang.ColumnSpacing}" Margin="0,32,0,0" Style="{StaticResource TextBlockLargeBold}" HorizontalAlignment="Left"/>
<controls:Row Margin="0,20,0,0" Gutter="20">
<controls:Col Span="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col Span="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col Span="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col Span="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
</controls:Row>
<TextBlock Text="{x:Static langs:Lang.HybridLayout}" Margin="0,32,0,0" Style="{StaticResource TextBlockLargeBold}" HorizontalAlignment="Left"/>
<controls:Row Margin="0,20,0,0" Gutter="20">
<controls:Col Span="16">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col Span="8">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
</controls:Row>
<controls:Row Margin="0,20,0,0" Gutter="20">
<controls:Col Span="8">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col Span="8">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col Span="4">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col Span="4">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
</controls:Row>
<controls:Row Margin="0,20,0,0" Gutter="20">
<controls:Col Span="4">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col Span="16">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col Span="4">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
</controls:Row>
<TextBlock Text="{x:Static langs:Lang.ColumnOffset}" Margin="0,32,0,0" Style="{StaticResource TextBlockLargeBold}" HorizontalAlignment="Left"/>
<controls:Row Margin="0,20,0,0" Gutter="20">
<controls:Col Span="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col Span="6" Offset="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
</controls:Row>
<controls:Row Margin="0,20,0,0" Gutter="20">
<controls:Col Span="6" Offset="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col Span="6" Offset="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
</controls:Row>
<controls:Row Margin="0,20,0,0" Gutter="20">
<controls:Col Span="12" Offset="6">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
</controls:Row>
<TextBlock Text="{x:Static langs:Lang.ResponsiveLayout}" Margin="0,32,0,0" Style="{StaticResource TextBlockLargeBold}" HorizontalAlignment="Left"/>
<controls:Row Margin="0,20,0,0" Gutter="10">
<controls:Col Layout="{extension:ColLayout Xs=8, Sm=6, Md=4, Lg=3, Xl=1}">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col Layout="{extension:ColLayout Xs=4, Sm=6, Md=8, Lg=9, Xl=11}">
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col Layout="{extension:ColLayout Xs=4, Sm=6, Md=8, Lg=9, Xl=11}">
<Border Background="{DynamicResource BorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
<controls:Col Layout="{extension:ColLayout Xs=8, Sm=6, Md=4, Lg=3, Xl=1}">
<Border Background="{DynamicResource SecondaryBorderBrush}" Height="36" CornerRadius="4"/>
</controls:Col>
</controls:Row>
</StackPanel>
@@ -161,7 +161,7 @@
<Image Source="../../Resources/Img/LeftMainContent/ToolBar_16x.png"/>
</controls:EdgeElement.LeftContent>
</ListBoxItem>
<ListBoxItem Tag="{x:Static data:MessageToken.BorderDemoCtl}" Content="{x:Static langs:Lang.Border1}">
<ListBoxItem Tag="{x:Static data:MessageToken.BorderDemoCtl}" Content="{x:Static langs:Lang.Border}">
<controls:EdgeElement.LeftContent>
<Image Source="../../Resources/Img/LeftMainContent/BorderElement_16x.png"/>
</controls:EdgeElement.LeftContent>
@@ -8,7 +8,7 @@ namespace HandyControl.Controls
public class Col : ContentControl
{
public static readonly DependencyProperty LayoutProperty = DependencyProperty.Register(
"Layout", typeof(ColLayout), typeof(Col), new PropertyMetadata(new ColLayout()));
"Layout", typeof(ColLayout), typeof(Col), new PropertyMetadata(default(ColLayout)));
public ColLayout Layout
{
@@ -17,7 +17,7 @@ namespace HandyControl.Controls
}
public static readonly DependencyProperty OffsetProperty = DependencyProperty.Register(
"Offset", typeof(int), typeof(Col), new PropertyMetadata(default(int)));
"Offset", typeof(int), typeof(Col), new PropertyMetadata(ValueBoxes.Int0Box));
public int Offset
{
@@ -25,18 +25,55 @@ namespace HandyControl.Controls
set => SetValue(OffsetProperty, value);
}
public static readonly DependencyProperty SpanProperty = DependencyProperty.Register(
"Span", typeof(int), typeof(Col), new PropertyMetadata(24), OnSpanValidate);
private static bool OnSpanValidate(object value)
{
var v = (int)value;
return v >= 1 || v <= 24;
}
public int Span
{
get => (int) GetValue(SpanProperty);
set => SetValue(SpanProperty, value);
}
internal int GetLayoutCellCount(ColLayoutStatus status)
{
switch (status)
var result = 0;
if (Layout != null)
{
case ColLayoutStatus.Xs: return Layout.Xs;
case ColLayoutStatus.Sm: return Layout.Sm;
case ColLayoutStatus.Md: return Layout.Md;
case ColLayoutStatus.Lg: return Layout.Lg;
case ColLayoutStatus.Xl: return Layout.Xl;
case ColLayoutStatus.Xxl: return Layout.Xxl;
default: return 0;
switch (status)
{
case ColLayoutStatus.Xs:
result = Layout.Xs;
break;
case ColLayoutStatus.Sm:
result = Layout.Sm;
break;
case ColLayoutStatus.Md:
result = Layout.Md;
break;
case ColLayoutStatus.Lg:
result = Layout.Lg;
break;
case ColLayoutStatus.Xl:
result = Layout.Xl;
break;
case ColLayoutStatus.Xxl:
result = Layout.Xxl;
break;
}
}
else
{
result = Span;
}
return result;
}
}
}
@@ -3,6 +3,7 @@ using System.Linq;
using System.Windows;
using System.Windows.Controls;
using HandyControl.Data;
using HandyControl.Tools;
namespace HandyControl.Controls
{
@@ -10,8 +11,14 @@ namespace HandyControl.Controls
{
private ColLayoutStatus _layoutStatus;
private double _maxChildDesiredHeight;
public static readonly DependencyProperty GutterProperty = DependencyProperty.Register(
"Gutter", typeof(double), typeof(Row), new PropertyMetadata(default(double)));
"Gutter", typeof(double), typeof(Row), new PropertyMetadata(ValueBoxes.Double0Box, null, OnGutterCoerce), OnGutterValidate);
private static object OnGutterCoerce(DependencyObject d, object basevalue) => OnGutterValidate(basevalue) ? basevalue : .0;
private static bool OnGutterValidate(object value) => ValidateHelper.IsInRangeOfPosDouble(value, true);
public double Gutter
{
@@ -21,25 +28,24 @@ namespace HandyControl.Controls
protected override Size MeasureOverride(Size constraint)
{
var itemWidth = constraint.Width / ColLayout.ColMaxCellCount;
var totalCellCount = 0;
var totalRowCount = 1;
var maxChildDesiredHeight = .0;
var gutterHalf = Gutter / 2;
for (int i = 0, count = InternalChildren.Count; i < count; ++i)
foreach (var child in InternalChildren.OfType<Col>())
{
var child = InternalChildren[i];
child.Margin = new Thickness(gutterHalf);
child.Measure(constraint);
var childDesiredSize = child.DesiredSize;
if (maxChildDesiredHeight < childDesiredSize.Height)
if (_maxChildDesiredHeight < childDesiredSize.Height)
{
maxChildDesiredHeight = childDesiredSize.Height;
_maxChildDesiredHeight = childDesiredSize.Height;
}
}
var childBounds = new Rect(0, 0, 0, maxChildDesiredHeight);
var itemWidth = constraint.Width / ColLayout.ColMaxCellCount;
var childBounds = new Rect(-gutterHalf, -gutterHalf, 0, _maxChildDesiredHeight);
_layoutStatus = ColLayout.GetLayoutStatus(constraint.Width);
foreach (var child in InternalChildren.OfType<Col>())
@@ -49,19 +55,48 @@ namespace HandyControl.Controls
if (totalCellCount > ColLayout.ColMaxCellCount)
{
childBounds.X = 0;
childBounds.Y += maxChildDesiredHeight;
childBounds.X = -gutterHalf;
childBounds.Y += _maxChildDesiredHeight;
totalCellCount = cellCount;
totalRowCount++;
}
var childWidth = cellCount * itemWidth;
childBounds.Width = childWidth;
childBounds.X += childWidth + child.Offset * itemWidth;
}
return new Size(0, _maxChildDesiredHeight * totalRowCount - Gutter);
}
protected override Size ArrangeOverride(Size finalSize)
{
var totalCellCount = 0;
var gutterHalf = Gutter / 2;
var itemWidth = (finalSize.Width + Gutter) / ColLayout.ColMaxCellCount;
var childBounds = new Rect(-gutterHalf, -gutterHalf, 0, _maxChildDesiredHeight);
_layoutStatus = ColLayout.GetLayoutStatus(finalSize.Width);
foreach (var child in InternalChildren.OfType<Col>())
{
var cellCount = child.GetLayoutCellCount(_layoutStatus);
totalCellCount += cellCount;
var childWidth = cellCount * itemWidth;
childBounds.Width = childWidth;
childBounds.X += child.Offset * itemWidth;
if (totalCellCount > ColLayout.ColMaxCellCount)
{
childBounds.X = -gutterHalf;
childBounds.Y += _maxChildDesiredHeight;
totalCellCount = cellCount;
}
child.Arrange(childBounds);
childBounds.X += childWidth;
}
return new Size(constraint.Width, maxChildDesiredHeight * totalRowCount);
return finalSize;
}
}
}
@@ -15,7 +15,7 @@ namespace HandyControl.Controls
private bool _isLoaded;
/// <summary>
/// 故事版
/// 故事板
/// </summary>
private Storyboard _storyboard;
@@ -29,7 +29,7 @@
}
/// <summary>
/// 是否在正浮点数范围内
/// 是否在负浮点数范围内
/// </summary>
/// <param name="value"></param>
/// <param name="includeZero"></param>