I use Telerik WPF controls and need to add a NumericUpDown control to my UI. The thing is when used "as it is" it doesn't fit the rest of the application visually
<TL;DR>
This is a bigger application, that's not been written fully by me. Other people somehow managed to "import" other telerik controls and assign them other styles. Sadly, nobody's used the UpDown control before.
</>
I added the control to my UI:
<telerik:RadNumericUpDown
Minimum="0"
Maximum="10"
SmallChange="1"
NumberDecimalDigits="0"
IsInteger="True"
Value="{Binding Path=Counter}" />
Also, I've added some styling to a ResourceDictionary:
<Style TargetType="{x:Type telerikInput:RadNumericUpDown}">
<Setter Property="Padding" Value="1"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="Border.CornerRadius" Value="2" />
<Setter Property="Border.Background" Value="{StaticResource ControlBackgroundBrush}" />
<Setter Property="Border.BorderBrush" Value="{StaticResource SolidBorderBrush}" />
<Setter Property="Border.BorderThickness" Value="1" />
</Style>
And this handles some basic styling features (border, margin, etc). In general it looks "good enough". There's only one problem - when a mouse pointer hovers over the control, it becomes shiny and glossy. That's not like my other controls behave - is there an easy way to remove this effect ?
I've tried experimenting with Triggers:
<Style>
...
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Red" />
<Setter Property="Border.BorderBrush" Value="Black" />
...
</Style.Triggers>
</Style>
But this didn't do much. I've also tried setting IncreaseButtonContentTemplate field, but this turned out no good either.
You need to modify the default ControlTemplates and remove any "shiny and glossy" effects from them. The easiest way to do this would be to copy the default templates from the Themes.Implicit folder in your Telerik installation directory into your solution and then edit them as per your requirements.
There is no "DisableEffects" property that you can simply set on the control I am afraid.
Related
I've declared the below style. How can I override the style foreground color dynamically in my vb.net?
<Style x:Key="LabelWinner" TargetType="{x:Type Label}">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Color="#FF000000" ShadowDepth="6" />
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#FFFF0000"/>
</Style>
As mentioned in the comment #nit, In WPF have a powerful system behavior properties in the form of Style.Triggers.
Earlier, in WinForms to change a specific property, we had to do it through the code that was not quite comfortable and practical. The developers of WPF decided to separate the visual logic related to the appearance of the program, and business logic, which contains the desired behavior of the program. Actually, it was a Style.
To set the Style trigger, you need to select the appropriate properties. The trigger is as follows:
<Trigger Property="SomeProperty" Value="SomeValue">
... Some actions by way of setters...
</Trigger>
For example, we want to see, when you hover the mouse cursor changes Foreground color and FontSize. Then we choose the property IsMouseOver, and then write a Trigger:
<Style x:Key="LabelWinner" TargetType="{x:Type Label}">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Color="#FF000000" ShadowDepth="6" />
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Green" />
<Setter Property="FontSize" Value="14" />
</Trigger>
</Style.Triggers>
</Style>
It should be remembered, that in WPF have a list of value precedence (MSDN), that the local value of a higher priority than the trigger style. Therefore, if you value for property of Label will be set locally, the trigger will not be able to change it, for example:
<Label Foreground="Red" ... /> <!-- Trigger don't change foreground -->
If the standard property are missing, or the need to implement your scenario, then it have the attached dependency property (MSDN). Inside it, you can set any condition, for example to start the animation and the trigger in the style it will work.
Example of trigger with attached dependency property:
<Trigger Property="local:YourClass.MyProperty" Value="True">
<Setter TargetName="SaveButton" Property="Background" Value="AliceBlue" />
</Trigger>
I have this named style
<Style x:Key="validationSupport" TargetType="{x:Type Control}">
<Setter Property="Margin" Value="5,2,14,2" />
...OMISSIS...
<Style.Triggers>
...OMISSIS...
<DataTrigger Binding="{Binding DataContext.ActiveWorkspace.Editable, RelativeSource={RelativeSource AncestorType=Window}}" Value="False">
<Setter Property="IsEnabled" Value="False" />
</DataTrigger>
</Style.Triggers>
</Style>
I use it extensively for TextBoxes, ComboBoxes, DatePickers etc, so I used as TargetType a super class for all these elements, Control.
Now I would like to differentiate the setter inside the dataTrigger using specific properties that 'Control' doesn't have. It seems I have to create different styles with different names,each for every targetType I want to differentiate, but that way I have to change the style name inside all elements which use it. Is there a smarter way to achieve that goal ? I don't want want to go and modify every xaml file I have.
Update after first answer
I have tried to put the following setters inside the datatrigger:
<Setter Property="Background" Value="#FFECECF8" />
<Setter Property="CheckBox.IsEnabled" Value="False" />
<Setter Property="DatePicker.IsEnabled" Value="False" />
<Setter Property="ComboBox.IsEnabled" Value="False" />
<Setter Property="TextBox.IsReadOnly" Value="True" />
Unfortunately the tests gave odd results. The IsEnabled property is set for TextBoxes too despite the prefix should limit its application to CheckBoxes, DatePickers and ComboBoxes.
My final need was to make some control contents unchangeable avoiding the difficult to read colors associated with disabled controls. From previous researches I understood that changing the colors for a 'disabled' control is not an easy task and involves the redefinition of the control template. So I thought to apply a combination of IsReadOnly and Background, but it is not applicable for the above problem. In fact CheckBoxes, DatePickers and ComboBoxes can only be made unchangeable using the IsEnabled property.
Am I missing something ?
There is a way, but I have to warn you - this is far from best-practice and should be avoided
WPF allows you to use desired type as a prefix for the property. That way, if you apply the style to a control that doesn't inherit from the prefixed type - the setter is ignored.
<Style x:Key="validationSupport" TargetType="{x:Type Control}">
<Setter Property="Margin" Value="5,2,14,2" />
...OMISSIS...
<Style.Triggers>
...OMISSIS...
<DataTrigger Binding="{Binding DataContext.ActiveWorkspace.Editable, RelativeSource={RelativeSource AncestorType=Window}}" Value="False">
<Setter Property="IsEnabled" Value="False" />
<Setter Property="Button.Background" Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
[Test this extensively, since I suspect that it might create memory leaks.]
I have a textbox that has the following simple XAML (not necessary to read it - just have it for reference):
<TextBox Name="m_ctrlUserDeviceType" Style="{StaticResource textStyleTextBox}" Text="{Binding Source={x:Static api:MySettings.Instance}, Path=UserDeviceType, ValidatesOnExceptions=true, NotifyOnValidationError=true}" Validation.Error="TextBox_Error" MinHeight="25" Margin="4" VerticalAlignment="Top" MaxLength="23" VerticalContentAlignment="Center" HorizontalAlignment="Left" MinWidth="100"></TextBox>
For completeness, the style textStyleTextBox looks like this (again, not necessary to read to answer question):
<Style x:Key="textStyleTextBox" TargetType="TextBox">
<Setter Property="Foreground" Value="#333333" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="MinHeight" Value="2" />
<Setter Property="MinWidth" Value="100" />
<Setter Property="Margin" Value="4" />
<Setter Property="MaxLength" Value="23" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Left" />
<!-- <Setter Property="Binding Source" Value="{x:Static api:MySettings.Instance}"/>
<Setter Property="Binding ValidatesOnExceptions" Value="true" />
<Setter Property="Binding NotifyOnValidationError" Value="true" /> -->
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self},
Path=(Validation.Errors)[0].ErrorContent}" />
</Trigger>
</Style.Triggers>
</Style>
I have a lot of the stuff (MiHeight, Margin, etc.)in the style because I have a lot of these textboxes and they're almost exactly the same. In fact, there's a lot more in common than just the style. The details of the binding to the class MySettings are almost the same. The only difference is which particular property the textbox is binding too. Additionally, I always user TextBox_Error for Validation.Error.
Is there a way to put the binding info in Style or Data Template so I don't have to keep typing it for each textbox?
I would need to be able to assign an individual property (Path) for each textbox, and I suppose I still need the ability to not use any of it for some particular textbox added in the future (that has nothing to do with databinding to MySettings).
Is there a way to put the TextBox_Error part inside of style or DataTemplate? Using Setter Property did not seem to work for me.
I keep mentioning Data Template as I think the answer might have something to do with that based on reading Pro Silverlight 2 in C# 2008. However, I wasn't able to figure it out. I also tried adding stuff to "Style" as you can see from the commented out stuff in that section.
Thanks,
Dave
I dont think that there is a way to do what you are asking. However, I do think that you could go about it a different way.
What I would look into, is creating a custom control that extends TextBox, then create some dependency properties that, when the control is initialised, setup the bindings and error validation.
This way you can use your custom textbox all over your app and control every property, and even style them the same (just change the target type of your style)
HTH
I am trying to make the column header of my WPF Datagrid to be transparent.
I am able to set it to a color without problem, but I can't have it transparent. Here is what I tried:
<Style x:Key="DatagridColumnHeaderStyle" TargetType="{x:Type tk:DataGridColumnHeader}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="#C2C4C6" />
</Style>
<Style x:Key="DashboardGridStyle" TargetType="{x:Type tk:DataGrid}">
<Setter Property="ColumnHeaderStyle" Value="{StaticResource DatagridColumnHeaderStyle}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="RowBackground" Value="Transparent" />
</Style>
<tk:DataGrid Style="{StaticResource DashboardGridStyle}" >
...
</tk:DataGrid>
With this code, it seems to take the default brush.
What am I missing?
I used Snoop to take a look at what was happening. It seems that another DataGridColumnHeader is always created behind the one you can modify, and it's not affected by changes on styles. When you set a transparent background, in fact is being correctly applied, so what you see is that ghost header behind (which has the usual grey background).
If you apply a coloured background and play with Opacity, you will see how the two colours are mixed. I don't know if this can be solved.
With the answer from Natxo (thanks!), I was able to find a solution. And it is a simple one too!
Knowing that there was another DataGridColumnHeader behind the one we can modify through the ColumnHeaderStyle, I just had to set a style that will affect all DataGridColumnHeader:
<Style TargetType="{x:Type tk:DataGridColumnHeader}">
<Setter Property="Background" Value="Transparent" />
</Style>
I have a requirement to change the background colour of the active control (to make it easier to identify where the cursor is).
I've tried using a style with a trigger on the IsFocused property but I'm not having any luck at all; it doesn't seem to fire.
A XAML solution is most preferred.
I kept playing and this seems to work well :)
<Style TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="TextBox.Background" Value="Gray" />
</Trigger>
</Style.Triggers>
</Style>