Gu.Wpf.NumericInput Numeric input styling

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.

May 04 '20 12:05 grandangelo

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.

May 04 '20 17:05 JohanLarsson

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 :-))

May 06 '20 10:05 grandangelo

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.

May 06 '20 10:05 JohanLarsson

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

May 06 '20 10:05 grandangelo

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

May 06 '20 10:05 JohanLarsson

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?

May 06 '20 10:05 grandangelo

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.

May 06 '20 10:05 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 🙂

May 06 '20 10:05 JohanLarsson

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

May 06 '20 11:05 grandangelo

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.

May 06 '20 11:05 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.

May 06 '20 11:05 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.

May 06 '20 17:05 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.

May 06 '20 17:05 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}">
  ...

May 06 '20 18:05 JohanLarsson

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 <numeric:DoubleBox> <numeric:DoubleBox.Style> but you're right, I can do it as you suggest.

Nevertheless, it is still not working for me, using this gist I get this behaviour:

May 07 '20 06:05 grandangelo

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.

May 20 '20 19:05 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>

Animation

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

May 20 '20 20:05 JohanLarsson

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>

May 21 '20 06:05 grandangelo

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.

May 23 '20 15:05 JohanLarsson

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

May 25 '20 08:05 grandangelo