QSoft.WPF.Panel

Quick start

1. install from nuget
2. add qpanel into xaml

<Window x:Class="WpfApp_FlexPanelT.MainWindow"
        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:WpfApp_FlexPanelT"
        mc:Ignorable="d"
        xmlns:qpanel="clr-namespace:QSoft.WPF.Panel;assembly=QSoft.WPF.Panel"
        Title="FlexPanel test site" Height="450" Width="800">

        <qpanel:FlexPanel>
            <Button Width="100">Test1</Button>
            <Button Width="100">Test2</Button>
            <Button Width="100">Test3</Button>
        </qpanel:FlexPanel>

</Window>

Direction: Row,Column,RowReverse,ColumnReverse

<qpanel:FlexPanel FlexDirection="Row">
    <Button>Test1</Button>
    <Button>Test2</Button>
    <Button>Test3</Button>
</qpanel:FlexPanel>

JustifyContent: Start, End, Center, SpaceAround, SpaceBetween, SpaceEvenly

<qpanel:FlexPanel JustifyContent="Start">
    <Button>Test1</Button>
    <Button>Test2</Button>
    <Button>Test3</Button>
</qpanel:FlexPanel>

AlignItems: Start, End, Center, Stretch

<qpanel:FlexPanel AlignItems="Start">
    <Button>Test1</Button>
    <Button>Test2</Button>
    <Button>Test3</Button>
</qpanel:FlexPanel>

Gap

<qpanel:FlexPanel FlexDirection="Row" Gap="8">
    <Button>Test1</Button>
    <Button>Test2</Button>
    <Button>Test3</Button>
</qpanel:FlexPanel>

AlignSelf: Auto, Start, End, Center, Stretch

<qpanel:FlexPanel FlexDirection="Row" Gap="8">
    <Button qpanel:FlexPanel.AlignSelf="Start">Test1</Button>
    <Button qpanel:FlexPanel.AlignSelf="End">Test2</Button>
    <Button qpanel:FlexPanel.AlignSelf="Center">Test3</Button>
</qpanel:FlexPanel>

Grow

use Grow, not set Width/Hieght when Direction Row/Column

<qpanel:FlexPanel FlexDirection="Row" Gap="8">
    <Button qpanel:FlexPanel.Grow="1">Test1</Button>
    <Button>Test2</Button>
    <Button>Test3</Button>
</qpanel:FlexPanel>

Basis: 0~double.PositiveInfinity

<qpanel:FlexPanel FlexDirection="Row" Gap="8">
    <Button qpanel:FlexPanel.Basis="100">Test1</Button>
    <Button qpanel:FlexPanel.Basis="200">Test2</Button>
    <Button qpanel:FlexPanel.Basis="300">Test3</Button>
</qpanel:FlexPanel>

Refrences

Flexbox test