StackPanel 实现从上往下+从右往左 排列+RenderTransform特效实例分析

StackPanel:将子元素排列到可沿水平或垂直放置的行。

参考资料：

1. StackPanel类

2. Silverlight学习笔记（九）——RenderTransform特效【五种基本变换】及【矩阵变换MatrixTransform】

3. MatrixTransform矩阵变换

stack表明StackPanel跟栈一样，按顺序压入。StackPanel排列方向分为水平竖直，由Orientation设置，Horizontal（水平）或Vertical（竖直）。如下例所示：

<Grid>
     <StackPanel Height="326" HorizontalAlignment="Left" Margin="30,25,0,0"
                              Name="sp_1" VerticalAlignment="Top" Width="265"
                              Orientation="Horizontal"/>
     <StackPanel Height="326" HorizontalAlignment="Left" Margin="323,25,0,0" 
                              Name="sp_2" VerticalAlignment="Top" Width="265" 
                              Orientation="Vertical"/>
</Grid>

动态添加控件：

        private void init_sp_1()
        {
            for (int i = 0; i < 5; i++)
            {
                Button btn = new Button();
                btn.Background = Brushes.LightCyan;
                btn.Width = 20;
                btn.Height = (i+1) * 30;
                btn.Content = i.ToString();
                this.sp_1.Children.Add(btn);
            }
        }

        private void init_sp_2()
        {
            for (int i = 0; i < 5; i++)
            {
                Button btn = new Button();
                btn.Background = Brushes.LightCyan;
                btn.Width = (i + 1) * 30;
                btn.Height = 20;
                btn.Content = i.ToString();
                this.sp_2.Children.Add(btn);
            }
        }

运行效果：

但是实际开发过程中，我们通常需要从右往左，从下往上，那如何实现呢？

• 从右往左，好办。只要把StackPanel的FlowDirection属性设置为RightToLeft即可！
• 从下往上，分为前台后台：

前台如下设置：

<Button Content="4" Canvas.Left="125" Canvas.Top="417" Padding="12"
                    RenderTransformOrigin="0.5,0.5">
	<Button.RenderTransform>
      		<ScaleTransform ScaleX="-1"/>
        </Button.RenderTransform>
</Button>

要是动态添加控件的话，后台如下：

private void init_sp_2()
{
        for (int i = 0; i < 5; i++)
        {
                Button btn = new Button();
                btn.Background =