Cant customize buttons via styles?

[Jesse Knott]

Hello, I have found I can customize the updown buttons in the direct XAML code, but I cannot get it to work from a `<Style>` tag

The same holds true for a ComboBox

Here is my code.

This style code does not work although other parts do work (color, font size etc)

    <Style
        ApplyToDerivedTypes="True"
        CanCascade="True"
        TargetType="numericupdown:SfNumericUpDown">
        <Setter Property="TextColor" Value="#36AF32" />
        <Setter Property="FontSize" Value="{StaticResource Key=LargeFont}" />
        <Setter Property="SpinButtonAlignment" Value="Both" />
        <Setter Property="AutoReverse" Value="True" />
        <Setter Property="SelectAllOnFocus" Value="True" />
        <Setter Property="EnableGroupSeparator" Value="True" />
        <Setter Property="SpinValidation" Value="Tapped" />
        <!--<Setter Property="BackgroundColor" Value="{StaticResource Key=cBackgroundColor}" />-->
        <Setter Property="UpDownButtonColor" Value="{StaticResource Key=cHilightColor}" />
        <Setter Property="FontFamily" Value="{StaticResource Key=Baloo2-Regular}" />
       <Setter Property="IncrementButtonView">
            <Setter.Value>
                <Grid HeightRequest="14" WidthRequest="14">
                    <Image Aspect="AspectFit" Source="{StaticResource Key=icoincrement}" />
                </Grid>
            </Setter.Value>
        </Setter>
        <Setter Property="IncrementButtonSettings">
            <numericupdown:UpDownButtonSettings ButtonHeight="15" ButtonWidth="15" />
        </Setter>
        <Setter Property="DecrementButtonSettings">
            <numericupdown:UpDownButtonSettings ButtonHeight="15" ButtonWidth="15" />
        </Setter>
        <Setter Property="DecrementButtonView">
            <Setter.Value>
                <Grid HeightRequest="14" WidthRequest="14">
                    <Image Aspect="AspectFit" Source="{StaticResource Key=icodecrement}" />
                </Grid>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger TargetType="numericupdown:SfNumericUpDown" Property="IsFocused" Value="True">
                <Setter Property="BackgroundColor" Value="{StaticResource Key=cActiveBackgroundColor}" />
            </Trigger>
        </Style.Triggers>
    </Style>

Here is the code used for the combo box

        

    <Style TargetType="{x:Type combobox:DropDownButtonSettings}">
        <Setter Property="Height" Value="17" />
        <Setter Property="Width" Value="17" />
        <Setter Property="FontColor" Value="{StaticResource Key=primary-title-color}" />
        <Setter Property="HighlightedBackgroundColor" Value="{StaticResource Key=cHilightColor}" />
        <Setter Property="Image" Value="{StaticResource Key=icoDropDown}" />
    </Style>

The part I cant figure out is why it works in direct code, but not in the style. (I use these controls in many places, so setting directly is inefficient and problematic for maintaining code or making changes)

I hope I'm just missing some step that is easy to fix,

[Jesse Knott]

I realized I still had some of the variations I'd been playing with in the last sample.

This theoretically should be an effective means to style the buttons from what I understand.

      <Style
          ApplyToDerivedTypes="True"
          CanCascade="True"
          TargetType="numericupdown:SfNumericUpDown">
            <Setter Property="TextColor" Value="{StaticResource Key=cTextColor}" />
            <Setter Property="FontSize" Value="{StaticResource Key=DataFont}" />
            <Setter Property="SpinButtonAlignment" Value="Both" />
            <Setter Property="AutoReverse" Value="True" />
            <Setter Property="SelectAllOnFocus" Value="True" />
            <Setter Property="EnableGroupSeparator" Value="True" />
            <Setter Property="SpinValidation" Value="Tapped" />
            <Setter Property="UpDownButtonColor" Value="{StaticResource Key=cHilightColor}" />
            <Setter Property="FontFamily" Value="{StaticResource Key=Baloo2-Regular}" />
            <Setter Property="IncrementButtonSettings">
                 <Setter.Value>
                     <numericupdown:UpDownButtonSettings ButtonHeight="15" ButtonWidth="15" />
                 </Setter.Value>
            </Setter>
            <Setter Property="IncrementButtonView">
                <Setter.Value>
                    <Grid HeightRequest="18" WidthRequest="18">
                        <Image Aspect="AspectFit" Source="{StaticResource Key=icoGPS}" />
                    </Grid>
                </Setter.Value>
            </Setter>
            <Setter Property="DecrementButtonSettings">
                <Setter.Value>
                    <numericupdown:UpDownButtonSettings ButtonHeight="15" ButtonWidth="15" />
                </Setter.Value>
            </Setter>
            <Setter Property="DecrementButtonView">
                <Setter.Value>
                    <Grid HeightRequest="14" WidthRequest="14">
                        <Image Aspect="AspectFit" Source="{StaticResource Key=icoGPS}" />
                    </Grid>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger TargetType="numericupdown:SfNumericUpDown" Property="IsFocused" Value="True">
                    <Setter Property="BackgroundColor" Value="{StaticResource Key=cActiveBackgroundColor}" />
                </Trigger>
            </Style.Triggers>
        </Style>

This should work as best as I can tell. Is the control just not able to be styled from a `<Style>` tag?

Thanks again!

[Jesse Knott]

I have discovered the problem when it comes to CheckBoxes, I cannot customize the Dropdown items for a combobox once it is encased in a TextInputLayout.

It appears that the textinputlayout overrides and forces it's own scheme for the ComboBox.

Is it possible to overload this and make it work?

I still cannot get styling to work for the NumericUpDown buttons at all.

Cheers!

[Eswaran Thirugnanasambandam]

Hi Jesse Knott, 

 

Greetings from Syncfusion. 

 

Query 1: The part I cant figure out is why it works in direct code, but not in the style. (I use these controls in many places, so setting directly is inefficient and problematic for maintaining code or making changes). I still cannot get styling to work for the NumericUpDown buttons at all. 

 

In our SfNumericUpDown we have initialized IncrementButtonSettings and DecrementButtonSettings in constructor. So that the style customization value for these properties got neglected. You can set these two property values in Resources section by implementation explicit class for these two-property type as per the below code snippet. 

 

  

 

Code snippet: 

 

<ContentPage.Resources> 

        <updown:UpDownButtonSettings x:Key="DecrementButtonSettingsStyle" ButtonHeight="15" ButtonWidth="15"> 

        </updown:UpDownButtonSettings> 

 

        <updown:UpDownButtonSettings x:Key="IncrementButtonSettingsStyle" ButtonHeight="15" ButtonWidth="15"> 

        </updown:UpDownButtonSettings> 

 

        <Style 

          ApplyToDerivedTypes="True" 

          CanCascade="True" 

          TargetType="updown:SfNumericUpDown"> 

            <Setter Property="TextColor" Value="Red" /> 

            <Setter Property="FontSize" Value="20" /> 

.. 

        </Style> 

        

    </ContentPage.Resources> 

    <ContentPage.Content> 

        <StackLayout Margin="10"> 

            <updown:SfNumericUpDown Margin="10" 

                                    IncrementButtonSettings="{StaticResource IncrementButtonSettingsStyle}" 

                                    DecrementButtonSettings="{StaticResource DecrementButtonSettingsStyle}"> 

 

            </updown:SfNumericUpDown> 

        </StackLayout> 

    </ContentPage.Content> 

  

 

Query 2: I cannot customize the Dropdown items for a combobox once it is encased in a TextInputLayout. 

It appears that the textinputlayout overrides and forces it's own scheme for the ComboBox. 

 

Currently we do not have support to achieve your requirement “Support for SfComboBox drop-down button customization in SfTextInputLayout” but we have already logged this as a feature request, and you can track the status of this feature implements through the below link. 

 

Feedback link: https://www.syncfusion.com/feedback/11655/support-for-sfcombobox-drop-down-button-customization-in-sftextinputlayout  

 

 Please cast your vote to make it count. We will prioritize the features every release based on the demands. 

 

If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal. 

 

Regards, 

Eswaran 

[Jesse Knott]

         

Using your example code here I was able to control the size of the `+` and `-` buttons but still could not modify the icons, This code below throws some exception about a child already being assigned to a parent.

          <numericupdown:UpDownButtonSettings
                x:Key="DecrementButtonSettingsStyle"
                ButtonHeight="15"
                ButtonWidth="15">
                <numericupdown:UpDownButtonSettings.ButtonView>
                    <Grid HeightRequest="15" WidthRequest="15">
                        <Image Aspect="AspectFit" Source="{StaticResource Key=icoDownArrow}" />
                    Grid>
                numericupdown:UpDownButtonSettings.ButtonView>
            numericupdown:UpDownButtonSettings>
 
            <numericupdown:UpDownButtonSettings
                x:Key="IncrementButtonSettingsStyle"
                ButtonHeight="15"
                ButtonWidth="15">
                <numericupdown:UpDownButtonSettings.ButtonView>
                    <Grid HeightRequest="15" WidthRequest="15">
                        <Image Aspect="AspectFit" Source="{StaticResource Key=icoUpArrow}" />
                    Grid>
                numericupdown:UpDownButtonSettings.ButtonView>
            numericupdown:UpDownButtonSettings>

........
           
               <numericupdown:SfNumericUpDown x:Name="BarrelLen"
                                    AutoReverse="True"
                                    DecrementButtonSettings="{DynamicResource Key=DecrementButtonSettingsStyle}"
                                    HeightRequest="50"
                                    IncrementButtonSettings="{DynamicResource Key=IncrementButtonSettingsStyle}"
                                    Maximum="32"
                                    MaximumDecimalDigits="2"
                                    Minimum="0.5"
                                    SelectAllOnFocus="True"
                                    SpinValidation="Tapped"
                                    StepValue="0.25"
                                    ValueChangeMode="OnLostFocus"
                                    VerticalOptions="End"
                                    Watermark="Length"
                                    WidthRequest="100"
                                    Value="{Binding Path=MyWeapon.BarrelLen, Mode=TwoWay}" />


                <numericupdown:SfNumericUpDown x:Name="RoundCount"
                        AutoReverse="False"
                        DecrementButtonSettings="{DynamicResource Key=DecrementButtonSettingsStyle}"
                        HeightRequest="50"
                        Maximum="250000"
                        MaximumDecimalDigits="0"
                        Minimum="0"
                        SelectAllOnFocu="True"
                        SpinValidation="Tapped"
                        StepValue="1"
                        ValueChangeMode="OnLostFocus"
                        Watermark="Length"
                        WidthRequest="110"
                        Value="{Binding Path=MyWeapon.RoundCount, Mode=TwoWay}" />

Does this mean that to modify the look of the numericupdown I will have to overload it and specify the icons in every instance?

[Sridevi Sivakumar]

Hi Jesse Knott,

We have analyzed your query and with provided code snippet and we found that the crash occurs due to set same instance Key(DecrementButtonSettingsStyle) to multiple classes. If you like to set the DecrementButtonSettings/ IncrementButtonSettings values in generic type, you can achieve this by implementing Style for these two properties in Resources section as like below.

Code snippet 

  

        <Style x:Key="IncrementButtonSettingsStyle" TargetType="numericupdown:UpDownButtonSettings" > 

            <Setter Property="ButtonHeight" Value="15"/> 

            <Setter Property="ButtonWidth" Value="15"/> 

         .. 

        </Style> 

  

        <Style x:Key="DecrementButtonSettingsStyle" TargetType="numericupdown:UpDownButtonSettings" > 

            <Setter Property="ButtonHeight" Value="25"/> 

            <Setter Property="ButtonWidth" Value="25"/> 

        .. 

        </Style> 

  

        <Style x:Key="SfNumericUpDownStyle" TargetType="numericupdown:SfNumericUpDown" > 

            <Setter Property="TextColor" Value="Red"/> 

        .. 

        </Style> 

  

  

And set this explicit type style Key in multiple controls as like below. 

  

  

<StackLayout Margin="10"> 

  

            <numericupdown:SfNumericUpDown Style="{StaticResource SfNumericUpDownStyle}"> 

  

                <numericupdown:SfNumericUpDown.IncrementButtonSettings> 

                    <numericupdown:UpDownButtonSettings Style="{StaticResource IncrementButtonSettingsStyle}"/> 

                </numericupdown:SfNumericUpDown.IncrementButtonSettings> 

  

                <numericupdown:SfNumericUpDown.DecrementButtonSettings> 

                    <numericupdown:UpDownButtonSettings Style="{StaticResource DecrementButtonSettingsStyle}"/> 

                </numericupdown:SfNumericUpDown.DecrementButtonSettings> 

  

            </numericupdown:SfNumericUpDown> 

  

            <numericupdown:SfNumericUpDown Style="{StaticResource SfNumericUpDownStyle}"> 

  

                <numericupdown:SfNumericUpDown.IncrementButtonSettings> 

                    <numericupdown:UpDownButtonSettings Style="{StaticResource IncrementButtonSettingsStyle}"/> 

                </numericupdown:SfNumericUpDown.IncrementButtonSettings> 

  

                <numericupdown:SfNumericUpDown.DecrementButtonSettings> 

                    <numericupdown:UpDownButtonSettings Style="{StaticResource DecrementButtonSettingsStyle}"/> 

                </numericupdown:SfNumericUpDown.DecrementButtonSettings> 

  

            </numericupdown:SfNumericUpDown> 

            

        </StackLayout> 

Please let us know if you have any queries.

Regards,
Sridevi S. 

  

 

[Jesse Knott]

I see, does this mean that rather than have a single <Style> that overrides every instance of the control, I will need to overload each instance of the increment and decrement button? If the control does need to be managed in a per instance manner, that's fine. I will just have to create more style tags as you've shown above. I just also need to know if the increment and decrement buttons can be styled too?

For instance this code

    <Style
    ApplyToDerivedTypes="True"
    CanCascade="True"
    TargetType="numericupdown:SfNumericUpDown">
        <Setter Property="TextColor" Value="{StaticResource Key=cTextColor}" />
        <Setter Property="FontSize" Value="{StaticResource Key=DataFont}" />
        <Setter Property="SpinButtonAlignment" Value="Both" />
        <Setter Property="AutoReverse" Value="True" />
        <Setter Property="SelectAllOnFocus" Value="True" />
        <Setter Property="EnableGroupSeparator" Value="True" />
        <Setter Property="SpinValidation" Value="Default" />
        <Setter Property="UpDownButtonColor" Value="{StaticResource Key=cHilightColor}" />
        <Setter Property="FontFamily" Value="{StaticResource Key=Baloo2-Regular}" />
     </Style>

Will set the default look and feel for the numeric updown controls, unless I change the values explicitly.

However, I cannot also add this to override the look and feel of the spin buttons?

        <Setter Property="IncrementButtonSettings">
            <Setter.Value>
                <numericupdown:UpDownButtonSettings ButtonHeight="14" ButtonWidth="14" />
            </Setter.Value>
        </Setter>
        <Setter Property="IncrementButtonView">
            <Setter.Value>
                <Grid HeightRequest="15" WidthRequest="15">
                    <Image Aspect="AspectFit" Source="icoGear" />
                </Grid>
            </Setter.Value>
        </Setter>
        <Setter Property="DecrementButtonSettings">
            <Setter.Value>
                <numericupdown:UpDownButtonSettings ButtonHeight="14" ButtonWidth="14" />
            </Setter.Value>
        </Setter>
        <Setter Property="DecrementButtonView">
            <Setter.Value>
                <Grid HeightRequest="15" WidthRequest="15">
                    <Image Aspect="AspectFit" Source="{StaticResource Key=icoGear}" />
                </Grid>
            </Setter.Value>
        </Setter>
    </Style>

At the moment I am actually just defining the increment and decrement button settings in each instance of the control, but since the control is used roughly 20+ times in my app, it makes managing the code, and changes to it, more cumbersome.

[Sridevi Sivakumar]

Hi Jesse Knott,

You no need to create style for each numeric up down control. Just below mentioned three styles enough to set n number of numeric up down controls.  

  

<Style x:Key="IncrementButtonSettingsStyle" TargetType="numericupdown:UpDownButtonSettings" >
<Setter Property="ButtonHeight" Value="15"/>
<Setter Property="ButtonWidth" Value="15"/>
<Setter Property="ButtonImage" Value="Plus"/>  //Button custom image view
</Style> 

  

<Style x:Key="DecrementButtonSettingsStyle" TargetType="numericupdown:UpDownButtonSettings" >
<Setter Property="ButtonHeight" Value="15"/>
<Setter Property="ButtonWidth" Value="15"/>
<Setter Property="ButtonImage" Value="Minus"/> //Button custom image view
</Style> 

  

<Style x:Key="SfNumericUpDownStyle" TargetType="numericupdown:SfNumericUpDown" > 

            <Setter Property="TextColor" Value="red" /> 

.. 

        </Style> 

  

..

<StackLayout Margin="10"> 

  

            <numericupdown:SfNumericUpDown Style="{StaticResource SfNumericUpDownStyle}"> 

                <numericupdown:SfNumericUpDown.IncrementButtonSettings> 

                    <numericupdown:UpDownButtonSettings Style="{StaticResource IncrementButtonSettingsStyle}"/> 

                </numericupdown:SfNumericUpDown.IncrementButtonSettings> 

                <numericupdown:SfNumericUpDown.DecrementButtonSettings> 

                    <numericupdown:UpDownButtonSettings Style="{StaticResource DecrementButtonSettingsStyle}"/> 

                </numericupdown:SfNumericUpDown.DecrementButtonSettings> 

            </numericupdown:SfNumericUpDown> 

  

            <numericupdown:SfNumericUpDown Style="{StaticResource SfNumericUpDownStyle}"> 

                <numericupdown:SfNumericUpDown.IncrementButtonSettings> 

                    <numericupdown:UpDownButtonSettings Style="{StaticResource IncrementButtonSettingsStyle}"/> 

                </numericupdown:SfNumericUpDown.IncrementButtonSettings> 

                <numericupdown:SfNumericUpDown.DecrementButtonSettings> 

                    <numericupdown:UpDownButtonSettings Style="{StaticResource DecrementButtonSettingsStyle}"/> 

                </numericupdown:SfNumericUpDown.DecrementButtonSettings> 

            </numericupdown:SfNumericUpDown> 

  

        </StackLayout> 

For increment/decrement button view customization, please use ButtonImage property in UpDownButtonSettings as mentioned above.  Also if you like to modify the button view background, please use BackgroundColor property in UpDownButtonSettings.

Please refer below UG links for ButtonImage, BackgroundColor properties.
https://help.syncfusion.com/xamarin/numericupdown/spin-button-customization#by-using-the-image-with-buttonheight-and-buttonwidth 

https://help.syncfusion.com/xamarin/numericupdown/spin-button-customization#backgroundcolor

We have prepared a sample for this customization, please find the sample from the below location.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/UpDownSample-806512025



Please let us know if you have any other queries.

Regards,
Sridevi S.