WPF.UI Documentation

The WPF.UI package is a toolkit used to build Windows Presentation Foundation (WPF) user interfaces. It implements property extensions for WPF controls to support more custom properties and breaks through the limitations of the original properties of the control. The package wraps duplicate styles and templates into a universal resource dictionary, greatly improving the convenience of templating development and enhancing code reusability.

To maintain compatibility with other style packages, this package uses a style-based approach, so users do not have to worry about conflicts with other resource packages.

Installation Tutorial

1. Right-click on the project in the solution explorer -> Manage NuGet Packages
2. Find WPF.UI in the NuGet package manager and install it

Instructions for Use

XAML

1. Add reference:

<!--The namespace prefix can be customized-->xmlns:wpfui="clr-namespace:WPF.UI;assembly=WPF.UI"

2. Can be used in resource dictionaries, styles, and controls:

Using in Styles

<Style ...>
    <Setter Property="wpfui:WPFUI.CornerRadius" Value="10 0 0 10"/>
    <Setter Property="wpfui:WPFUI.MouseOverBackground" Value="#FFC1C1C1"/>
    <Setter Property="wpfui:WPFUI.MouseOverBorderBrush" Value="#FFC1C1C1"/>
    <Setter Property="wpfui:WPFUI.CheckedBackground" Value="#FF848484"/>
    ...
</Style>

Using in Controls

<Button wpfui:WPFUI.Tag="WPF.UI"
        wpfui:WPFUI.Background="AntiqueWhite"
        wpfui:WPFUI.Text="{Binding ...}"
        .../>

Using In Control Templates:

<ControlTemplate TargetType="Button">
    <Border x:Name="border"
            Width="{TemplateBinding Width}"
            Height="{TemplateBinding Height}"
            Margin="{TemplateBinding Margin}"
            Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding wpfui:WPFUI.BorderThickness}"
            CornerRadius="10">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="50" />
            </Grid.ColumnDefinitions>
            <Border Background="{TemplateBinding wpfui:WPFUI.Background}" CornerRadius="{TemplateBinding wpfui:WPFUI.CornerRadius}" />
            <Label
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Content="{TemplateBinding wpfui:WPFUI.Tag}"
                FontFamily="Webdings"
                FontSize="{TemplateBinding wpfui:WPFUI.FontSize}" />
            <ContentControl Grid.Column="1"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Content="{TemplateBinding Content}" />
            <Border Grid.Column="2"
                Background="{TemplateBinding wpfui:WPFUI.Background}"
                CornerRadius="{TemplateBinding wpfui:WPFUI.MouseOverCornerRadius}" />
        </Grid>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="border" 
                    Property="BorderBrush" 
                    Value="{Binding Path=(wpfui:WPFUI.MouseOverBorderBrush),RelativeSource={RelativeSource TemplatedParent}}"/>
            <Setter TargetName="border" 
                    Property="Background" 
                    Value="{Binding Path=(wpfui:WPFUI.MouseOverBackground),RelativeSource={RelativeSource TemplatedParent}}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Note: The syntax for binding triggers may vary

Complete Example (For reference only):

<Style TargetType="Button">
    <Setter Property="Height" Value="75" />
    <Setter Property="Width" Value="200" />
    <Setter Property="Tag" Value="10" />
    <Setter Property="FontSize" Value="24" />
    <Setter Property="wpfui:WPFUI.FontSize" Value="35" />
    <Setter Property="wpfui:WPFUI.Tag" Value="=" />
    <Setter Property="wpfui:WPFUI.CornerRadius" Value="10 0 0 10" />
    <Setter Property="wpfui:WPFUI.MouseOverCornerRadius" Value="0 10 10 0" />
    <Setter Property="wpfui:WPFUI.BorderThickness" Value="1" />
    <Setter Property="wpfui:WPFUI.Background" Value="Gray" />
    <Setter Property="wpfui:WPFUI.MouseOverBackground" Value="#FFC1C1C1" />
    <Setter Property="wpfui:WPFUI.MouseOverBorderBrush" Value="#FFC1C1C1" />
    <Setter Property="wpfui:WPFUI.CheckedBackground" Value="#FF848484" />
    <Setter Property="wpfui:WPFUI.CheckedBorderBrush" Value="#FF848484" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <!-- Template content (as shown in the previous example) -->
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>