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.
I am using the DataGrid2D posted here. I can't seem to figure out a way to align the Text inside the Cells (i.e. right, center, left). For the default WPF4 DataGrid I just set
<Style x:Key="GridTextColumnStyleLeftAligned" TargetType="TextBlock">
<Setter Property="TextAlignment" Value="Left" />
<Setter Property="Margin" Value="2" />
<Setter Property="TextWrapping" Value="WrapWithOverflow" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
Here TextAlignment does the trick. But when using the ItemsSource2D Property to bind it to a 2-dimensional Array this does not work anymore.
Does anybody have a suggestion?
I found the problem: I am using the Alternative Style which the DataGrid2D Provides. There we already have this definiton:
<Style x:Key="DataGridCellStyle" TargetType="{x:Type DataGridCell}" >
<Setter Property="TextBlock.TextAlignment" Value="Center" />
...
If I change it here it works. I will have to rewrite the class a bit, for me to set the Alignment in XAML instead of with a style.
I would like to take the xaml I currently have for a ComboBox (below), and condense it into something like the Style also shown below. I think this should work, but I have a 'Type'ing issue and not sure how to resolve it
"Cannot resolve the Style Property 'Margin'. Verify that the owning type is the Style's TargetType, or use Class.Property syntax to specify the Property.)
As I look at the existing ComboBoxStyle (also below) that I'm looking to base this new style off of, I see that I hadn't used x:Type, but it does seem to work.
Is there any reason this new style shouldn't work? What must I change?
Cheers,
Berryl
combo box, as is, working):
<ComboBox
x:Name="cboDepartmentFilter" Style="{StaticResource ComboBoxStyle}"
Margin="{StaticResource FliterPanelItem_Margin}" Width="{StaticResource FilterPanelItem_Width}"
ItemsSource="{Binding Path=DepartmentFilterControl.Choices}"
ToolTip="{Binding DepartmentFilterControlData.ToolTipTitle}"
/>
what I want:
<ComboBox Style="{StaticResource FilterPanelComboBoxStyle}" DataContext="{Binding DepartmentFilterControl}" />
<!- in some resource file ->
<Style x:Key="FilterPanelComboBoxStyle" BasedOn="{StaticResource ComboBoxStyle}">
<Setter Property="Margin" Value="{StaticResource FliterPanelItem_Margin}" />
<Setter Property="Width" Value="{StaticResource FilterPanelItem_Width}" />
<Setter Property="ItemsSource" Value="{Binding Choices}" />
<Setter Property="ToolTip" Value="{Binding ToolTipTitle}" />
</Style>
<!--
This style defines a common margin for items in a filter panel.
-->
150
existing ComboBoxStyle:
<!-- ComboBox Style -->
<Style x:Key="ComboBoxStyle" TargetType="ComboBox">
<Setter Property="Background" Value="{StaticResource headerBrush}" />
...
<Setter Property="Template">
<Setter.Value>
...
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle" Value="{StaticResource ComboBoxItemStyle}" />
<Setter Property="IsSynchronizedWithCurrentItem" Value="True" />
</Style>
You still need to specify the TargetType in the derived style. (Or you prefix the properties with "ComboBox.")
I've got a Style specified for Paragraph as part of my FlowDocumentReader's Resources section:
<FlowDocumentReader>
<FlowDocumentReader.Resources>
<Style x:Key="myStyle" TargetType="{x:Type Paragraph}">
<Setter Property="Foreground" Value="LightSteelBlue" />
<Setter Property="BorderBrush" Value="LightSteelBlue" />
<Setter Property="BorderThickness" Value="1.0" />
<Setter Property="FontStyle" Value="Italic" />
<Setter Property="FontSize" Value="{Binding Path=MyFontSize}" />
</Style>
</FlowDocumentReader.Resources>
</FlowDocumentReader>
I've got a .xaml file which contains my FlowDocument and it has some Paragraphs which are defined as so:
<Paragraph Style='{DynamicResource myStyle}">
Stuff here
</Paragraph>
The problem that I have is that Foreground doesn't apply to the text (it shows as Black rather than LightSteelBlue) and the FontSize does not change when the MyFontSize property is modified.
I've checked the property value in the code behind and it is set but it doesn't result in a change in the UI.
This seems to only be an issue with the FlowDocument if it is loaded into the FlowDocumentReader at runtime. If the XAML is explicitly placed inside the FlowDocumentReader in the .xaml file, the Foreground is the correct color and the FontSize changes based on the property setting.
Ideas?
Solved:
As I wrote in my answer below, by moving the Style block into the Resources section of the FlowDocument itself resolves the issue.
Have you tried setting foreground for your paragraph directly? it must be a different propety/attached property which manages contents foreground.
Well, I solved this problem by moving the Style blocks out of the FlowDocumentReader Resources and into the Resources section of the FlowDocument itself. The resulting FlowDocument looks something like so:
<FlowDocument>
<FlowDocument.Resources>
<Style x:Key="myStyle" TargetType="{x:Type Paragraph}">
<Setter Property="Foreground" Value="LightSteelBlue" />
<Setter Property="BorderBrush" Value="LightSteelBlue" />
<Setter Property="BorderThickness" Value="1.0" />
<Setter Property="FontStyle" Value="Italic" />
<Setter Property="FontSize" Value="{Binding Path=MyFontSize}" />
</Style>
</FlowDocument.Resources>
<Paragraph Style="{DynamicResource myStyle}">
Stuff here
</Paragraph>
</FlowDocument>
I have the following style:
<Style x:Key="ActionLabelStyle" TargetType="{x:Type Label}">
<Setter Property="Margin" Value="10,3" />
<Setter Property="Padding" Value="0" />
<Setter Property="TextBlock.TextWrapping" Value="Wrap" />
<Setter Property="FontFamily" Value="Calibri" />
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsEnabled" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="Red" />
<Setter Property="TextBlock.TextDecorations" Value="Underline" />
</MultiTrigger>
</Style.Triggers>
</Style>
So basically, I want to have a label which is underlined when it is enabled and the mouse cursor is over it. The part of this style which is not working is the <Setter Property="TextBlock.TextDecorations" Value="Underline" />. Now, what am I doing wrong here? Thanks for all the help.
This is actually much more difficult than it appears. In WPF, a Label is not a TextBlock. It derives from ContentControl and can therefore host other, non-text controls in its Content collection.
However, you can specify a string as the content as in the example below. Internally, a TextBlock will be constructed to host the text for you.
<Label Content="Test!"/>
This internally translates to:
<Label>
<Label.Content>
<TextBlock>
Test!
</TextBlock>
</Label.Content>
</Label>
The simple solution to this would be for the TextDecorations property of a TextBlock to be an attached property. For example, FontSize is designed this way, so the following works:
<Label TextBlock.FontSize="24">
<Label.Content>
<TextBlock>
Test!
</TextBlock>
</Label.Content>
</Label>
The TextBlock.FontSize attached property can be applied anywhere in the visual tree and will override the default value for that property on any TextBlock descendant in the tree. However, the TextDecorations property is not designed this way.
This leaves you with at least a few options.
Use color, border, cursor, etc., instead of underlined text because this is 100% easier to implement.
Change the way you are doing this to apply the Style to the TextBlock instead.
Go to the trouble to create your own attached property and the control template to respect it.
Do something like the following to nest the style for TextBlocks that appear as children of your style:
FYI, this is the ugliest thing I've done in WPF so far, but it works!
<Style x:Key="ActionLabelStyle" TargetType="{x:Type Label}">
<Setter Property="Margin" Value="10,3" />
<Setter Property="Padding" Value="0" />
<Setter Property="TextBlock.TextWrapping" Value="Wrap" />
<Setter Property="FontFamily" Value="Calibri" />
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsEnabled" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="Red" />
</MultiTrigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="TextBlock">
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Label}, Path=IsMouseOver}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsEnabled}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="TextDecorations" Value="Underline"/>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Style.Resources>
</Style>
This works because it is overriding the default style of any TextBlock beneath a Label of this style. It then uses a MultiDataTrigger to allow relative binding back up to the Label to check if its IsMouseOver property is True. Yuck.
Edit:
Note that this only works if you explicitly create the TextBlock. I was incorrect when I posted this because I had already dirtied up my test Label. Boo. Thanks, Anvaka, for pointing this out.
<Label Style="{StaticResource ActionLabelStyle}">
<TextBlock>Test!</TextBlock>
</Label>
This works, but if you have to go to this trouble, you're just working too hard. Either someone will post something more clever, or as you said, my option 1 is looking pretty good right now.
Further to Jerry's answer, in order to avoid having to add the TextBlock into the template each time you can let the style do this too by adding the Setter property into the style:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Label}">
<TextBlock>
<ContentPresenter />
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
Then your Label is back to:
<Label Content="Test!" Style="{StaticResource ActionLabelStyle}" />
Thanks Jerry!
Andrew.
I think the issue is that TextBlock.TextDecorations is not defined on Label.
You can use this approach if you're happy to use a TextBlock rather than a Label.
Just to add my workaround to the mix. I am currently using C# code and it works well enough. I just trap the MouseLeave and MouseEnter events and show the underline there.
void Control_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
{
WPFHelper.EnumerateChildren<TextBlock>(this, true).ForEach(c => c.TextDecorations = null);
}
void Control_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{
WPFHelper.EnumerateChildren<TextBlock>(this, true).ForEach(c => c.TextDecorations = TextDecorations.Underline);
}
The WPFHelper class simply enumerates all the children of an DependencyObject and ForEach is an extension method that just does executes the action inside the lambda expression for each item.
An old question, but since I just fought with this, heres my method. Though it just uses a Trigger as opposed to a MultiTrigger
For XAML:
<Label Content="This text is for testing purposes only.">
<Style TargetType="{x:Type ContentPresenter}">
<Style.Resources>
<Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource {x:Type TextBlock}}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="TextDecorations" Value="Underline" />
</Trigger>
</Style.Triggers>
</Style>
</Style.Resources>
</Style>
</Label>
For C# Codebehind:
public override void OnApplyTemplate()
{
if( !hasInitialized )
{
var tbUnderStyle = new Style( typeof(TextBlock), (Style)FindResource(typeof(TextBlock)) );
var tbUnderSetter = new Setter( TextBlock.TextDecorationsProperty, TextDecorations.Underline );
var tbUnderTrigger = new Trigger() { Property = Label.IsMouseOverProperty, Value = true };
tbUnderTrigger.Setters.Add( tbUnderSetter );
var contentPresenter = FindVisualChild<ContentPresenter>( this );
contentPresenter.Resources.Add( typeof(TextBlock), tbUnderStyle );
hasInitialized = true;
}
}
hasInitialized being a bool that is set to false in the constructor, and FindVisualChild sourced from here.