WpfFlexPanel 1.0.0

dotnet add package WpfFlexPanel --version 1.0.0
                    
NuGet\Install-Package WpfFlexPanel -Version 1.0.0
                    
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="WpfFlexPanel" Version="1.0.0" />
                    
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="WpfFlexPanel" Version="1.0.0" />
                    
Directory.Packages.props
<PackageReference Include="WpfFlexPanel" />
                    
Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add WpfFlexPanel --version 1.0.0
                    
#r "nuget: WpfFlexPanel, 1.0.0"
                    
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#:package WpfFlexPanel@1.0.0
                    
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=WpfFlexPanel&version=1.0.0
                    
Install as a Cake Addin
#tool nuget:?package=WpfFlexPanel&version=1.0.0
                    
Install as a Cake Tool

FlexPanel for WPF 🎯

.NET WPF License Build Status NuGet

CSS Flexbox-inspired layout panel for WPF applications. Bringing web layout capabilities to desktop development.

Quick Start

Basic Usage

<Window x:Class="YourApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Flex="clr-namespace:WpfFlexPanel.Core;assembly=WpfFlexPanel">
    <Grid>
        <Flex:FlexPanel FlexDirection="Row" 
                        JustifyContent="SpaceBetween" 
                        AlignItems="Center"
                        Gap="10">
            
            <Button Content="Button 1" flex:FlexPanel.FlexGrow="1" />
            <Button Content="Button 2" flex:FlexPanel.FlexGrow="2" />
            <Button Content="Button 3" flex:FlexPanel.FlexBasis="100" />
            
        </Flex:FlexPanel>
    </Grid>
</Window>

📖 Documentation

Core Properties

Property Type Default Description
FlexDirection FlexDirection Row Main axis direction (Row, Column, RowReverse, ColumnReverse)
JustifyContent JustifyContent FlexStart Main axis alignment (FlexStart, FlexEnd, Center, SpaceBetween, SpaceAround, SpaceEvenly)
AlignItems AlignItems Stretch Cross axis alignment (FlexStart, FlexEnd, Center, Stretch)
FlexWrap FlexWrap NoWrap Wrapping behavior (NoWrap, Wrap, WrapReverse)
Gap double 0 Space between items

Attached Properties

Property Type Default Description
FlexGrow double 0 How much the item should grow
FlexShrink double 1 How much the item should shrink
FlexBasis double NaN Initial main size before free space distribution
AlignSelf AlignItems? null Override parent's AlignItems for this item
Order int 0 Display order (lower values first)

🎯 Examples

Card Layout with Wrapping

  <Flex:FlexPanel FlexDirection="Row" 
                  FlexWrap="Wrap" 
                  JustifyContent="SpaceBetween" 
                  Gap="15"
                  Background="WhiteSmoke">

      <Border Background="White" BorderBrush="LightGray" BorderThickness="1" CornerRadius="8" 
              Flex:FlexPanel.FlexBasis="200"  VerticalAlignment="Top"   Padding="15">
          <StackPanel>
              <TextBlock Text="Card 1" FontWeight="Bold" FontSize="16" Margin="0,0,0,10"/>
              <TextBlock Text="flexible card " TextWrapping="Wrap"/>
          </StackPanel>
      </Border>

      <Border Background="White" BorderBrush="LightGray" BorderThickness="1" CornerRadius="8" 
              Flex:FlexPanel.FlexBasis="200" Padding="15" VerticalAlignment="Top" >
          <StackPanel>
              <TextBlock Text="Card 2" FontWeight="Bold" FontSize="16" Margin="0,0,0,10"/>
              <TextBlock Text="Another flexible card " TextWrapping="Wrap"/>
          </StackPanel>
      </Border>

      <Border Background="White" BorderBrush="LightGray" BorderThickness="1" CornerRadius="8" 
              Flex:FlexPanel.FlexBasis="200" Padding="15" VerticalAlignment="Top" >
          <StackPanel>
              <TextBlock Text="Card 3" FontWeight="Bold" FontSize="16" Margin="0,0,0,10"/>
              <TextBlock Text="Another flexible card" TextWrapping="Wrap"/>
          </StackPanel>
      </Border>
  </Flex:FlexPanel>

📊 CSS Support Comparison

Feature FlexPanel CSS Flexbox
flex-direction ✅ ✅
flex-wrap ✅ ✅
justify-content ✅ ✅
align-items ✅ ✅
align-self ✅ ✅
flex-grow ✅ ✅
flex-shrink ✅ ✅
flex-basis ✅ ✅
gap ✅ ✅
order ✅ ✅
Product Compatible and additional computed target framework versions.
.NET Framework net48 is compatible.  net481 was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
  • .NETFramework 4.8

    • No dependencies.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
1.0.0 287 10/21/2025

Summary of changes made in this release of the package.