WinUI4Style.WPF 1.0.1

WinUI4Style.WPF

The package has been enabled and moved to a new UI project:

https://www.nuget.org/packages/StartUI4.WPF/

A modern WinUI 4 style control library for WPF applications. This library provides a collection of beautifully styled UI controls with gradient effects, smooth animations, and customizable properties.

Github: Github

中文文档: README_CN.md

Prerequisites

• .NET 6 or later
• Windows SDK (Windows 7/10/11)
• WPF application targeting net6.0-windows or later

Installation

NuGet Package

Install-Package WinUI4Style.WPF

Manual Installation

1. Build the project to generate WinUI4StyleControls.dll
2. Add a reference to the DLL in your WPF project
3. Add the namespace to your XAML files:

xmlns:winui="clr-namespace:WinUI4StyleControls;assembly=WinUI4StyleControls"

Controls Overview

Control	Description	Base Class
WinUI4Style_Button	Gradient-styled button with hover effects	Button
WinUI4Style_CheckBox	Modern checkbox with customizable colors	CheckBox
WinUI4Style_ComboBox	Styled combo box with focus gradients	ComboBox
WinUI4Style_Edit	Text input with clear button support	TextBox
WinUI4Style_GridView	Grid layout list with card-style items	ListBox
WinUI4Style_ListBox	Styled list box with numbered/disc styles	ListBox
WinUI4Style_ListView	List layout with card-style items	ListBox
WinUI4Style_Panel	Content panel with shadow and hover effects	ContentControl
WinUI4Style_Pivot	Tab control with slide animations	Selector
WinUI4Style_PivotItem	Pivot item with brand styling support	HeaderedContentControl
WinUI4Style_ProgressBar	Gradient progress bar	ProgressBar
WinUI4Style_Slider	Styled slider with gradient track	Slider
WinUI4Style_Text	Gradient text with customizable styling	ContentControl

---

Control Reference

WinUI4Style_Button

A gradient-styled button with smooth hover transitions.

Custom Properties:

Property	Type	Default Value	Description
CornerRadius	CornerRadius	8	Rounded corners of the button
GradientStart	Color	#2563EB (Blue)	Start color of the normal state gradient
GradientEnd	Color	#9333EA (Purple)	End color of the normal state gradient
HoverGradientStart	Color	#1D4ED8	Start color of the hover state gradient
HoverGradientEnd	Color	#7E22CE	End color of the hover state gradient

XAML Example:

<winui:WinUI4Style_Button 
    Content="Submit"
    CornerRadius="10"
    GradientStart="#2563EB"
    GradientEnd="#9333EA" />

Inherited Properties from Button:

• Content - Button text or content
• Padding - Inner spacing (default: 24,14,24,14)
• FontSize - Font size (default: 15)
• FontWeight - Font weight (default: SemiBold)
• IsEnabled - Enable/disable state
• Command - Command binding
• CommandParameter - Command parameter

---

WinUI4Style_CheckBox

A modern checkbox with customizable colors and sizing.

Custom Properties:

Property	Type	Default Value	Description
BoxCornerRadius	CornerRadius	4	Rounded corners of the checkbox
CheckGradientStart	Color	#2563EB	Start color of checked state gradient
CheckGradientEnd	Color	#9333EA	End color of checked state gradient
BorderNormalColor	Color	#B4B4C8	Border color in normal state
BoxSize	double	18	Size (width/height) of the checkbox
TextColor	Color	LightGray	Color of the checkbox text
TextMargin	Thickness	8,0,0,0	Margin between checkbox and text

XAML Example:

<winui:WinUI4Style_CheckBox 
    Content="Remember me"
    BoxSize="20"
    BoxCornerRadius="6" />

Inherited Properties from CheckBox:

• Content - Checkbox label text
• IsChecked - Checked state
• IsThreeState - Enable three-state mode
• FontSize - Font size (default: 15)

---

WinUI4Style_ComboBox

A styled combo box with gradient focus effects and custom dropdown styling.

Custom Properties:

Property	Type	Default Value	Description
CornerRadius	CornerRadius	8	Rounded corners of the main control
BorderNormalColor	Color	#C8C8DC	Border color in normal state
FocusGradientStart	Color	#2563EB	Start color of focus gradient
FocusGradientEnd	Color	#9333EA	End color of focus gradient
EditBackground	Brush	White	Background color of the input area
TextColor	Color	#1E1E1E	Color of the displayed text
InnerPadding	Thickness	12,10,30,10	Inner padding of the control
DropCornerRadius	CornerRadius	6	Rounded corners of the dropdown

XAML Example:

<winui:WinUI4Style_ComboBox 
    CornerRadius="8"
    TextColor="#333333">
    <ComboBoxItem>Option 1</ComboBoxItem>
    <ComboBoxItem>Option 2</ComboBoxItem>
</winui:WinUI4Style_ComboBox>

Inherited Properties from ComboBox:

• ItemsSource - Data source for items
• SelectedItem - Currently selected item
• SelectedIndex - Index of selected item
• IsEditable - Enable editable mode
• Text - Display text (when editable)
• FontSize - Font size (default: 15)

---

WinUI4Style_Edit

A text input control with optional clear button and gradient focus effects.

Custom Properties:

Property	Type	Default Value	Description
CornerRadius	CornerRadius	8	Rounded corners of the input
BorderNormalColor	Color	#C8C8DC	Border color in normal state
FocusGradientStart	Color	#2563EB	Start color of focus gradient
FocusGradientEnd	Color	#9333EA	End color of focus gradient
EditBackground	Brush	White	Background color of the input
TextColor	Color	#1E1E1E	Color of the input text
InnerPadding	Thickness	12,10,32,10	Inner padding (extra right for clear button)
ShowClearButton	bool	false	Show/hide the clear (×) button

XAML Example:

<winui:WinUI4Style_Edit 
    Text=""
    ShowClearButton="True"
    CornerRadius="8" />

Inherited Properties from TextBox:

• Text - Input text
• IsReadOnly - Read-only mode
• MaxLength - Maximum character length
• FontSize - Font size (default: 15)
• AcceptsReturn - Allow multiline input

---

WinUI4Style_GridView

A grid-layout list control with card-style items, hover animations, and responsive column count.

Custom Properties:

Property	Type	Default Value	Description
ItemWidth	double	300	Width of each card item
ItemHeight	double	220	Height of each card item
HoverScale	double	1.03	Scale factor on hover
ItemCornerRadius	CornerRadius	12	Rounded corners of card items
ItemBackground	Brush	White	Background color of cards
ShadowColor	Color	#000000 (35% opacity)	Color of card shadow
ShadowBlurRadius	double	12	Blur radius of shadow
ShadowDepth	double	0	Depth offset of shadow
ShadowOpacity	double	0.35	Opacity of shadow
ItemBorderBrush	Color	#7890C8 (60% opacity)	Border color of cards
ItemHoverBorderBrush	Color	#3CE1FF	Border color on hover
ItemBorderThickness	Thickness	1	Border thickness
ItemPadding	Thickness	0	Inner padding of cards
ItemMargin	Thickness	10	Margin between cards
HoverAnimationDuration	Duration	200ms	Duration of hover animation

XAML Example:

<winui:WinUI4Style_GridView 
    ItemWidth="280"
    ItemHeight="200"
    ItemCornerRadius="10"
    ItemsSource="{Binding Items}">
    <winui:WinUI4Style_GridView.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <Image Source="{Binding Image}" />
                <TextBlock Text="{Binding Title}" />
            </StackPanel>
        </DataTemplate>
    </winui:WinUI4Style_GridView.ItemTemplate>
</winui:WinUI4Style_GridView>

Inherited Properties from ListBox:

• ItemsSource - Data source
• SelectedItem - Selected item
• SelectedIndex - Index of selected item
• ItemTemplate - Data template for items
• FontSize - Font size (default: 15)

---

WinUI4Style_ListBox

A styled list box with support for numbered and disc list styles.

Custom Properties:

Property	Type	Default Value	Description
CornerRadius	CornerRadius	8	Rounded corners of the list box
BorderNormalColor	Color	#000000 (220 opacity)	Border color
PanelBackground	Brush	White	Background color
TextColor	Color	Black	Default text color
ItemPadding	Thickness	12,8,12,8	Padding inside list items
ItemCornerRadius	CornerRadius	4	Rounded corners of list items
HoverBackground	Color	#F5FFFF (10 opacity)	Background on hover
HoverForeground	Color	#000000 (180 opacity)	Text color on hover
PressedBackground	Color	#000000 (20 opacity)	Background when pressed
PressedForeground	Color	Black	Text color when pressed
ListStyleType	ListStyleType	None	Style of list markers
NumberCircleBackground	Brush	Blue-Purple Gradient	Background of number circles

ListStyleType Enum:

Value	Description
None	No list markers
Disc	Circular dot markers
Number	Numbered circle markers

XAML Example:

<winui:WinUI4Style_ListBox 
    ListStyleType="Number"
    CornerRadius="8">
    <ListBoxItem>First item</ListBoxItem>
    <ListBoxItem>Second item</ListBoxItem>
</winui:WinUI4Style_ListBox>

Inherited Properties from ListBox:

• ItemsSource - Data source
• SelectedItem - Selected item
• SelectedIndex - Index of selected item
• SelectionMode - Selection mode (Single, Multiple, Extended)
• FontSize - Font size (default: 15)

---

WinUI4Style_ListView

A list-layout control with card-style items and hover animations (similar to GridView but in list format).

Custom Properties:

Property	Type	Default Value	Description
ItemWidth	double	NaN	Width of items (NaN for auto)
ItemHeight	double	NaN	Height of items (NaN for auto)
ItemCornerRadius	CornerRadius	12	Rounded corners of card items
ItemBackground	Brush	White (10% opacity)	Background color of cards
ItemBorderBrush	Color	#7890C8 (60% opacity)	Border color of cards
ItemHoverBorderBrush	Color	#3CE1FF	Border color on hover
ItemBorderThickness	Thickness	1	Border thickness
ItemPadding	Thickness	0	Inner padding of cards
ItemMargin	Thickness	10	Margin between cards
HoverAnimationDuration	Duration	200ms	Duration of hover animation
ShadowColor	Color	#000000 (35% opacity)	Color of card shadow
ShadowBlurRadius	double	12	Blur radius of shadow
ShadowDepth	double	0	Depth offset of shadow
ShadowOpacity	double	0.35	Opacity of shadow
HoverScale	double	1.03	Scale factor on hover

XAML Example:

<winui:WinUI4Style_ListView 
    ItemHeight="100"
    ItemCornerRadius="8"
    ItemsSource="{Binding Items}" />

Inherited Properties from ListBox:

• ItemsSource - Data source
• SelectedItem - Selected item
• SelectedIndex - Index of selected item
• ItemTemplate - Data template for items
• FontSize - Font size (default: 15)

---

WinUI4Style_Panel

A content panel with shadow effects, rounded corners, and hover animations.

Note: This control uses the new keyword to hide the base BorderBrush property (changing type from Brush to Color) and BorderThickness property.

Custom Properties:

Property	Type	Default Value	Description
CornerRadius	CornerRadius	12	Rounded corners of the panel
BorderBrush	Color	#7890C8 (60% opacity)	Border color (overrides base Brush type)
HoverBorderBrush	Color	#6366F1	Border color on hover
BorderThickness	Thickness	1	Border thickness
ShadowDepth	double	0	Depth offset of shadow
ShadowBlurRadius	double	15	Blur radius of shadow
ShadowOpacity	double	0.3	Opacity of shadow
ShadowColor	Color	Black	Color of shadow
ContentPadding	Thickness	0	Inner padding of content
HoverAnimationDuration	Duration	200ms	Duration of hover animation
HoverScale	double	1.03	Scale factor on hover

XAML Example:

<winui:WinUI4Style_Panel 
    CornerRadius="12"
    ContentPadding="16">
    <StackPanel>
        <TextBlock Text="Panel Content" />
    </StackPanel>
</winui:WinUI4Style_Panel>

Inherited Properties from ContentControl:

• Content - Content to display
• ContentTemplate - Data template for content
• Background - Background brush (default: semi-transparent white)

---

WinUI4Style_Pivot

A tab control with slide animations and gradient styling for tabs.

Custom Properties:

Property	Type	Default Value	Description
GradientStart	Color	#2563EB	Start color of tab gradient
GradientEnd	Color	#9333EA	End color of tab gradient
ItemFontSize	double	20	Font size of normal tabs
SelectedFontSize	double	25	Font size of selected tab
BrandFontSize	double	22	Font size of brand tabs
ItemFontWeight	FontWeight	Normal	Font weight of normal tabs
BrandFontWeight	FontWeight	SemiBold	Font weight of brand tabs
ItemForeground	Color	#000000 (220 opacity)	Text color of normal tabs
ItemHoverForeground	Color	#000000 (220 opacity)	Text color on hover
ItemPadding	Thickness	10,8,10,8	Padding of tab items
ItemMargin	Thickness	5,0,5,0	Margin between tab items

XAML Example:

<winui:WinUI4Style_Pivot SelectedIndex="0">
    <winui:WinUI4Style_PivotItem Header="Home" IsBrand="True">
        <TextBlock Text="Home Content" />
    </winui:WinUI4Style_PivotItem>
    <winui:WinUI4Style_PivotItem Header="Profile">
        <TextBlock Text="Profile Content" />
    </winui:WinUI4Style_PivotItem>
    <winui:WinUI4Style_PivotItem Header="Settings">
        <TextBlock Text="Settings Content" />
    </winui:WinUI4Style_PivotItem>
</winui:WinUI4Style_Pivot>

Inherited Properties from Selector:

• SelectedIndex - Index of selected tab
• SelectedItem - Selected pivot item
• Items - Collection of pivot items

---

WinUI4Style_PivotItem

A pivot item with brand styling support.

Custom Properties:

Property	Type	Default Value	Description
IsBrand	bool	false	Apply brand styling (gradient + larger font)

XAML Example:

<winui:WinUI4Style_PivotItem Header="Brand" IsBrand="True">
    <TextBlock Text="Brand Content" />
</winui:WinUI4Style_PivotItem>

Inherited Properties from HeaderedContentControl:

• Header - Tab header text/content
• Content - Content to display when selected

---

WinUI4Style_ProgressBar

A gradient-styled progress bar.

Custom Properties:

Property	Type	Default Value	Description
CornerRadius	CornerRadius	5	Rounded corners of the progress bar
GradientStart	Color	#2563EB	Start color of progress gradient
GradientEnd	Color	#9333EA	End color of progress gradient
TrackBackground	Color	#E6E6F0	Background color of the track

XAML Example:

<winui:WinUI4Style_ProgressBar 
    Value="50"
    Maximum="100"
    CornerRadius="4" />

Inherited Properties from ProgressBar:

• Value - Current progress value
• Minimum - Minimum value (default: 0)
• Maximum - Maximum value (default: 100)
• Height - Height (default: 8)
• IsIndeterminate - Enable indeterminate mode

---

WinUI4Style_Slider

A styled slider with gradient track and customizable thumb.

Custom Properties:

Property	Type	Default Value	Description
CornerRadius	CornerRadius	4	Rounded corners of the track
GradientStart	Color	#2563EB	Start color of progress gradient
GradientEnd	Color	#9333EA	End color of progress gradient
TrackBackground	Color	White	Background color of the track
ThumbSize	double	16	Size (width/height) of the thumb

XAML Example:

<winui:WinUI4Style_Slider 
    Value="50"
    Minimum="0"
    Maximum="100"
    ThumbSize="20" />

Inherited Properties from Slider:

• Value - Current slider value
• Minimum - Minimum value (default: 0)
• Maximum - Maximum value (default: 100)
• IsEnabled - Enable/disable state
• SmallChange - Small increment/decrement
• LargeChange - Large increment/decrement

---

WinUI4Style_Text

A text control with gradient text and customizable styling.

Note: This control uses the new keyword to hide the base FontSize, FontWeight, and Padding properties.

Custom Properties:

Property	Type	Default Value	Description
CornerRadius	CornerRadius	8	Rounded corners of the background
GradientStart	Color	#2563EB	Start color of text gradient
GradientEnd	Color	#9333EA	End color of text gradient
PanelBackground	Brush	Transparent	Background color
Padding	Thickness	8,6,8,6	Inner padding
FontSize	double	15	Font size
FontWeight	FontWeight	Normal	Font weight
HorizontalContentAlign	HorizontalAlignment	Left	Horizontal alignment
VerticalContentAlign	VerticalAlignment	Center	Vertical alignment

XAML Example:

<winui:WinUI4Style_Text 
    Content="Gradient Title"
    FontSize="24"
    FontWeight="Bold"
    PanelBackground="#F0F0F0" />

Inherited Properties from ContentControl:

• Content - Text content to display
• ContentTemplate - Data template for content

---

Utility Classes

The library includes several helper classes that are part of the public API:

BoolToVisibilityConverter

Converts a bool value to a Visibility value. Returns Visible when the value is true, and Collapsed otherwise.

Usage:

<winui:BoolToVisibilityConverter x:Key="BoolToVisibility" />

IndexPlusOneConverter

Converts a zero-based index to a one-based string representation. Useful for displaying numbered list items starting from 1.

Usage:

<winui:IndexPlusOneConverter x:Key="IndexPlusOne" />

ListStyleType Enum

Defines the style of list markers for WinUI4Style_ListBox:

Value	Description
None	No list markers
Disc	Circular dot markers
Number	Numbered circle markers

---

Common Features

Gradient System

All controls use a consistent blue-purple gradient scheme by default (#2563EB to #933EA). This can be customized per-control through gradient-related properties.

Animation

Controls with hover states include smooth animations:

• Border color transitions
• Scale transformations
• Fade effects

Responsive Design

WinUI4Style_GridView automatically adjusts the number of columns based on container width.

---

License

This project is licensed under the MIT License.

Authors

KS.STUDIO