当前位置:健康减肥瘦身 > 美容护肤 > 阶梯状面板

阶梯状面板

文章作者:美容护肤 上传时间:2019-12-06

  

图中最外侧是三个自定义面板StairPanel,  在这之中1,2,3处独家为多少个子成分,2为按键,1和3又是StairPanel, 此中分别又有八个开关,仍是阶梯状结构。

健身减肥 1

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

健身减肥 2

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

 

wpf中提供了多少个放置的布局,如StackPanel,Grid,DockPanel,Canvas等,其实也足以继续自Panel一视同仁写MeasureOverride和ArrangeOverride方法自定义多个面板中的成分结构格式,例子:

     //依次增加子成分地方
                x += stepWidth;
                y += stepHeight;
            }
            return finalSize;
        }
    }
}

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

            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;

 

窗口减少后:

using System;
using System.Collections.Generic;
using System.Linq;
健身减肥,using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;

 

  <Window x:Class="WpfApplication1._24.Window1"
        xmlns=""
        xmlns:x=""
        xmlns:d=""
        xmlns:mc=""
        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>

xaml:

    </local:StairPanel>
</Window>

当窗口大小退换后是自适应的。

cs:

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

本文由健康减肥瘦身发布于美容护肤,转载请注明出处:阶梯状面板

关键词: