Skip to content

Commit

Permalink
Added theme-specific background for XAML code errors (#3588)
Browse files Browse the repository at this point in the history
<!-- 🚨 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. -->
  • Loading branch information
msftbot[bot] authored Dec 5, 2020
2 parents 2a4938d + c6648c6 commit 9b75c9f
Showing 1 changed file with 8 additions and 4 deletions.
12 changes: 8 additions & 4 deletions Microsoft.Toolkit.Uwp.SampleApp/Controls/XamlCodeEditor.xaml.cs
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ public sealed partial class XamlCodeEditor : UserControl
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register(nameof(Text), typeof(string), typeof(XamlCodeEditor), new PropertyMetadata(string.Empty));

private ThemeListener _themeListener = new ThemeListener();

public XamlCodeEditor()
{
this.InitializeComponent();
Expand All @@ -40,7 +42,7 @@ public async void ReportError(XamlExceptionRange error)
// Highlight Error Line
XamlCodeRenderer.Decorations.Add(new IModelDeltaDecoration(
range,
new IModelDecorationOptions() { IsWholeLine = true, ClassName = _errorStyle, HoverMessage = new string[] { error.Message }.ToMarkdownString() }));
new IModelDecorationOptions() { IsWholeLine = true, ClassName = ErrorStyle, HoverMessage = new string[] { error.Message }.ToMarkdownString() }));

// Show Glyph Icon
XamlCodeRenderer.Decorations.Add(new IModelDeltaDecoration(
Expand Down Expand Up @@ -121,10 +123,12 @@ public string Text

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

private CssLineStyle _errorStyle = new CssLineStyle()
private CssLineStyle ErrorStyle
{
BackgroundColor = new SolidColorBrush(Color.FromArgb(0x00, 0xFF, 0xD6, 0xD6))
};
get => _themeListener.CurrentTheme.Equals(ApplicationTheme.Light) ?
new CssLineStyle() { BackgroundColor = new SolidColorBrush(Color.FromArgb(0x00, 0xFF, 0xD6, 0xD6)) } :
new CssLineStyle() { BackgroundColor = new SolidColorBrush(Color.FromArgb(0x00, 0x66, 0x00, 0x00)) };
}

private CssGlyphStyle _errorIconStyle = new CssGlyphStyle()
{
Expand Down

0 comments on commit 9b75c9f

Please sign in to comment.