FloweryScaleConverter

Overview

Flowery.NET provides two approaches for responsive scaling based on window size:

1. ScaleExtension (Recommended) - Markup extension with semantic presets

2. FloweryScaleConverter - Traditional converter for advanced scenarios

Both provide continuous, real-time scaling as the window resizes, unlike FloweryResponsive which uses discrete breakpoints.

Quick Comparison

ScaleExtension (Recommended)

The cleanest way to use responsive scaling. Automatically finds the parent window and scales values.

Basic Usage

<!-- Add namespace -->
xmlns:services="clr-namespace:Flowery.Services;assembly=Flowery.NET"

<!-- Using presets (cleanest) -->
<TextBlock FontSize="{services:Scale FontTitle}"/>
<TextBlock FontSize="{services:Scale FontBody}"/>
<Border Padding="{services:Scale SpacingMedium}"/>
<Grid Width="{services:Scale CardWidth}"/>

<!-- Using custom values (base,min) -->
<TextBlock FontSize="{services:Scale 24,12}"/>
<Border Width="{services:Scale 300}"/>

<!-- Using explicit properties -->
<TextBlock FontSize="{services:Scale Preset=Custom, BaseValue=24, MinValue=12}"/>

Available Presets

Font Sizes

Spacing

Dimensions

Customizing Presets

Apps can override preset values at startup:

// In App.axaml.cs or Program.cs
FloweryScaleConfig.SetPresetValues(FloweryScalePreset.FontTitle, 32, 22);
FloweryScaleConfig.SetPresetValues(FloweryScalePreset.CardWidth, 450);

// Adjust reference dimensions (default: 1920x1080)
FloweryScaleConfig.ReferenceWidth = 2560;  // For 1440p baseline
FloweryScaleConfig.ReferenceHeight = 1440;

// Adjust minimum scale factor (default: 0.5)
FloweryScaleConfig.MinScaleFactor = 0.6;  // Won't go below 60%

Before & After Comparison

Before (Verbose)

<TextBlock FontSize="{Binding $parent[Window].((vm:MainWindowViewModel)DataContext).WindowSize, 
    Converter={x:Static vm:MainWindowViewModel.ScaleConverter}, 
    ConverterParameter='16,11'}"/>

<Border Width="{Binding $parent[Window].((vm:MainWindowViewModel)DataContext).WindowSize, 
    Converter={x:Static vm:MainWindowViewModel.ScaleConverter}, 
    ConverterParameter=400}"/>

<Border Padding="{Binding $parent[Window].((vm:MainWindowViewModel)DataContext).WindowSize, 
    Converter={x:Static vm:MainWindowViewModel.ScaleConverter}, 
    ConverterParameter=20}"/>

After (Clean)

<TextBlock FontSize="{services:Scale FontSubheading}"/>
<Border Width="{services:Scale CardWidth}"/>
<Border Padding="{services:Scale SpacingMedium}"/>

FloweryScaleConverter (Advanced)

For scenarios where you need explicit control over the binding source or are working with multiple windows.

Properties

Usage

<Window.Resources>
    <services:FloweryScaleConverter x:Key="ScaleConverter"/>
</Window.Resources>

<!-- Requires explicit binding to window bounds -->
<TextBlock FontSize="{Binding Bounds, ElementName=RootWindow, 
    Converter={StaticResource ScaleConverter}, 
    ConverterParameter='24,12'}"/>

How Scaling Works

1. Calculate scale ratios for width and height:

- widthScale = windowWidth / ReferenceWidth

- heightScale = windowHeight / ReferenceHeight

2. Use most constraining axis (maintains aspect ratio):

- scale = Min(widthScale, heightScale)

3. Clamp to bounds:

- scale = Clamp(scale, MinScaleFactor, 1.0)

4. Apply to base value:

- result = baseValue × scale

- If minimum specified: result = Max(result, minValue)

Example Scaling Behavior

With default settings (1920×1080 reference, 0.5 min scale):

Tips & Best Practices

• Use presets for consistency - Semantic names ensure consistent sizing across your app
• Customize at startup - Set preset overrides in App.axaml.cs before any UI loads
• Min values prevent unreadable text - Always use min values for fonts
• ScaleExtension is preferred - Only use FloweryScaleConverter for edge cases
• Combine with FloweryResponsive - Use FloweryResponsive for layout breakpoints, ScaleExtension for sizing