Questions on UI for WPF Forum

1 answer

15 views

I have found this documentation online in order to extract and modify the default template style for telerik controls.

https://docs.telerik.com/devtools/wpf/controls/radrichtextbox/styles-and-templates/styling-radrichtextbox#:~:text=To%20copy%20the%20default%20style%2C%20load%20your%20project%20in%20Expression,Style%20%2D%3E%20Edit%20a%20Copy.

I've done this many times on standard WPF controls so I am familiar with the process. When I open project, I get the below options. There is no option to edit style and edit a copy.

Object -> Edit Style -> Edit a Copy.

RichTextBox

Styling

answered on 06 May 2024

0 answers

16 views

WPF RadAutoCompleteBox custom style

I am using a WPF RadAutoCompleteBox control in my application, I am trying to set a custom style to this control but there are a few behaviors I could not get it right.

This is the current look of the control:

The colors I wish to change:

1. Text color in the textblock as pointed with the green arrow.

2. The background of the selected item in the drop down menu as pointed with the blue arrow. Currently it is showing as transparent, but I wish change it into a solid color.

3. The transparent background of the drop down menu as pointed with the purple arrow.

I have tried to change the background and foreground properties but could not see the effect on the control. I have attached the style file I used for the control.

Any advice?

Thank you!

AutoCompleteBox

Styling

updated question on 29 Apr 2024

1 answer

11 views

in a docking, RadPane header style doesn't match RadTabItem

Hi,

I'm using a RadDocking with the VisualStudio2019 Dark theme.

I'm getting confused as the header background styling is up side down in RadPane and RadTabItem leading to poor user experience.

How can I have the same styling behavior as RadTabItem header applied to RadPane header ?

Thanks.

Docking

Styling

answered on 24 Apr 2024

1 answer

24 views

Change foreground of placeholders in RadMaskedTextInput

Hello,

I'm using a RadMaskedTextInput and I'm wondering if it's possible to change the foreground color of just the placeholders?

What I'm trying to accomplish is for every X in below image to appear in a brighter color than the text typed in by the user.

What my RadMaskedTextInput looks like currently:

What I want the foreground to look like:

MaskedInput (Numeric, DateTime, Text, Currency)

Styling

answered on 25 Mar 2024

0 answers

42 views

Click event not firing on first click in a Datatemplate inside a cell-edit template

Hi
Please find my below code showing the celledittemplate

<telerik:GridViewDataColumn.CellEditTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<tbcontrols:SmartSearchRadAutoCompleteBox x:Name="JournalSuggestions" AutomationProperties.AutomationId="JournalSuggestions"
Style="{StaticResource SmartControlStyle}"
SelectionMode="Single"
KeyDown="JournalSuggestions_KeyDown"
PreviewGotKeyboardFocus="JournalSuggestions_PreviewGotKeyboardFocus"
Populating="JournalSuggestions_Populating"
Width="{Binding RelativeSource={RelativeSource AncestorType=telerik:GridViewDataColumn}, Path=ActualWidth}"
BorderThickness="0"
BorderBrush="Transparent"
ClipToBounds="True"
AutoCompleteMode="Suggest"
ItemsSource="{Binding Source={StaticResource SmartJournalAccounts}}"
DisplayMemberPath="Code"
FilteringBehavior="{StaticResource LocalJournalFilter}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
VerticalContentAlignment="Center"
DropDownItemTemplate="{Binding Source={StaticResource CustomDropDownTemplate}}"
NoResultsContentTemplate="{StaticResource NoResultsContentTemplate}"
DropDownWidth="Auto"
BoxesItemStyle="{StaticResource CustomRadAutoCompleteBoxesItemStyle}"
IsEnabled="True"
Margin="-17 0 0 0"
SearchText="{Binding DataContext.SmartControlSearchText, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadGridView}}, UpdateSourceTrigger=PropertyChanged, Mode=OneWayToSource}"
SelectedItem="{Binding Path=SmartJournalAccountItem, Mode=TwoWay}"
TextSearchMode="Contains" TextBoxStyle="{StaticResource TrailBalanceAccountTextBoxStyle}" FontSize="12" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<cal:ActionMessage MethodName="AutoCompleteBoxSelectionChanged">
<cal:Parameter Value="{Binding SelectedItem, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadAutoCompleteBox}}}"></cal:Parameter>
</cal:ActionMessage>
</i:EventTrigger>
</i:Interaction.Triggers>
<i:Interaction.Behaviors>
<behaviours:RadAutoCompleteBoxBehavior/>
</i:Interaction.Behaviors>
</tbcontrols:SmartSearchRadAutoCompleteBox>
<Button x:Name="SearchButton" Grid.Column="1"
DataContext="{Binding DataContext, RelativeSource={RelativeSource AncestorType=controls:APTPanel}}"
Click="SearchButton_Click">
<Button.Visibility>
<con:ConverterBindableBinding Binding="{Binding IsSearchAccountVisible,UpdateSourceTrigger=PropertyChanged}"
Converter="{StaticResource BooleanToVisibilityConverter}"
ConverterParameterBinding="{Binding IsSearchAccountVisible, RelativeSource={RelativeSource AncestorType={x:Type controls:APTPanel}}, UpdateSourceTrigger=PropertyChanged}">
</con:ConverterBindableBinding>
</Button.Visibility>
</Button>
</Grid>
</DataTemplate>
</telerik:GridViewDataColumn.CellEditTemplate>

If I click the "SearchButton" on first click the event does not fire, the click event fires if I click it second time.
If I remove the SmartSearchRadAutoCompleteBox control & only keep the SearchButton then it works ok.

Can someone give me code snippet having multiple controls (one radautosearchbox & one button) in datatemplate of celledittemplate or help me understand what is causing issue in my Click event

Regards,
Swapnil.

updated question on 19 Mar 2024

0 answers

24 views

Modify RadSplitContainers view inside RadDocking

I would like to create different styles and templates for the RadDocking. My current problem is to that in the RadDocking panes which were places inside the DocumentHost will have header (button for dragging, closing pinning) at top, otherwise (left, right, bottom etc) RadSplitContainer & RadPaneGroup will place buttons at bottom.

I would to place all of them at top, seems like I would to have same behavior as DocumentHost, but everywhere. Cause when I'm tried modified template of RadPaneGroup, and placed the buttons at first Grid.Row it's breaking behavior of RadPanes when you would to Drag them.

Is it possible to enforce other RadSplitContainers & RadPaneGroups behave like DocumentHost?

Docking

Styling

asked on 05 Mar 2024

2 answers

24 views

Bug with setting Grid Width?

Hello. I am trying to figure out what and why my controls are getting their widths blown out to infinity, which has the negative effect of making one of my telerik:RadGridViews not show the complete grid cause it's off the form.

I have tried setting up my project with both Telerik.UI.for.Wpf.10.Xaml and without (for NoXaml) and both show the bad behaviour. What I'm seeing is, as soon as I add a vertical scrollbar around my Grid, then all the containing widths are suddenly blown out to infinity. HUH? Why is that?

I've attached what I'm seeing. I think this is a bug. If it's not, I am not sure what I am doing wrong? I simply started to try playing with styles, and this happens to my ScrollViewer? Doesn't seem right.

Styling

answered on 01 Mar 2024

0 answers

27 views

How to change style of SchedulerDialog

Hi, I would like to change style of schedulerdialogs in ScheduleView. For example, when I click on delete appointment button, this is the style I see:

But I want the style to look like this:

As you can see, the header of this dialog looks different. I am only able to achieve this look for Radwindow not for SchedulerDialog. Is there a way ro do it?

Thank you for your answer

ScheduleView

Styling

asked on 26 Feb 2024

1 answer

39 views

I can't set the background of a RadWatermarkTextBox, I think it is a theme issue.

https://www.telerik.com/forums/setting-background-color-when-control-is-readonly

The above link shows where someone had a similar issue but isn't clear on how to solve it.

I want to set a text box to not look disabled when it is readonly.
In the example below I set the background to red just to demonstrate that nothing happens.

I think it not happening because the application is using a theme (windows11)

Can I set the BasedOn to something that means "current theme", so that it will work?

<!-- Want readonly to not look disabled in many places -->

<Style x:Key="LxReadOnlyRadW"
       TargetType="telerik:RadWatermarkTextBox"
       BasedOn="{StaticResource {x:Type telerik:RadWatermarkTextBox}}">
    <Style.Triggers>
        <Trigger Property="IsReadOnly"
                 Value="True">
            <Setter Property="Background"
                    Value="red" />
        </Trigger>
    </Style.Triggers>
    <Setter Property="IsReadOnly"
            Value="True" />
    
</Style>

Styling

answered on 19 Feb 2024

0 answers

39 views

RadBusyIndicator + StoryBoard Animation + Collection was modified; enumeration operation may not execute.

Target Application : WPF

.Net Framework : 4.6.2

Telerik Version : 2017.2.503.45 (Telerik.Windows.Controls)

Hi

We are using RadBusyIndicator control for the client application, which raising the bellow exception randmoly on Production for long time.

Unfortunately it is not reproducible in development environment.

But as per the AppInsight log, assuming that happens on StoaryBoard animation as highlighted in the below style code.

Collection was modified; enumeration operation may not execute.

Type: System.InvalidOperationException
Message: Collection was modifined; enumeration operation may not execute.
Source:mscrolib
Help link:
Data: System.Collection.ListDictionaryInternal
TargetSite: System.ThrowHelper.ThrowInvalidOperationException(ExceptionResource resource)
Stack Trace: at System.ThrowHelper.ThrowInvalidOperationException(ExceptionResource resource)
   at System.Collections.Generic.List`1.Enumerator.MoveNextRare()
   at Telerik.Windows.Controls.Animation.AnimationManager.InvkokeCallbacks(Storyboard storyboard)
   at Telerik.Windows.Controls.Animation.AnimationManager.OnStoryboardCompleted(Object sender, EventArgs e)
   at System.Windows.Media.Animation.Clock.FireEvent(EventPrivateKey key)
   at System.Windows.Media.Animation.Clock.RaiseAccumulatedEvents()
   at System.Windows.Media.Animation.TimeManager.RaiseEnqueuedEvents()
   at System.Windows.Media.Animation.TimeManager.Tick()
   at System.Windows.Media.MediaContext.RenderMessageHandlerCore(Object resizedCompositionTarget)
   at System.Windows.Media.MediaContext.AnimatedRenderMessageHandler(Object resizedCompositionTarget)
   at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
   at System.Windows.Threading.ExceptionWrapper.TryCatchWhen(Object source, Delegate callback, Object args, Int32 numArgs, Delegate catchHandler)

And following is the style used for the busy indicator. There is no clue to find the root cause except this exception log.

<Style x:Key="RadBusyIndicatorStyle"
           TargetType="{x:Type telerik:RadBusyIndicator}">
        <Setter Property="BusyContent"
                Value="Loading..." />
        <Setter Property="IsTabStop"
                Value="False" />
        <Setter Property="DisplayAfter"
                Value="0:0:0.1" />
        <Setter Property="BorderBrush"
                Value="#FFD0D0D0" />
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1"
                                     StartPoint="0.5,0">
                    <GradientStop Color="White"
                                  Offset="0" />
                    <GradientStop Color="#A9DCDADA"
                                  Offset="1" />
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderThickness"
                Value="1" />
        <Setter Property="ProgressBarStyle">
            <Setter.Value>
                <Style TargetType="{x:Type telerik:RadProgressBar}">
                    <Setter Property="Margin"
                            Value="15,15,15,5" />
                    <Setter Property="IsIndeterminate"
                            Value="True" />
                    <Setter Property="Maximum"
                            Value="100" />
                    <Setter Property="Orientation"
                            Value="Horizontal" />
                    <Setter Property="IsTabStop"
                            Value="False" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type telerik:RadProgressBar}">
                                <Grid>
                                    <Path x:Name="IndeterminateBackgroundDonut"
                                          Height="44"
                                          RenderTransformOrigin="0.5,0.5"
                                          Stroke="#FF133E80"
                                          Width="44">
                                        <Path.Data>
                                            <GeometryGroup FillRule="EvenOdd">
                                                <EllipseGeometry Center="22,22"
                                                                 RadiusY="20"
                                                                 RadiusX="20" />
                                                <EllipseGeometry Center="22,22"
                                                                 RadiusY="14"
                                                                 RadiusX="14" />
                                            </GeometryGroup>
                                        </Path.Data>
                                        <Path.Fill>
                                            <RadialGradientBrush>
                                                <GradientStop Color="#FF224272"
                                                              Offset="0" />
                                                <GradientStop Color="#FF224272"
                                                              Offset="0.921" />
                                                <GradientStop Color="#FFC8DCFB"
                                                              Offset="0.254" />
                                                <GradientStop Color="#FF335A95"
                                                              Offset="0.877" />
                                            </RadialGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                    <Path x:Name="IndeterminateDonut"
                                          Height="44"
                                          RenderTransformOrigin="0.5,0.5"
                                          Visibility="Collapsed"
                                          Width="44">
                                        <Path.Data>
                                            <GeometryGroup FillRule="EvenOdd">
                                                <EllipseGeometry Center="22,22"
                                                                 RadiusY="20"
                                                                 RadiusX="20" />
                                                <EllipseGeometry Center="22,22"
                                                                 RadiusY="14"
                                                                 RadiusX="14" />
                                            </GeometryGroup>
                                        </Path.Data>
                                        <Path.Fill>
                                            <RadialGradientBrush Center="0.5,-0.23"
                                                                 GradientOrigin="0.8,0.25"
                                                                 RadiusY="0.68"
                                                                 RadiusX="0.68">
                                                <GradientStop Color="#BFFFFFFF"
                                                              Offset="0" />
                                                <GradientStop Color="Transparent"
                                                              Offset="1" />
                                                <GradientStop Color="#21FFFFFF"
                                                              Offset="0.65" />
                                            </RadialGradientBrush>
                                        </Path.Fill>
                                        <Path.RenderTransform>
                                            <RotateTransform />
                                        </Path.RenderTransform>
                                    </Path>
                                    <Grid x:Name="ProgressBarTrack"
                                          Height="24"
                                          RenderTransformOrigin="0.5,0.5"
                                          Width="24">
                                        <Grid.Clip>
                                            <EllipseGeometry Center="12,12"
                                                             RadiusY="12"
                                                             RadiusX="12" />
                                        </Grid.Clip>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <Grid.RenderTransform>
                                            <RotateTransform Angle="-90" />
                                        </Grid.RenderTransform>
                                        <Rectangle x:Name="SkipValueSpacer" />
                                        <Rectangle x:Name="ProgressBarIndicator"
                                                   Grid.Column="1">
                                            <Rectangle.Fill>
                                                <RadialGradientBrush>
                                                    <GradientStop Color="#FFCCCCCC"
                                                                  Offset="1" />
                                                    <GradientStop Color="White" />
                                                </RadialGradientBrush>
                                            </Rectangle.Fill>
                                        </Rectangle>
                                    </Grid>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsIndeterminate"
                                             Value="True">
                                        <Trigger.EnterActions>
                                            <BeginStoryboard x:Name="MouseOverStoryboard_BeginStoryboard">
                                                <Storyboard RepeatBehavior="Forever">
                                                    <DoubleAnimationUsingKeyFrames BeginTime="0"
                                                                                   Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                                                                   Storyboard.TargetName="IndeterminateDonut">
                                                        <SplineDoubleKeyFrame KeyTime="0:0:1"
                                                                              Value="360" />
                                                    </DoubleAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </Trigger.EnterActions>
                                        <Trigger.ExitActions>
                                            <StopStoryboard BeginStoryboardName="MouseOverStoryboard_BeginStoryboard" />
                                        </Trigger.ExitActions>
                                        <Setter Property="Visibility"
                                                TargetName="IndeterminateDonut"
                                                Value="Visible" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Telerik_Windows_Controls_Animation:AnimationManager.AnimationSelector">
            <Setter.Value>
                <Telerik_Windows_Controls_Animation:AnimationSelector>
                    <Telerik_Windows_Controls_Animation:FadeAnimation AnimationName="Hide"
                                                                      Direction="Out"
                                                                      Easing="{x:Null}"
                                                                      MaxOpacity="1"
                                                                      MinOpacity="0"
                                                                      SpeedRatio="0"
                                                                      TargetElementName="Indicator" />
                    <Telerik_Windows_Controls_Animation:FadeAnimation AnimationName="Show"
                                                                      Direction="In"
                                                                      Easing="{x:Null}"
                                                                      MaxOpacity="1"
                                                                      MinOpacity="0"
                                                                      SpeedRatio="0"
                                                                      TargetElementName="Indicator" />
                </Telerik_Windows_Controls_Animation:AnimationSelector>
            </Setter.Value>
        </Setter>
        <Setter Property="OverlayStyle">
            <Setter.Value>
                <Style TargetType="{x:Type Rectangle}">
                    <Setter Property="Fill"
                            Value="#88FFFFFF" />
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:RadBusyIndicator}">
                    <Grid Background="{TemplateBinding Background}">
                        <ContentControl x:Name="Content"
                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                        Content="{TemplateBinding Content}"
                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        IsEnabled="False"
                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" IsTabStop="{TemplateBinding IsTabStop}"/>
                        <Rectangle x:Name="Overlay"
                                   Style="{TemplateBinding OverlayStyle}" />
                        <Border x:Name="Indicator"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="2"
                                HorizontalAlignment="Center"
                                MinWidth="180"
                                VerticalAlignment="Center"
                                Background="#FFBCBCBC"
                                BorderBrush="#FF254474"
                                SnapsToDevicePixels="True">
                            <StackPanel>
                                <telerik:RadProgressBar x:Name="ProgressBar"
                                                        IsIndeterminate="{TemplateBinding IsIndeterminate}"
                                                        Maximum="100"
                                                        Style="{TemplateBinding ProgressBarStyle}"
                                                        Value="{TemplateBinding ProgressValue}" />
                                <ContentPresenter ContentTemplate="{TemplateBinding BusyContentTemplate}"
                                                  Content="{TemplateBinding BusyContent}"
                                                  HorizontalAlignment="Center"
                                                  Margin="15,5,15,15"/>
                            </StackPanel>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsBusyIndicationVisible"
                                 Value="False">
                            <Setter Property="Visibility"
                                    TargetName="Indicator"
                                    Value="Collapsed" />
                            <Setter Property="Visibility"
                                    TargetName="Overlay"
                                    Value="Collapsed" />
                            <Setter Property="IsIndeterminate"
                                    TargetName="ProgressBar"
                                    Value="False" />
                            <Setter Property="IsEnabled"
                                    TargetName="Content"
                                    Value="True" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>