Expert WPF Developer Only – Pixel-Perfect UI Recreation (XAML Only, No Design Work)
Budget: $1,500 – $3,000 USD
I have a single high-resolution PNG that represents the complete UI for a 911 simulation launcher.
Your task is to recreate this interface exactly in WPF using XAML. (see attachments).
This project requires pixel-perfect replication of provided screen designs. This is not a redesign. Any deviation from the source image will be rejected. Both dark and light versions must be recreated exactly as specified.” We will provide svg, colors, wireframe and guidance in the functionality. Know that we are experts at 9-1-1 training, not WPF etc so we rely on ChatGPT to help you with what you need. Chat can be incorrect so we depend on your expertise.
This is a precision build, not an interpretation. The final result must match the source image pixel-for-pixel. I have a 911 simulator, the software is awesome, the Windows Wallpapers are outdated and do not represent a complex product and pricing. I need a new skin. Chat has created the images I want to use. One active screen. There are three placeholder inactive screens for a second monitor (see attachments). I will provide svg font colors. We would like dark and light versions cosmetic so we can view them in our setting, they are exact, just dark light versions.This is not a runtime theme toggle, but a design comparison effort (parallel dark and light versions for evaluation).
Scope of Work
Rebuild the entire interface from the PNG using WPF
Match layout, spacing, typography, colors, and visual hierarchy exactly
Recreate all visible UI elements including:
Buttons (hover)
Text elements
Panels and layout structure
Navigation elements
Implement expected interaction states:
Hover
Pressed
Disabled (where applicable)
Animation Requirements
The design includes minimal, implied micro-interactions
Recreate these using WPF Storyboards only
Animations must be:
Subtle (e.g., opacity fade, color transitions)
Fast and responsive
Non-distracting
Technical Requirements (MANDATORY)
WPF targeting .NET 6
XAML-only UI implementation (no visual logic in code-behind)
Use:
ControlTemplate
Style
ResourceDictionary
Strictly no third-party UI frameworks (no MahApps, MaterialDesign, etc.)
Clean, modular, reusable structure
Pixel-Perfect Requirements
Exact alignment and spacing (no approximation)
Accurate font sizing and weight
Precise color matching
Correct corner radii, borders, and visual density
No layout drift across DPI settings
DPI & Scaling
The UI must render consistently at:
100%
125%
150%
No clipping, misalignment, or scaling artifacts are acceptable.
Deliverables
Complete Visual Studio solution
All XAML files
Resource dictionaries
Organized project structure
Verification screenshots at:
100% DPI
125% DPI
150% DPI
README including:
Explanation of custom ControlTemplates
Overview of animation implementation (Storyboards)
Acceptance Criteria
Side-by-side comparison with original PNG shows near-perfect visual match (±2px tolerance max)
Layout remains consistent across all DPI settings
All interaction states behave correctly
Animations are smooth, subtle, and performant
Important
Do not apply if:
You primarily work in web UI (HTML/CSS/React)
"You cannot demonstrate real WPF UI work"
You approximate designs instead of matching them exactly
This is a specialist-level WPF UI task.UI/UX Design (Primary)
This is non-negotiable for this project.
If you have done true pixel-perfect XAML work before, this will be straightforward. Otherwise, it will not be a fit. Please look at the resources zip for better understanding. Our product 911Reality Simulator can be found at www.911careertraining.com
Your task is to recreate this interface exactly in WPF using XAML. (see attachments).
This project requires pixel-perfect replication of provided screen designs. This is not a redesign. Any deviation from the source image will be rejected. Both dark and light versions must be recreated exactly as specified.” We will provide svg, colors, wireframe and guidance in the functionality. Know that we are experts at 9-1-1 training, not WPF etc so we rely on ChatGPT to help you with what you need. Chat can be incorrect so we depend on your expertise.
This is a precision build, not an interpretation. The final result must match the source image pixel-for-pixel. I have a 911 simulator, the software is awesome, the Windows Wallpapers are outdated and do not represent a complex product and pricing. I need a new skin. Chat has created the images I want to use. One active screen. There are three placeholder inactive screens for a second monitor (see attachments). I will provide svg font colors. We would like dark and light versions cosmetic so we can view them in our setting, they are exact, just dark light versions.This is not a runtime theme toggle, but a design comparison effort (parallel dark and light versions for evaluation).
Scope of Work
Rebuild the entire interface from the PNG using WPF
Match layout, spacing, typography, colors, and visual hierarchy exactly
Recreate all visible UI elements including:
Buttons (hover)
Text elements
Panels and layout structure
Navigation elements
Implement expected interaction states:
Hover
Pressed
Disabled (where applicable)
Animation Requirements
The design includes minimal, implied micro-interactions
Recreate these using WPF Storyboards only
Animations must be:
Subtle (e.g., opacity fade, color transitions)
Fast and responsive
Non-distracting
Technical Requirements (MANDATORY)
WPF targeting .NET 6
XAML-only UI implementation (no visual logic in code-behind)
Use:
ControlTemplate
Style
ResourceDictionary
Strictly no third-party UI frameworks (no MahApps, MaterialDesign, etc.)
Clean, modular, reusable structure
Pixel-Perfect Requirements
Exact alignment and spacing (no approximation)
Accurate font sizing and weight
Precise color matching
Correct corner radii, borders, and visual density
No layout drift across DPI settings
DPI & Scaling
The UI must render consistently at:
100%
125%
150%
No clipping, misalignment, or scaling artifacts are acceptable.
Deliverables
Complete Visual Studio solution
All XAML files
Resource dictionaries
Organized project structure
Verification screenshots at:
100% DPI
125% DPI
150% DPI
README including:
Explanation of custom ControlTemplates
Overview of animation implementation (Storyboards)
Acceptance Criteria
Side-by-side comparison with original PNG shows near-perfect visual match (±2px tolerance max)
Layout remains consistent across all DPI settings
All interaction states behave correctly
Animations are smooth, subtle, and performant
Important
Do not apply if:
You primarily work in web UI (HTML/CSS/React)
"You cannot demonstrate real WPF UI work"
You approximate designs instead of matching them exactly
This is a specialist-level WPF UI task.UI/UX Design (Primary)
This is non-negotiable for this project.
If you have done true pixel-perfect XAML work before, this will be straightforward. Otherwise, it will not be a fit. Please look at the resources zip for better understanding. Our product 911Reality Simulator can be found at www.911careertraining.com