读书笔记3：uwp布局原理与自定义布局设计

1 Windows.UI.Xaml.DependencyObject
2     Windows.UI.Xaml.UIElement
3         Windows.UI.Xaml.FrameworkElement

 1 namespace Newdefine_panel
 2 {
 3     public class CirclePanel : Panel
 4     {
 5         //自定义半径变量
 6         private double _radius = 0;
 7         public CirclePanel() { }
 8         //注册半径依赖属性
 9         //"Radius"表示半径属性的名称
10         //typeof(double)表示半径属性类型
11         //typeof(CirclePanel)表示半径属性的归属这类型
12         // new PropertyMetadata(0.0, OnRadiusPropertyChanged)表示半径属性的元数据实例
13         public static readonly DependencyProperty RadiusProperty = DependencyProperty.RegisterAttached
14         ("Radius", typeof(double), typeof(CirclePanel), new PropertyMetadata(0.0, OnRadiusPropertyChanged));
15 
16         //定义半径属性
17         public double Radius
18         {
19             get { return (double)GetValue(RadiusProperty); }
20             set { SetValue(RadiusProperty, value); }
21         }
22 
23         //实现半径属性改变事件
24         private static void OnRadiusPropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
25         {
26             //获取触发属性改变的CirclePanel对象
27             CirclePanel target = (CirclePanel)obj;
28             //获取传递进来的值，并赋值给半径变量
29             target._radius = (double)e.NewValue;
30             //使排列状态失效，进行重新排列
31             target.InvalidateArrange();
32         }
33 
34         //重载基类的MeasureOverride
35         protected override Size MeasureOverride(Size availableSize)
36         {
37             //处理测量子对象的逻辑
38             return new Size(width, heigh);
39         }
40         protected override Size ArrangeOverride(Size finalSize)
41         {
42              //处理排列子对象的逻辑
43              return finalSize;
44         }
45     }
46 
47 }

 1 　　protected override Size MeasureOverride(Size availableSize)
 2         {
 3             //最大宽度变量
 4             double maxElementWidth = 0;
 5             //遍历所有子对象，并调用子对象的Measure方法进行测量，取出宽度最大的子对象
 6             foreach (UIElement child in Children)
 7             {
 8                 //Measure方法返回DesiredSize属性
 9                 child.Measure(availableSize);
10                 maxElementWidth = Math.Max(child.DesiredSize.Width, maxElementWidth);
11             }
12             //取两个半径的大小和最大宽度的两倍作为面板宽度
13             double panelWidth = 2 * this.Radius + 2 * maxElementWidth;
14             //计算面板的实际大小并返回Size对象。
15             double width = Math.Min(panelWidth, availableSize.Width);
16             double heigh = Math.Min(panelWidth, availableSize.Height);
17             return new Size(width, heigh);
18         }

 1 protected override Size ArrangeOverride(Size finalSize)
 2         {
 3             //当前的角度，从0开始排列
 4             double degree = 0;
 5             //计算每个子对象所占用的角度的大小
 6             double degreeStep = (double)360 / this.Children.Count;
 7 
 8             double mX = this.DesiredSize.Width / 2;
 9             double mY = this.DesiredSize.Height / 2;
10             //遍历所有的子对象进行排列
11             foreach(UIElement child in Children)
12             {
13                 //角度使用弧度制表示
14                 double angle = Math.PI * degree / 180.0;
15                 //根据弧度计算圆弧上的x,y值
16                 double x = Math.Cos(angle) * this._radius;
17                 double y = Math.Sin(angle) * this._radius;
18                 //使用变换效果让控件旋转角度degree
19                 RotateTransform rotateTransform = new RotateTransform();
20                 rotateTransform.Angle = degree;
21                 rotateTransform.CenterX = 0;
22                 rotateTransform.CenterY = 0;
23                 child.RenderTransform = rotateTransform;
24                 //排列子对像
25                 child.Arrange(new Rect(mX + x, mY + y, child.DesiredSize.Width, child.DesiredSize.Height));
26                 //角度递增
27                 degree += degreeStep;
28             }
29             return finalSize;
30         }

 1 //MainPage.XAMl代码
 2 
 3 <Page
 4     x:Class="Newdefine_panel.MainPage"
 5     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 6     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 7     xmlns:local="using:Newdefine_panel"
 8     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 9     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
10     mc:Ignorable="d">
11 
12     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
13         <Grid.RowDefinitions>
14             <RowDefinition Height="Auto"/>
15             <RowDefinition Height="*"/>
16         </Grid.RowDefinitions>
17         <Slider Grid.Row="0" Value="5" ValueChanged="Slider_ValueChanged_1"></Slider>
18         <local:CirclePanel x:Name="circlePanel" Radius="50" Grid.Row="1"  HorizontalAlignment="Center" VerticalAlignment="Center">
19             <TextBlock>Start here</TextBlock>
20             <TextBlock>TextBlock 1</TextBlock>
21             <TextBlock>TextBlock 2</TextBlock>
22             <TextBlock>TextBlock 3</TextBlock>
23             <TextBlock>TextBlock 4</TextBlock>
24             <TextBlock>TextBlock 5</TextBlock>
25             <TextBlock>TextBlock 6</TextBlock>
26             <TextBlock>TextBlock 7</TextBlock>
27         </local:CirclePanel>
28     </Grid>
29 </Page>

1 //MainPage.XAML.cs代码
2 private void Slider_ValueChanged_1(object sender, RangeBaseValueChangedEventArgs e)
3 {
4     if (circlePanel != null)
5     {
6         circlePanel.Radius = e.NewValue * 10;
7     }
8 }