Numeric input styling

[grandangelo]

I'm using dark theme from Material Design in XAML toolkit. When disabling numeric input, background becomes white, while I'd like to keep it dark as the rest of the theme. I'm not able to style numeric input, style tags are not available in XAML. How could I proceed?

Thanks guys.

[JohanLarsson]

Ah, this looks like I'm doing a horrible dumb, thanks for reporting!

I don't even know if there is a workaround for this at the moment. What you can try is setting explicit background colour on the numeric box, not an elegant solution.

[grandangelo]

setting explicit background colour on the numeric box, not an elegant solution.

If you mean <numeric:DoubleBox Background="Yellow" IsEnabled="False"/> it is not working unluckily... Still gray background.

EDIT: sorry I made a mess with comments, inserted deleted then inserted again, total rookie here on GitHub (not that I mean that I'm better at WPF :-))

[JohanLarsson]

Ok, thanks for testing, did not remember how it was written. There is a brutal hack for the rendering of formatted numbers, I'll try to add UI-tests and a fix for the case with dark background, sorry about the inconvenience.

[grandangelo]

No problem, you're totally welcome, I'm using your work not the other way round. Ciao Johan.

[JohanLarsson]

It is open source meaning it is our work, you just contributed with this issue.

[grandangelo]

You're right, thanks for saying it. I'm trying to open the project with VS 2017 pro, but it complains that "Project file is incomplete. Expected imports are missing". Are you using VS 2019?

[JohanLarsson]

I'm using VS 2019, chances are it will not open in VS 2017 due to analyzers etc.

Project file is incomplete. Expected imports are missing

Does not ring a bell for me,not sure what the issue is. You could try commenting out some analyzers.

[JohanLarsson]

Note that I did not mean you must fix this bug, just meant that writing an issue reporting a bug is contributing to a project 🙂

[grandangelo]

Sure it was clear :-) I just wanted to see if I can understand something in the project.

[JohanLarsson]

I can try to explain what is going on in words. The formatting was actually a bit tricky feature as there were a bunch of constraints. Did not want the formatting to raise any events or append to undo history etc. The way it is written is that we insert a TextBlock with the formatted value in the visual tree and what you see is me dumbing the background of that TextBlock. The original text is still there behind it, it is in some internal type that is maybe named TextBoxView don't remember, it is still there so that the cursor gets added when clicking in a formatted box. It is not a very elegant solution but it is what it is at this point.

You should be able to see this stuff when inspecting the visual tree using Snoop or the equivalent Visual Studio debugger tooling that was added.

[JohanLarsson]

You can try downloading the free version of VS 2019. For releasing netcore3.1 and <Nullable>enable</ Nullable> I don't think we can maintain compatibility with VS 2017. The binaries in the nuget should work for both of course.

[JohanLarsson]

Hmm, I thought this would be enough to repro but it behaves as expected:

<numeric:DoubleBox StringFormat="F1"
                   Foreground="White"
                   Background="Transparent"
                   Value="1.234" />

Guess I'll have to create a project that uses material design to see what is going on.

[JohanLarsson]

This turned tricky, adding

<Style TargetType="{x:Type numeric:DoubleBox}"
       BasedOn="{StaticResource {x:Type TextBox}}" />

Makes the DoubleBox render with material theme but then the display of formatted number does not work as the material style retemplates the control.

I'm not sure what the best way forward is here.

[JohanLarsson]

Read the original question again.

When disabling numeric input

What does this mean?

I'm not able to style numeric input, style tags are not available in XAM

You mean something other than:

<Style TargetType="{x:Type numeric:DoubleBox}">
  ...

[grandangelo]

When disabling numeric input

I mean <numeric:DoubleBox Value="10" IsEnabled="False"/>

You mean something other than:

<Style TargetType="{x:Type numeric:DoubleBox}">
  ...

I tried to access something like `

` but you're right, I can do it as you suggest. Nevertheless, it is still not working for me, using [this gist](https://gist.github.com/grandangelo/37f8a7ed65333e154957bfae7b023bb7) I get this behaviour: 

[JohanLarsson]

With a vanilla WPF project it looks like it renders correctly

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="numeric:DoubleBox">
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Background" Value="Red" />
                </Trigger>
                <Trigger Property="IsEnabled" Value="True">
                    <Setter Property="Background" Value="Yellow" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </StackPanel.Resources>

    <numeric:DoubleBox IsEnabled="True"
                       StringFormat="F1"
                       Value="1.234" />

    <numeric:DoubleBox IsEnabled="False"
                       StringFormat="F1"
                       Value="1.234" />
</StackPanel>

Testing your gist with material next.

[JohanLarsson]

<Window x:Class="Gu.Wpf.NumericInput.Material.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:local="clr-namespace:Gu.Wpf.NumericInput.Material"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:numeric="http://gu.se/NumericInput"
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{DynamicResource MaterialDesignFont}"
        TextElement.FontSize="13"
        TextElement.FontWeight="Regular"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextOptions.TextFormattingMode="Ideal"
        TextOptions.TextRenderingMode="Auto">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.DeepPurple.xaml" />
            </ResourceDictionary.MergedDictionaries>

            <Style TargetType="numeric:DoubleBox">
                <Setter Property="Background" Value="{DynamicResource MaterialDesignPaper}" />
                <Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}" />
            </Style>
        </ResourceDictionary>
    </Window.Resources>

    <StackPanel>
        <numeric:DoubleBox IsEnabled="True"
                           StringFormat="F1"
                           Value="1.234" />

        <numeric:DoubleBox IsEnabled="True"
                           StringFormat="F1"
                           Value="1.234" />

        <numeric:DoubleBox IsEnabled="False"
                           StringFormat="F1"
                           Value="1.234" />
    </StackPanel>
</Window>

Renders as expected but chances are I dumbed the repro, just grabbed xaml from the material quickstart.

[grandangelo]

Renders as expected but chances are I dumbed the repro, just grabbed xaml from the material quickstart.

I think the issue comes when using style triggers. Your code works also for me. Can you please try adding

<Style TargetType="numeric:DoubleBox">
    <Style.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Background" Value="Red"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="True">
            <Setter Property="Background" Value="Yellow"/>
        </Trigger>
    </Style.Triggers>
</Style>

[JohanLarsson]

Still can't repro

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:numeric="http://gu.se/NumericInput"
        Title="TriggersWindow"
        Width="800"
        Height="450"
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{DynamicResource MaterialDesignFont}"
        TextElement.FontSize="13"
        TextElement.FontWeight="Regular"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextOptions.TextFormattingMode="Ideal"
        TextOptions.TextRenderingMode="Auto"
        mc:Ignorable="d">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.DeepPurple.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <Style TargetType="numeric:DoubleBox">
                <Style.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Background" Value="Red" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="True">
                        <Setter Property="Background" Value="Yellow" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ResourceDictionary>
    </Window.Resources>
    <StackPanel>
        <numeric:DoubleBox IsEnabled="True"
                           StringFormat="F1"
                           Value="1.234" />

        <numeric:DoubleBox IsEnabled="True"
                           StringFormat="F1"
                           Value="1.234" />

        <numeric:DoubleBox IsEnabled="False"
                           StringFormat="F1"
                           Value="1.234" />
    </StackPanel>
</Window>

Not sure what I'm dumbing.

[grandangelo]

I've the resource dictionary in the app.xaml, but should not make any difference... Attached sample solution (VS 2017 Pro) that is showing the issue for me. Hope it helps.

Numeric.zip