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" />
<PackageReference Include="WpfFlexPanel" />
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
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#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
#tool nuget:?package=WpfFlexPanel&version=1.0.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
FlexPanel for WPF 🎯
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 | Versions 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.