Skip to content

Commit 9b75c9f

Browse files
author
msftbot[bot]
authored
Added theme-specific background for XAML code errors (#3588)
<!-- 🚨 Please Do Not skip any instructions and information mentioned below as they are all required and essential to evaluate and test the PR. By fulfilling all the required information you will be able to reduce the volume of questions and most likely help merge the PR faster 🚨 --> ## Fixes #3545 <!-- Add the relevant issue number after the "#" mentioned above (for ex: Fixes #1234) which will automatically close the issue once the PR is merged. --> <!-- Add a brief overview here of the feature/bug & fix. --> Adds a theme listener field and a read only property that returns the theme-specific error background color to the sample app's Xaml code editor. ## PR Type What kind of change does this PR introduce? <!-- Please uncomment one or more that apply to this PR. --> Bugfix <!-- - Feature --> <!-- - Code style update (formatting) --> <!-- - Refactoring (no functional changes, no api changes) --> <!-- - Build or CI related changes --> <!-- - Documentation content changes --> Sample app changes <!-- - Other... Please describe: --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying, or link to a relevant issue. --> Quoting from #3545 > Errors in the XAML Sample are hard to read as the background-red does not work well with text: > ![](https://user-images.githubusercontent.com/16122379/97060991-92139780-1595-11eb-9e26-a9e81e28dda8.png) ## What is the new behavior? <!-- Describe how was this issue resolved or changed? --> A different text background is now displayed when dark theme is enabled, making it more readable. ![image](https://user-images.githubusercontent.com/59544401/100564314-8f335300-3275-11eb-8fe0-68b1ac91c6d3.png) ## PR Checklist Please check if your PR fulfills the following requirements: - [x] Tested code with current supported SDKs - [N/A] Pull Request has been submitted to the documentation repository instructions. Link: - [x] Sample in sample app has been added / updated (for bug fixes / features) - [N/A] Icon has been created (if new sample) following the Thumbnail Style Guide and templates - [N/A] Tests for the changes have been added (for bug fixes / features) (if applicable) - [N/A] Header has been added to all new source files (run build/UpdateHeaders.bat) (None added) - [x] Contains NO breaking changes <!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. Please note that breaking changes are likely to be rejected within minor release cycles or held until major versions. -->
2 parents 2a4938d + c6648c6 commit 9b75c9f

File tree

1 file changed

+8
-4
lines changed

1 file changed

+8
-4
lines changed

Microsoft.Toolkit.Uwp.SampleApp/Controls/XamlCodeEditor.xaml.cs

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ public sealed partial class XamlCodeEditor : UserControl
2121
public static readonly DependencyProperty TextProperty =
2222
DependencyProperty.Register(nameof(Text), typeof(string), typeof(XamlCodeEditor), new PropertyMetadata(string.Empty));
2323

24+
private ThemeListener _themeListener = new ThemeListener();
25+
2426
public XamlCodeEditor()
2527
{
2628
this.InitializeComponent();
@@ -40,7 +42,7 @@ public async void ReportError(XamlExceptionRange error)
4042
// Highlight Error Line
4143
XamlCodeRenderer.Decorations.Add(new IModelDeltaDecoration(
4244
range,
43-
new IModelDecorationOptions() { IsWholeLine = true, ClassName = _errorStyle, HoverMessage = new string[] { error.Message }.ToMarkdownString() }));
45+
new IModelDecorationOptions() { IsWholeLine = true, ClassName = ErrorStyle, HoverMessage = new string[] { error.Message }.ToMarkdownString() }));
4446

4547
// Show Glyph Icon
4648
XamlCodeRenderer.Decorations.Add(new IModelDeltaDecoration(
@@ -121,10 +123,12 @@ public string Text
121123

122124
public DateTime TimeSampleEditedLast { get; private set; } = DateTime.MinValue;
123125

124-
private CssLineStyle _errorStyle = new CssLineStyle()
126+
private CssLineStyle ErrorStyle
125127
{
126-
BackgroundColor = new SolidColorBrush(Color.FromArgb(0x00, 0xFF, 0xD6, 0xD6))
127-
};
128+
get => _themeListener.CurrentTheme.Equals(ApplicationTheme.Light) ?
129+
new CssLineStyle() { BackgroundColor = new SolidColorBrush(Color.FromArgb(0x00, 0xFF, 0xD6, 0xD6)) } :
130+
new CssLineStyle() { BackgroundColor = new SolidColorBrush(Color.FromArgb(0x00, 0x66, 0x00, 0x00)) };
131+
}
128132

129133
private CssGlyphStyle _errorIconStyle = new CssGlyphStyle()
130134
{

0 commit comments

Comments
 (0)