欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

WPF(1) 自定义面板-阶梯状面板

程序员文章站 2022-07-09 21:18:31
wpf中提供了几个内置的布局,如StackPanel,Grid,DockPanel,Canvas等,其实也可以继承自Panel并重写MeasureOverride和ArrangeOverride方法自定义一个面板中的元素布局格式,例子: 窗口缩小后: 图中最外面是一个自定义面板StairPanel, ......

wpf中提供了几个内置的布局,如StackPanel,Grid,DockPanel,Canvas等,其实也可以继承自Panel并重写MeasureOverride和ArrangeOverride方法自定义一个面板中的元素布局格式,例子:

WPF(1) 自定义面板-阶梯状面板

 

窗口缩小后:

WPF(1) 自定义面板-阶梯状面板

 

图中最外面是一个自定义面板StairPanel,  其中1,2,3处分别为三个子元素,2为按钮,1和3又是StairPanel, 其中分别又有四个按钮,仍然是阶梯状布局。

当窗口大小改变后是自适应的。

xaml:

  <Window x:Class="WpfApplication1._24.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1._24"
        mc:Ignorable="d"
        Title="Window1" Height="800" Width="800">
    <Window.Resources>
        <Style x:Key="Style2" TargetType="{x:Type Button}">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF1467C2" Offset="0"/>
                        <GradientStop Color="#FFAAC5E2" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="Style1" TargetType="{x:Type local:StairPanel}">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFDD8116" Offset="0"/>
                        <GradientStop Color="#FF0DBD2F" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="Style3" TargetType="{x:Type Button}">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFDD8116" Offset="0"/>
                        <GradientStop Color="#FF0DBD2F" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <local:StairPanel>
        <local:StairPanel Style="{DynamicResource Style1}">
            <Button x:Name="Button1_1" Content="Button1.1" Style="{DynamicResource Style2}"/>
            <Button x:Name="Button1_2" Content="Button1.2" Style="{DynamicResource Style2}"/>
            <Button x:Name="Button1_3" Content="Button1.3" Style="{DynamicResource Style2}"/>
            <Button x:Name="Button1_4" Content="Button1.4" Style="{DynamicResource Style2}"/>
        </local:StairPanel>
        <Button x:Name="Button2" Content="Button2" FontSize="22" Style="{DynamicResource Style3}"/>
        <local:StairPanel Style="{DynamicResource Style1}">
            <Button x:Name="Button3_1" Content="Button3.1" Style="{DynamicResource Style2}"/>
            <Button x:Name="Button3_2" Content="Button3.2" Style="{DynamicResource Style2}"/>
            <Button x:Name="Button3_3" Content="Button3.3" Style="{DynamicResource Style2}"/>
            <Button x:Name="Button3_4" Content="Button3.4" Style="{DynamicResource Style2}"/>
        </local:StairPanel>

    </local:StairPanel>
</Window>

cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;

namespace WpfApplication1._24
{
    public class StairPanel : Panel
    {
        // Default public constructor
        public StairPanel()
            : base()
        {
        }

        // Override the default Measure method of Panel
        protected override Size MeasureOverride(Size availableSize)
        {
            Size panelDesiredSize = new Size();

            foreach (UIElement child in InternalChildren)
            {
                child.Measure(availableSize);
                panelDesiredSize = child.DesiredSize;
            }

            return panelDesiredSize;
        }
        protected override Size ArrangeOverride(Size finalSize)
        {
            //根据面板的大小和子元素个数等分宽度和高度
            double stepWidth = finalSize.Width / InternalChildren.Count;
            double stepHeight = finalSize.Height / InternalChildren.Count;


            double x = 0;
            double y = 0;

            foreach (UIElement child in InternalChildren)
            {
                child.Arrange(new Rect(new Point(x, y), new Size(stepWidth, stepHeight)));

     //递增子元素位置
                x += stepWidth;
                y += stepHeight;
            }
            return finalSize;
        }
    }
}