InlineButton.ForegroundProperty not working for me

[Simon]

 

When I upgraded from 2016.1.113.45 to the latest version (now using your Nuget package) I noticed that the styling of my numeric box had changed and the spinner arrows were no longer showing up for me since both the background and foreground are coming out white.  I am switching the styling via code like that of below.  All the properties seem to be working fine so far except the pointer foreground ones.  They seem to come out as the default white, but I want black.  Can you please see if this is a bug, or if there is a suggested fix?  This did work with previous versions of UI for Windows Store 8.1 and UI for UWP.

            Style numericUpDownButtonStyle = new Style();
            numericUpDownButtonStyle.TargetType = typeof(InlineButton);
            numericUpDownButtonStyle.Setters.Add(new Setter() { Property = InlineButton.ForegroundProperty, Value = new SolidColorBrush(Colors.Black) });//not working
            numericUpDownButtonStyle.Setters.Add(new Setter() { Property = InlineButton.BackgroundProperty, Value = new SolidColorBrush(Colors.White) });
            numericUpDownButtonStyle.Setters.Add(new Setter() { Property = InlineButton.HeightProperty, Value = 40 });
            numericUpDownButtonStyle.Setters.Add(new Setter() { Property = InlineButton.WidthProperty, Value = 40 });
            numericUpDownButtonStyle.Setters.Add(new Setter() { Property = InlineButton.BorderBrushProperty, Value = this.numericBoxPicker.BorderBrush });
            numericUpDownButtonStyle.Setters.Add(new Setter() { Property = InlineButton.BorderThicknessProperty, Value = numericBoxPicker.BorderThickness });
            numericUpDownButtonStyle.Setters.Add(new Setter() { Property = InlineButton.PointerOverBackgroundBrushProperty, Value = new SolidColorBrush(Colors.White) });
            numericUpDownButtonStyle.Setters.Add(new Setter() { Property = InlineButton.PointerOverBorderBrushProperty, Value = new SolidColorBrush(Colors.Black) });
            numericUpDownButtonStyle.Setters.Add(new Setter() { Property = InlineButton.PointerOverForegroundBrushProperty, Value = new SolidColorBrush(Colors.Black) });//not working
            numericUpDownButtonStyle.Setters.Add(new Setter() { Property = InlineButton.IsTabStopProperty, Value = false });

            numericBoxPicker.DecreaseButtonStyle = numericUpDownButtonStyle;
            numericBoxPicker.IncreaseButtonStyle = numericUpDownButtonStyle;

 

 

I have also tried the named brush and it does not seem to work either and is not the best solution for me anyway.

<SolidColorBrush x:Key="TelerikNumericBoxSpinButtonForegroundBrush" Color="Black" />

[Pavel R. Pavlov]

Hi Simon,

Thank you for contacting us on that matter. We were able to reproduce the reported behavior on our side with the provided code. However, this behavior is expected with the current setup. Please keep in mind that the InlineButton is used throughout many controls and this forces us to use different Content in all different scenarios. This is why the content of the InlineButton is not set. There are styles named NumericButtonDecreaseStyle and NumericButtonIncreaseStyle which apply the correct content. In order to utilize the same content in your application you need to either base your custom styles on the mentioned ones or you need to explicitly set the Content property in your styles.

Please give this approach a try and let us know how it goes.

Regards,
Pavel R. Pavlov
Telerik by Progress

[Simon]

I am not totally sure I understand what you are suggesting.  Should I try to get the existing style and then just alter some values, something like this?

 

numericBoxPicker.DecreaseButtonStyle.SetValue(InlineButton.ForegroundProperty, new SolidColorBrush(Colors.Black));

 

[Simon]

This also doesn't really explain why my code used to work in a previous version, but broke in the most recent release.

[Pavel R. Pavlov]

Hello,

It seems we have made a breaking change regarding the different styles applied to the InlineButton in our code. The easiest approach for you would be to set the Content property with your custom style as well. The main issue is that when a partially custom style is applied to the IncreaseButtonStyle or DecreaseButtonStyle (e.g. a style changing some properties, not all of them) all the properties that are not set does not get their default value. Instead they get set to null. This causes the Content to not be visible in your case.
However, if you set it in your custom styles you should see it.

We will make sure this gets fixed and properly documented in our next official release. As a small sign of compensation I updated your Telerik account.

Regards,
Pavel R. Pavlov
Telerik by Progress

[Simon]

I am still a bit confused as to how to code a workaround for this issue.  How can I get the existing/default Content property?  Can you provide a code sample on how you suggest I get and then set the content property?

Thanks
Simon

 

[Pavel R. Pavlov]

Hi Simon,

Getting the default value of the Content property of the InlineButton is not possible at this time. In your particular case you need to set the Content in order to see it. You can use these two styles:

<Style TargetType="primitivesCommon:InlineButton" x:Key="NumericButtonIncreaseStyle">
    <Setter Property="ClickMode" Value="Press" />
    <Setter Property="Padding" Value="9,2,9,4" />
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="FontSize" Value="16" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="VerticalAlignment" Value="Stretch" />
    <Setter Property="Content" Value="&#xE0A0;" />
</Style>

<Style TargetType="primitivesCommon:InlineButton" x:Key="NumericButtonDecreaseStyle" BasedOn="{StaticResource NumericButtonIncreaseStyle}">
    <Setter Property="Margin" Value="2,0" />
    <Setter Property="Content" Value="&#xE0A1;" />
</Style>

Please give this approach a try and let us know how it goes on your side.

Regards,
Pavel R. Pavlov
Telerik by Progress

[Simon]

I tried adding the content property but I am doing this in code behind, not xaml, and the button now shows the actual string "&#xE0A1;"  not the up/down arrows.  Any thoughts on how to it render the properly? is it a specific fontfamily?

 

numericUpDownButtonStyle.Setters.Add(new Setter() { Property = InlineButton.ContentProperty, Value = "&#xE0A1;" });

 

[Pavel R. Pavlov]

Hi Simon,

Here are all the styles that we apply to the respective buttons

<Style TargetType="primitivesCommon:InlineButton" x:Key="NumericBoxButtonBaseStyle">
    <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
</Style>

<Style TargetType="primitivesCommon:InlineButton" x:Key="NumericButtonIncreaseStyle" BasedOn="{StaticResource NumericBoxButtonBaseStyle}">
    <Setter Property="ClickMode" Value="Press" />
    <Setter Property="Padding" Value="9,2,9,4" />
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="FontSize" Value="16" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="VerticalAlignment" Value="Stretch" />
    <Setter Property="Content" Value="&#xE0A0;" />
    <Setter Property="Background" Value="{ThemeResource TelerikNumericBoxSpinButtonBackgroundBrush}" />
    <Setter Property="Foreground" Value="{ThemeResource TelerikNumericBoxSpinButtonForegroundBrush}" />
    <Setter Property="BorderBrush" Value="{ThemeResource TelerikNumericBoxSpinButtonBackgroundBrush}" />
    <Setter Property="PointerOverBackgroundBrush" Value="{ThemeResource TelerikNumericBoxSpinButtonPointerOverBackgroundBrush}" />
    <Setter Property="PointerOverForegroundBrush" Value="{ThemeResource TelerikNumericBoxSpinButtonForegroundBrush}" />
    <Setter Property="PointerOverBorderBrush" Value="{ThemeResource TelerikNumericBoxSpinButtonPointerOverBackgroundBrush}" />
    <Setter Property="PressedBackgroundBrush" Value="{ThemeResource TelerikNumericBoxSpinButtonPressedBackgroundBrush}" />
    <Setter Property="PressedForegroundBrush" Value="{ThemeResource TelerikNumericBoxSpinButtonPressedForegroundBrush}" />
    <Setter Property="PressedBorderBrush" Value="{ThemeResource TelerikNumericBoxSpinButtonPressedBackgroundBrush}" />
    <Setter Property="DisabledBackgroundBrush" Value="{ThemeResource TelerikNumericBoxSpinButtonDisabledBackgroundBrush}" />
    <Setter Property="DisabledForegroundBrush" Value="{ThemeResource TelerikNumericBoxSpinButtonDisabledForegroundBrush}" />
    <Setter Property="DisabledBorderBrush" Value="{ThemeResource TelerikNumericBoxSpinButtonDisabledBorderBrush}" />
</Style>

<Style TargetType="primitivesCommon:InlineButton" x:Key="NumericButtonDecreaseStyle" BasedOn="{StaticResource NumericButtonIncreaseStyle}">
    <Setter Property="Margin" Value="2,0" />
    <Setter Property="Content" Value="&#xE0A1;" />
</Style>

I am pasting them so that you can take a look and decide how you should alter the default look in your specific case. Indeed we set a FontFamily but you should be able to set it as well. I hope this information is helpful. Let us know if you need any further assistance.

Regards,
Pavel R. Pavlov
Telerik by Progress

[Simon]

I can't seem to get it to work when trying to do this in code behind.  Due to the dynamic structure of our app we cannot do this in xaml, need to do it in code behind.  Let me know if you can somehow figure out how to do this in code behind, otherwise I am hoping this will be fixed in the next release and I will be forced to wait until then.

Thanks
Simon

 

[Pavel R. Pavlov]

Hello Simon,

I would like to point out that defining the style in XAML and using it in code should not be an issue. UWP is flexible enough and allows users to do this in their applications. For more information you can refer to this MSDN article.

Please give this approach a try and let us know how it goes on your side.

Regards,
Pavel R. Pavlov
Telerik by Progress

[Simon]

I realize it should not be an issue doing this in code behind, but it does not work for me.  Will the issue of all properties being reset to empty instead of their default be fixed in the next release?  If so I will just wait until that release.

 

Thanks

Simon

 

[Pavel R. Pavlov]

Hello Simon,

We have already logged this issue in our backlog system and we will do our best to fix it for the next major release - R1 2017. Most likely there will be a breaking change which will be properly documented and described in our documentation.

We hope this is good enough for you.

Regards,
Pavel R. Pavlov
Telerik by Progress

[Simon]

Yes the next major release should be fine, thanks again for your time on this issue.

Simon

 

[Pavel R. Pavlov]

Hello Simon,

You are welcome. We wanted to share some insights about the release. It is planned to be visible for our customers by the end of January.

Have a nice day.

Regards,
Pavel R. Pavlov
Telerik by Progress