From b12809bf34c9111e8f6511115dd9603176e287cc Mon Sep 17 00:00:00 2001
From: toolsche <toolsche@gmail.com>
Date: Fri, 12 Jun 2026 17:16:10 +0200
Subject: [PATCH 1/2] WPF sample: fix blank chart on non-English locales and
 related bugs

- Chart.cs: format OHLC values with InvariantCulture. They were interpolated with the current culture, so on cultures using ',' as the decimal separator (e.g. German) createChart received invalid JavaScript and the chart stayed blank.
- WPF.Sample.csproj: add CopyToOutputDirectory for hammer.js and chartjs-plugin-zoom.min.js. They are referenced by chart.html but only had CopyToPublishDirectory, so they were missing from a normal build output.
- ChartingService.cs: load chart.html via a proper file:// URI resolved from the app directory (AppContext.BaseDirectory) instead of Environment.CurrentDirectory plus a raw Windows path.
- ShellViewModel.cs: de-duplicate conversion-symbol requests on account change. Each distinct quote asset is now requested once instead of once per symbol, cutting hundreds of sequential round-trips and bringing account load from minutes to seconds.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 samples/WPF.Sample/Services/Chart.cs          | 13 +++++++---
 .../WPF.Sample/Services/ChartingService.cs    |  6 ++++-
 .../WPF.Sample/ViewModels/ShellViewModel.cs   | 26 ++++++++++++++-----
 samples/WPF.Sample/WPF.Sample.csproj          |  2 ++
 4 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/samples/WPF.Sample/Services/Chart.cs b/samples/WPF.Sample/Services/Chart.cs
index 5d20f74..dd0645b 100644
--- a/samples/WPF.Sample/Services/Chart.cs
+++ b/samples/WPF.Sample/Services/Chart.cs
@@ -1,6 +1,7 @@
-using CefSharp;
+using CefSharp;
 using CefSharp.Wpf;
 using System.Collections.Generic;
+using System.Globalization;
 using System.Linq;
 
 namespace Trading.UI.Sample.Services
@@ -14,9 +15,15 @@ public class Chart : ChromiumWebBrowser, IChart
     {
         public void LoadData(string name, IEnumerable<Ohlc> data)
         {
-            var dataStr = data.Select(ohlc => $"{{t: {ohlc.Time.ToUnixTimeMilliseconds()},o: {ohlc.Open},h: {ohlc.High},l: {ohlc.Low},c: {ohlc.Close}}}");
+            // Format the numbers with InvariantCulture so they always use '.' as the decimal
+            // separator. With the current culture, cultures that use ',' (e.g. German) produced
+            // invalid JavaScript like "o: 1,2345", which threw a SyntaxError in createChart and
+            // left the chart blank.
+            var dataStr = data.Select(ohlc => string.Format(CultureInfo.InvariantCulture,
+                "{{t: {0},o: {1},h: {2},l: {3},c: {4}}}",
+                ohlc.Time.ToUnixTimeMilliseconds(), ohlc.Open, ohlc.High, ohlc.Low, ohlc.Close));
 
             this.GetMainFrame().ExecuteJavaScriptAsync($"createChart('{name}',[{string.Join(',', dataStr)}]);");
         }
     }
-}
\ No newline at end of file
+}
diff --git a/samples/WPF.Sample/Services/ChartingService.cs b/samples/WPF.Sample/Services/ChartingService.cs
index 64b7eee..489b21e 100644
--- a/samples/WPF.Sample/Services/ChartingService.cs
+++ b/samples/WPF.Sample/Services/ChartingService.cs
@@ -35,7 +35,11 @@ public IChart GetChart()
 
         private void Browser_Loaded(object sender, System.Windows.RoutedEventArgs e)
         {
-            (sender as ChromiumWebBrowser).Address = Path.Combine(Environment.CurrentDirectory, "Chart.js", "chart.html");
+            // Resolve relative to the app directory (not the current working directory, which can
+            // differ depending on how the app was launched) and hand CefSharp a proper file:// URI.
+            var chartHtmlPath = Path.Combine(AppContext.BaseDirectory, "Chart.js", "chart.html");
+
+            (sender as ChromiumWebBrowser).Address = new Uri(chartHtmlPath).AbsoluteUri;
         }
     }
 }
\ No newline at end of file
diff --git a/samples/WPF.Sample/ViewModels/ShellViewModel.cs b/samples/WPF.Sample/ViewModels/ShellViewModel.cs
index e60a412..8defb2f 100644
--- a/samples/WPF.Sample/ViewModels/ShellViewModel.cs
+++ b/samples/WPF.Sample/ViewModels/ShellViewModel.cs
@@ -7,6 +7,7 @@
 using Prism.Regions;
 using Prism.Services.Dialogs;
 using System;
+using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.Linq;
 using System.Reactive.Linq;
@@ -407,20 +408,31 @@ private async void OnAccountChanged()
 
         private async Task FillConversionSymbols(AccountModel account)
         {
+            // The conversion chain only depends on the symbol's quote asset (the deposit asset is
+            // constant for the account), so request each distinct quote asset once and reuse the
+            // result for every symbol that shares it. This turns hundreds of sequential network
+            // round-trips into a handful, which is the main driver of the account-load time.
+            var conversionSymbolsCache = new Dictionary<long, IReadOnlyList<SymbolModel>>();
+
             foreach (var symbol in account.Symbols)
             {
-                if (symbol.QuoteAsset.AssetId != account.DepositAsset.AssetId)
+                if (symbol.QuoteAsset.AssetId == account.DepositAsset.AssetId)
                 {
-                    var conversionLightSymbols = await _apiService.GetConversionSymbols(account.Id, account.IsLive, symbol.QuoteAsset.AssetId, account.DepositAsset.AssetId);
-
-                    var conversionSymbolModels = conversionLightSymbols.Select(iLightSymbol => account.Symbols.FirstOrDefault(iSymbol => iSymbol.Id == iLightSymbol.SymbolId)).Where(iSymbol => iSymbol is not null);
+                    symbol.ConversionSymbols.Add(symbol);
 
-                    symbol.ConversionSymbols.AddRange(conversionSymbolModels);
+                    continue;
                 }
-                else
+
+                if (conversionSymbolsCache.TryGetValue(symbol.QuoteAsset.AssetId, out var conversionSymbolModels) is false)
                 {
-                    symbol.ConversionSymbols.Add(symbol);
+                    var conversionLightSymbols = await _apiService.GetConversionSymbols(account.Id, account.IsLive, symbol.QuoteAsset.AssetId, account.DepositAsset.AssetId);
+
+                    conversionSymbolModels = conversionLightSymbols.Select(iLightSymbol => account.Symbols.FirstOrDefault(iSymbol => iSymbol.Id == iLightSymbol.SymbolId)).Where(iSymbol => iSymbol is not null).ToArray();
+
+                    conversionSymbolsCache[symbol.QuoteAsset.AssetId] = conversionSymbolModels;
                 }
+
+                symbol.ConversionSymbols.AddRange(conversionSymbolModels);
             }
         }
 
diff --git a/samples/WPF.Sample/WPF.Sample.csproj b/samples/WPF.Sample/WPF.Sample.csproj
index 373fc11..e5a846d 100644
--- a/samples/WPF.Sample/WPF.Sample.csproj
+++ b/samples/WPF.Sample/WPF.Sample.csproj
@@ -14,10 +14,12 @@
   <ItemGroup>
     <Content Include="Chart.js\chartjs-plugin-zoom.min.js">
       <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
       <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
     </Content>
     <Content Include="Chart.js\hammer.js">
       <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
       <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
     </Content>
   </ItemGroup>

From b9cf94c41897754370c0670b01c88df8a17df396 Mon Sep 17 00:00:00 2001
From: toolsche <toolsche@gmail.com>
Date: Fri, 12 Jun 2026 17:16:29 +0200
Subject: [PATCH 2/2] WPF sample: chart UX overhaul (pan/zoom, candle sizing)
 and restyle

chart.html rewritten around data windowing: the financial plugin sizes candles from the number of points in the dataset, so it kept only a fixed-size window of candles on the chart while holding the full history in JS. This keeps candles a readable, consistent width at any history depth. Drag pans through time and price, dragging over the price axis scales it, double-click restores auto-fit, and the wheel zooms the time axis. The unreliable Hammer-based zoom plugin is no longer used. The price axis auto-fits the visible candles.
- App.xaml/App.xaml.cs: switch the accent theme to Cobalt and initialize CefSharp with the GPU disabled (CefSharp 90 is unstable with hardware acceleration on modern Windows).
- ShellView.xaml: larger, centered default window and a styled splitter.
- ApiConfigurationView.xaml: roomier dialog with field watermarks.

Stacked on the bug-fix PR; that one is needed for the chart to render on non-English locales, so the diff will shrink once it merges.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 samples/WPF.Sample/App.xaml                   |   2 +-
 samples/WPF.Sample/App.xaml.cs                |  25 +-
 samples/WPF.Sample/Chart.js/chart.html        | 260 ++++++++++++------
 .../Views/ApiConfigurationView.xaml           |  44 +--
 samples/WPF.Sample/Views/ShellView.xaml       |  18 +-
 5 files changed, 237 insertions(+), 112 deletions(-)

diff --git a/samples/WPF.Sample/App.xaml b/samples/WPF.Sample/App.xaml
index 0a303af..dd67ae6 100644
--- a/samples/WPF.Sample/App.xaml
+++ b/samples/WPF.Sample/App.xaml
@@ -10,7 +10,7 @@
             <ResourceDictionary.MergedDictionaries>
                 <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
-                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Steel.xaml" />
+                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Cobalt.xaml" />
             </ResourceDictionary.MergedDictionaries>
 
             <Style x:Key="DialogStyle" TargetType="mah:MetroWindow">
diff --git a/samples/WPF.Sample/App.xaml.cs b/samples/WPF.Sample/App.xaml.cs
index b73c5f6..a85adf1 100644
--- a/samples/WPF.Sample/App.xaml.cs
+++ b/samples/WPF.Sample/App.xaml.cs
@@ -1,4 +1,5 @@
-using ControlzEx.Theming;
+using CefSharp;
+using ControlzEx.Theming;
 using MahApps.Metro.Controls.Dialogs;
 using OpenAPI.Net;
 using OpenAPI.Net.Helpers;
@@ -18,6 +19,26 @@ namespace Trading.UI.Sample
     /// </summary>
     public partial class App
     {
+        protected override void OnStartup(StartupEventArgs e)
+        {
+            // Initialize CefSharp before any browser is created and force software rendering.
+            // CefSharp 90 (Chromium ~2021) is unstable with hardware acceleration on modern
+            // Windows/GPU drivers (intermittent blank renders / startup crashes); disabling the
+            // GPU makes the embedded browser behave reliably.
+            if (Cef.IsInitialized == false)
+            {
+                var settings = new CefSharp.Wpf.CefSettings();
+
+                settings.CefCommandLineArgs["disable-gpu"] = "1";
+                settings.CefCommandLineArgs["disable-gpu-compositing"] = "1";
+                settings.CefCommandLineArgs["disable-gpu-vsync"] = "1";
+
+                Cef.Initialize(settings);
+            }
+
+            base.OnStartup(e);
+        }
+
         protected override Window CreateShell() => Container.Resolve<ShellView>();
 
         protected override void InitializeShell(Window window)
@@ -35,7 +56,7 @@ private void ChangeThemeEvent_Handler()
 
             string newTheme = string.Equals(currentTheme, "Dark", StringComparison.OrdinalIgnoreCase) ? "Light" : "Dark";
 
-            ThemeManager.Current.ChangeTheme(this, $"{newTheme}.Steel");
+            ThemeManager.Current.ChangeTheme(this, $"{newTheme}.Cobalt");
         }
 
         protected override void RegisterTypes(IContainerRegistry containerRegistry)
diff --git a/samples/WPF.Sample/Chart.js/chart.html b/samples/WPF.Sample/Chart.js/chart.html
index 7affb71..bad6cb9 100644
--- a/samples/WPF.Sample/Chart.js/chart.html
+++ b/samples/WPF.Sample/Chart.js/chart.html
@@ -1,26 +1,27 @@
-<html>
+<html>
 <head>
     <script src="./luxon-1.24.1.js" type="text/javascript"></script>
     <script src="./chart-3.0.0-beta.9.js" type="text/javascript"></script>
     <script src="./chartjs-adapter-luxon-0.2.1.js" type="text/javascript"></script>
     <script src="./chartjs-chart-financial.js" type="text/javascript"></script>
-    <script src="./hammer.js" type="text/javascript"></script>
-    <script src="./chartjs-plugin-zoom.min.js" type="text/javascript"></script>
     <style>
+        html, body {
+            height: 100%;
+            margin: 0;
+            padding: 0;
+        }
+
         #chartcontainer {
             position: relative;
             width: 100%;
             height: 100%;
-            display: flex;
-            flex-grow: 1;
         }
 
         canvas {
             -moz-user-select: none;
             -webkit-user-select: none;
             -ms-user-select: none;
-            width: 100% !important;
-            height: 100% !important;
+            display: block;
         }
     </style>
 </head>
@@ -30,99 +31,186 @@
     </div>
     <script>
         var ctx = document.getElementById('canvas').getContext('2d');
-        ctx.canvas.width = 1000;
-        ctx.canvas.height = 250;
+        var chart = null;
+
+        // The financial plugin sizes candles from the number of points in the dataset, and its
+        // default time axis throws on an empty dataset. So we keep the full history in allData and
+        // only ever feed a fixed-size *window* of candles to the chart. This keeps candles a
+        // readable, consistent width at any history depth. Dragging moves the window through
+        // history (horizontal) and the price range (vertical); the wheel changes the window size.
+        var allData = [];
+        var winSize = 100;        // number of candles shown at once
+        var winEnd = 0;           // exclusive index of the right edge within allData
+        var MIN_WIN = 25;         // most zoomed in  (widest candles)
+        var MAX_WIN = 200;        // most zoomed out (narrowest candles)
+
+        // Price axis. By default it auto-fits the visible window; dragging up/down switches it to
+        // manual mode (it stays where the user puts it). Double-click restores auto-fit.
+        var yMin = null, yMax = null, yManual = false;
 
-        function randomNumber(min, max) {
-            return Math.random() * (max - min) + min;
+        function buildSlice() {
+            winSize = Math.max(MIN_WIN, Math.min(MAX_WIN, Math.min(winSize, allData.length)));
+            winEnd = Math.max(winSize, Math.min(allData.length, winEnd));
+            return allData.slice(winEnd - winSize, winEnd);
         }
 
-        function randomBar(date, lastClose) {
-            var open = randomNumber(lastClose * 0.95, lastClose * 1.05).toFixed(2);
-            var close = randomNumber(open * 0.95, open * 1.05).toFixed(2);
-            var high = randomNumber(Math.max(open, close), Math.max(open, close) * 1.1).toFixed(2);
-            var low = randomNumber(Math.min(open, close) * 0.9, Math.min(open, close)).toFixed(2);
+        function autoFitY(slice) {
+            var lo = Infinity, hi = -Infinity;
+            for (var i = 0; i < slice.length; i++) {
+                if (slice[i].l < lo) lo = slice[i].l;
+                if (slice[i].h > hi) hi = slice[i].h;
+            }
+            var pad = (hi - lo) * 0.08 || Math.abs(hi) * 0.01 || 1;
+            yMin = lo - pad;
+            yMax = hi + pad;
+        }
+
+        // Pan/zoom: just update the existing chart's data and ranges (fast, no animation).
+        function renderWindow() {
+            if (!chart || allData.length === 0) return;
+
+            var slice = buildSlice();
+            if (!yManual) autoFitY(slice);
 
-            return {
-                t: date.valueOf(),
-                o: open,
-                h: high,
-                l: low,
-                c: close
-            };
+            chart.data.datasets[0].data = slice;
+            chart.options.scales.x.min = slice[0].t;
+            chart.options.scales.x.max = slice[slice.length - 1].t;
+            chart.options.scales.y.min = yMin;
+            chart.options.scales.y.max = yMax;
 
+            chart.update('none');
         }
 
-        function getRandomData(count) {
-            var date = luxon.DateTime.fromRFC2822('01 Apr 2017 00:00 Z');
-            var data = [randomBar(date, 30)];
-            while (data.length < count) {
-                date = date.plus({ days: 1 });
-                if (date.weekday <= 5) {
-                    data.push(randomBar(date, data[data.length - 1].c));
-                }
+        // New symbol: (re)create the chart with the most recent window. The chart is always built
+        // with data present so the financial plugin's time axis never sees an empty tick list.
+        function createChart(name, data) {
+            allData = data || [];
+
+            if (allData.length === 0) {
+                if (chart) { chart.destroy(); chart = null; }
+                return;
             }
-            return data;
+
+            winSize = Math.min(100, allData.length);
+            winEnd = allData.length;
+            yManual = false;
+
+            var slice = buildSlice();
+            autoFitY(slice);
+
+            if (chart) chart.destroy();
+
+            chart = new Chart(ctx, {
+                type: 'candlestick',
+                data: { datasets: [{ label: name, data: slice }] },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    animation: { duration: 0 },
+                    scales: {
+                        x: { type: 'timeseries', min: slice[0].t, max: slice[slice.length - 1].t },
+                        y: { min: yMin, max: yMax }
+                    }
+                }
+            });
         }
 
-        var config = {
-            type: 'candlestick',
-            data: {
-                datasets: []
-            },
-            options: {
-                responsive: true,
-                animation: {
-                    duration: 0
-                },
-                hover: {
-                    animationDuration: 0
-                },
-                responsiveAnimationDuration: 0,
-                plugins: {
-                    zoom: {
-                        pan: {
-                            enabled: true,
-                            mode: 'xy',
-                            overScaleMode: 'y'
-                        },
-                        zoom: {
-                            wheel: {
-                                enabled: true,
-                            },
-                            pinch: {
-                                enabled: true,
-                            },
-                            mode: 'xy',
-                            overScaleMode: 'y'
-                        }
+        // --- Mouse: drag to pan (time horizontally, price vertically), wheel to zoom ---
+        (function () {
+            var canvas = document.getElementById('canvas');
+            var dragging = false;
+            var lastX = 0, lastY = 0;
+            var accum = 0;        // fractional bars accumulated while dragging
+            var dragDyTotal = 0;  // cumulative vertical movement of the current drag
+            var onAxis = false;   // drag started over the price axis (scale instead of pan)
+
+            canvas.addEventListener('mousedown', function (e) {
+                dragging = true;
+                lastX = e.offsetX;
+                lastY = e.offsetY;
+                accum = 0;
+                dragDyTotal = 0;
+                // Over the price-axis strip (left of / right of the plot) we scale the price range.
+                onAxis = chart && chart.chartArea &&
+                    (e.offsetX < chart.chartArea.left || e.offsetX > chart.chartArea.right);
+                canvas.style.cursor = onAxis ? 'ns-resize' : 'grabbing';
+            });
+
+            function stop() { dragging = false; canvas.style.cursor = 'default'; }
+            window.addEventListener('mouseup', stop);
+            canvas.addEventListener('mouseleave', stop);
+
+            canvas.addEventListener('mousemove', function (e) {
+                if (!dragging || !chart || allData.length === 0 || !chart.chartArea) return;
+
+                // Over the price axis: scale the price range around its centre. Dragging up
+                // enlarges the visible price span (candles get smaller), dragging down shrinks it.
+                if (onAxis) {
+                    var dyAxis = e.offsetY - lastY;
+                    lastX = e.offsetX;
+                    lastY = e.offsetY;
+                    if (dyAxis !== 0 && yMin !== null) {
+                        var axisH = chart.chartArea.bottom - chart.chartArea.top;
+                        var centre = (yMin + yMax) / 2;
+                        var half = (yMax - yMin) / 2;
+                        var factor = Math.max(0.5, Math.min(2, 1 - (dyAxis / axisH) * 1.5));
+                        half *= factor;
+                        yMin = centre - half;
+                        yMax = centre + half;
+                        yManual = true;
+                        renderWindow();
                     }
+                    return;
                 }
-            }
-        };
 
-        var chart = new Chart(ctx, config);
+                var changed = false;
 
-        function createChart(name, data) {
-            var newDataset = {
-                label: name,
-                fillColor: "rgba(220,220,220,0.2)",
-                strokeColor: "rgba(220,220,220,1)",
-                pointColor: "rgba(220,220,220,1)",
-                pointStrokeColor: "#fff",
-                pointHighlightFill: "#fff",
-                pointHighlightStroke: "rgba(220,220,220,1)",
-                data: data
-            };
-
-            if (chart.data.datasets.length > 0) chart.data.datasets.pop();
-
-            chart.data.datasets.push(newDataset);
-
-            chart.update();
-        }
+                // Horizontal -> pan the window through history.
+                var pxPerBar = (chart.chartArea.right - chart.chartArea.left) / winSize;
+                if (pxPerBar > 0) {
+                    accum += (e.offsetX - lastX) / pxPerBar;
+                    var step = Math.trunc(accum);
+                    if (step !== 0) {
+                        accum -= step;
+                        // Dragging right (positive) reveals older data: move the window back.
+                        winEnd = Math.max(winSize, Math.min(allData.length, winEnd - step));
+                        changed = true;
+                    }
+                }
+
+                // Vertical -> pan the price range. Engage manual mode once the drag clearly moves
+                // vertically, so pure horizontal pans keep auto-fitting the price axis.
+                var dyPx = e.offsetY - lastY;
+                dragDyTotal += dyPx;
+                if (!yManual && Math.abs(dragDyTotal) > 6) yManual = true;
+                if (yManual && dyPx !== 0 && yMin !== null) {
+                    var pricePerPx = (yMax - yMin) / (chart.chartArea.bottom - chart.chartArea.top);
+                    yMin += dyPx * pricePerPx;
+                    yMax += dyPx * pricePerPx;
+                    changed = true;
+                }
+
+                lastX = e.offsetX;
+                lastY = e.offsetY;
+
+                if (changed) renderWindow();
+            });
+
+            // Double-click restores automatic price fitting.
+            canvas.addEventListener('dblclick', function () {
+                yManual = false;
+                renderWindow();
+            });
+
+            canvas.addEventListener('wheel', function (e) {
+                e.preventDefault();
+                if (!chart || allData.length === 0) return;
 
-            //createChart("Test", getRandomData(100));
+                // Wheel up = zoom in (fewer candles, wider); wheel down = zoom out.
+                winSize = Math.round(winSize * (e.deltaY < 0 ? 0.85 : 1.18));
+                renderWindow();
+            }, { passive: false });
+        })();
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/samples/WPF.Sample/Views/ApiConfigurationView.xaml b/samples/WPF.Sample/Views/ApiConfigurationView.xaml
index 720be08..70aaf66 100644
--- a/samples/WPF.Sample/Views/ApiConfigurationView.xaml
+++ b/samples/WPF.Sample/Views/ApiConfigurationView.xaml
@@ -14,8 +14,8 @@
     mc:Ignorable="d">
     <prism:Dialog.WindowStyle>
         <Style BasedOn="{StaticResource DialogStyle}" TargetType="mah:MetroWindow">
-            <Setter Property="Height" Value="250" />
-            <Setter Property="Width" Value="400" />
+            <Setter Property="Height" Value="320" />
+            <Setter Property="Width" Value="460" />
         </Style>
     </prism:Dialog.WindowStyle>
     <i:Interaction.Triggers>
@@ -27,50 +27,60 @@
         </i:EventTrigger>
     </i:Interaction.Triggers>
 
-    <Grid>
+    <Grid Margin="16,12,16,16">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
-
         </Grid.RowDefinitions>
 
         <mah:MetroHeader
             Grid.Row="0"
-            Margin="5"
+            Margin="0,8"
             Header="Client ID">
-            <TextBox Text="{Binding Path=Model.ClientId, UpdateSourceTrigger=PropertyChanged}" />
+            <TextBox
+                mah:TextBoxHelper.ClearTextButton="True"
+                mah:TextBoxHelper.Watermark="Your application Client ID"
+                Text="{Binding Path=Model.ClientId, UpdateSourceTrigger=PropertyChanged}" />
         </mah:MetroHeader>
 
         <mah:MetroHeader
             Grid.Row="1"
-            Margin="5"
+            Margin="0,8"
             Header="Secret">
-            <TextBox Text="{Binding Path=Model.Secret, UpdateSourceTrigger=PropertyChanged}" />
+            <TextBox
+                mah:TextBoxHelper.ClearTextButton="True"
+                mah:TextBoxHelper.Watermark="Your application Secret"
+                Text="{Binding Path=Model.Secret, UpdateSourceTrigger=PropertyChanged}" />
         </mah:MetroHeader>
 
         <mah:MetroHeader
             Grid.Row="2"
-            Margin="5"
+            Margin="0,8"
             Header="Redirect URI">
-            <TextBox Text="{Binding Path=Model.RedirectUri, UpdateSourceTrigger=PropertyChanged}" />
+            <TextBox
+                mah:TextBoxHelper.ClearTextButton="True"
+                mah:TextBoxHelper.Watermark="https://example.com/"
+                Text="{Binding Path=Model.RedirectUri, UpdateSourceTrigger=PropertyChanged}" />
         </mah:MetroHeader>
 
         <StackPanel
             Grid.Row="3"
-            HorizontalAlignment="Left"
+            HorizontalAlignment="Right"
             VerticalAlignment="Bottom"
             Orientation="Horizontal">
             <Button
-                Margin="5"
-                Command="{Binding Path=DoneCommand}"
-                Content="Done"
-                Style="{DynamicResource MahApps.Styles.Button.Dialogs.Accent}" />
-            <Button
-                Margin="5"
+                MinWidth="110"
+                Margin="8,0,0,0"
                 Command="{Binding Path=LoadFromFileCommand}"
                 Content="Load From File"
+                Style="{DynamicResource MahApps.Styles.Button.Dialogs}" />
+            <Button
+                MinWidth="110"
+                Margin="8,0,0,0"
+                Command="{Binding Path=DoneCommand}"
+                Content="Done"
                 Style="{DynamicResource MahApps.Styles.Button.Dialogs.Accent}" />
         </StackPanel>
     </Grid>
diff --git a/samples/WPF.Sample/Views/ShellView.xaml b/samples/WPF.Sample/Views/ShellView.xaml
index b8af6fb..d272ae6 100644
--- a/samples/WPF.Sample/Views/ShellView.xaml
+++ b/samples/WPF.Sample/Views/ShellView.xaml
@@ -9,16 +9,17 @@
     xmlns:prism="http://prismlibrary.com/"
     xmlns:regions="clr-namespace:Trading.UI.Sample.Regions"
     Title="{Binding Title}"
-    Width="525"
-    Height="350"
-    MinWidth="50"
-    MinHeight="50"
+    Width="1180"
+    Height="760"
+    MinWidth="800"
+    MinHeight="500"
     dialog:DialogParticipation.Register="{Binding}"
     prism:ViewModelLocator.AutoWireViewModel="True"
     BorderThickness="0"
-    GlowBrush="Black"
+    GlowBrush="{DynamicResource MahApps.Brushes.Accent}"
     ResizeMode="CanResizeWithGrip"
     SaveWindowPosition="True"
+    WindowStartupLocation="CenterScreen"
     ShowIconOnTitleBar="False"
     TextOptions.TextHintingMode="Fixed"
     TextOptions.TextRenderingMode="Grayscale"
@@ -75,6 +76,11 @@
 
         <ContentControl Grid.Row="2" prism:RegionManager.RegionName="{x:Static regions:ShellViewRegions.AccountDataViewRegion}" />
 
-        <GridSplitter Grid.Row="1" Height="5" />
+        <GridSplitter
+            Grid.Row="1"
+            Height="6"
+            HorizontalAlignment="Stretch"
+            Background="{DynamicResource MahApps.Brushes.Accent}"
+            ShowsPreview="True" />
     </Grid>
 </controls:MetroWindow>
\ No newline at end of file