WPF (1) custom panel-tiered panel, wpf tiered

WPF (1) custom panel-tiered panel, wpf tiered

Wpf provides several built-in la s, such as StackPanel, Grid, DockPanel, and Canvas. In fact, it can inherit from the Panel and rewrite the MeasureOverride and ArrangeOverride methods to customize the element layout format in a Panel, example:

 

After the window is reduced:

 

The most out of the figure is a custom panel StairPanel, where 3 and 1 are three child elements, 2 is the button, 1 and 3 are the StairPanel, and there are four buttons respectively, it is still a tiered layout.

The window size is adaptive.

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)
{
// Equals the width and height based on the panel size and number of sub-elements
Double stepWidth = finalSize. Width/InternalChildren. Count;
Double Stephen eight = 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, Stephen ight )));

// Increment the sub-element position
X + = stepWidth;
Y + = Stephen;
}
Return finalSize;
}
}
}