WPF Toolkit to Telerik

1 Answer 37 Views
ComboBox NumericUpDown Styling
Yogendra
Top achievements
Rank 1
Yogendra asked on 26 Feb 2022, 04:11 PM

Hi Team,

 

I moved from WPF Toolkit to Telerik

But here I am facing some issues with few tools

IntegerUpDown, DecimalUpDown, DoubleUpDown, WatermarkComboBox

I am pasting my previous properties which I am looking here in Telerik

Kindly help me in this.

 

a) IntegerUpDown

<xctk:IntegerUpDown
                                            MinWidth="90"
                                            MaxWidth="{Binding ElementName=sv1,
                                                               Path=ActualWidth}"
                                            Margin="1"
                                            HorizontalAlignment="Stretch"
                                            classes:DynamicContainerStyle.BaseStyle="{DynamicResource {x:Type xctk:IntegerUpDown}}"
                                            AutomationProperties.AutomationId="ManfShelfLife"
                                            FormatString="N0"
                                            Increment="1"
                                            Maximum="3650"
                                            Minimum="0"
                                            Visibility="{Binding RelativeSource={RelativeSource AncestorType=UserControl},
                                                                 Path=DataContext.IsPerishable,
                                                                 Converter={StaticResource BooleanToVisibilityConverter}}"
                                            Value="{Binding Path=ShelfLife,
                                                            Mode=TwoWay,
                                                            ValidatesOnDataErrors=True,
                                                            UpdateSourceTrigger=PropertyChanged}">

 

b) DecimalUpDown

<xctk:DecimalUpDown
                                            MaxWidth="100"
                                            DefaultValue="0"
                                            DisplayDefaultValueOnEmptyText="True"
                                            Increment="0.1"
                                            Maximum="{Binding DecimalMaxValue}"
                                            Minimum="{Binding DecimalMinValue}"
                                            Text="{Binding Qty,
                                                           ValidatesOnDataErrors=True,
                                                           Mode=TwoWay,
                                                           UpdateSourceTrigger=PropertyChanged}" />

 

c) DoubleUpDown

<xctk:DoubleUpDown
                    Width="{Binding RelativeSource={RelativeSource AncestorType=DataGridTemplateColumn},
                                    Path=MaxWidth}"
                    HorizontalAlignment="Stretch"
                    Increment="0.1"
                    Maximum="200000"
                    Minimum="0"
                    IsEnabled="{Binding DataContext.IsMaterialInactive,
                                        RelativeSource={RelativeSource AncestorType=UserControl},
                                        Converter={StaticResource InverseBooleanConverter}}"
                    Text="{Binding RelativeSource={RelativeSource AncestorType=DataGridRow},
                                   Path=DataContext.MinValue,
                                   UpdateSourceTrigger=PropertyChanged,
                                   ValidatesOnDataErrors=True,
                                   Mode=TwoWay}" />

 

d) WatermarkComboBox

<xctk:WatermarkComboBox
                            Margin="0,15,0,0"
                            HorizontalAlignment="Stretch"
                            BorderBrush="Black"
                            ItemsSource="{Binding SelectedTemplate.TemplateWorkflows}"
                            SelectedItem="{Binding SelectedWorkflow}"
                            Style="{DynamicResource WatermarkComboBoxStyle}">
                            <xctk:WatermarkComboBox.Watermark>
                                <TextBlock
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Center"
                                    FontSize="12"
                                    Text="- Please Select -"
                                    TextAlignment="Center" />
                            </xctk:WatermarkComboBox.Watermark>
                            <xctk:WatermarkComboBox.ItemTemplate>
                                <DataTemplate>
                                    <ListBoxItem Content="{Binding Name}" ToolTip="{Binding Description}" />
                                </DataTemplate>
                            </xctk:WatermarkComboBox.ItemTemplate>
                        </xctk:WatermarkComboBox>

 

How to give Style in telerik, ResourceKeys are not there I am getting errors

Providing code which I want to get in Telerik

<Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type themes:ResourceKeys}, ResourceId=SpinnerButtonStyleKey}" TargetType="RepeatButton">
        <Setter Property="Background" Value="{DynamicResource {x:Static themes:ResourceKeys.ButtonNormalBackgroundKey}}" />
        <Setter Property="BorderBrush" Value="{DynamicResource {x:Static themes:ResourceKeys.ButtonNormalOuterBorderKey}}" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Padding" Value="2,2" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Grid>
                        <xctk:ButtonChrome
                            x:Name="Chrome"
                            Background="Transparent"
                            BorderBrush="{StaticResource Black25Brush}"
                            CornerRadius="{DynamicResource {x:Static themes:ResourceKeys.SpinButtonCornerRadiusKey}}"
                            RenderEnabled="{TemplateBinding IsEnabled}"
                            RenderMouseOver="{TemplateBinding IsMouseOver}"
                            RenderNormal="True"
                            RenderPressed="{TemplateBinding IsPressed}"
                            SnapsToDevicePixels="true" />

                        <ContentPresenter
                            Margin="{TemplateBinding Padding}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 

Regards,

Yogendra

1 Answer, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 02 Mar 2022, 11:46 AM

Hello Yogendra,

The IntegerUpDown can be replaced with the Telerik's RadNumericUpDown control with the following settings:

 <telerik:RadNumericUpDown  SmallChange="1"  Minimum="0" Maximum="360"
                                                Value="30"  IsInteger="True"/>

For the decimal and double up downs, you can use the following setup:

<telerik:RadNumericUpDown Width="300" VerticalAlignment="Center"
                                  SmallChange="0.1"   Minimum="0"
                                  Maximum="360"   NullValue="0" Value="30"/>

Note that the RadNumericUpDown doesn't have a DefaultValue properties like in the xctk:DecimalUpDown example, but instead, you can set the NullValue property which is displayed in case the Value is null.

For the xctk:WatermarkComboBox, you can use the RadComboBox control. To display a watermark content when the control IsEditable, you can use the EmptyText property. For a non-editable RadComboBox, use the EmptySelectionBoxTemplate property. Both are described in the EmptyText article.

About the style with the ResourceKeys, I am not sure if I understand the exact setup? What are those keys, how do you want to use this style? Can you provide more context on this issue?

Regards,
Martin Ivanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Yogendra
Top achievements
Rank 1
commented on 02 Mar 2022, 11:53 AM

Hi Martin,

Thanks for your response.

I used RadNumericUpDown, but in this I am facing an issue, if I am expanding or contracting my Application page so digits are getting disappeared at certain minimum width, previously I was using IntegerUpDown this was not there in any ratio I am getting the display.

The size what I need is below SS and I am not able to see the digits.

 

And below when I expanded

 

See the difference, please look into this.

 

Regards,

Yogendra

Martin Ivanov
Telerik team
commented on 07 Mar 2022, 10:02 AM

I've tested this with one of my previous code snippets but I couldn't reproduce the issue. You can check the attached project and let me know if I am missing anything.
Yogendra
Top achievements
Rank 1
commented on 07 Mar 2022, 12:45 PM

Hi Martin,

 

Issue got resolved now, Styling we need to add that was missing and Fluent nuget was missing, after this it started working as expected.

 

Regards,

Yogendra

Tags
ComboBox NumericUpDown Styling
Asked by
Yogendra
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Share this question
or