Underline Label in WPF, using styles - wpf

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.

Related

Dragablz Trapezoid Tab Background (WPF)

I'm using Dragablz and Mahapps and I want to be able to switch between modern Material Design type tabs and the trapezoid ones. I've created two TabablzControl styles I can switch between and have a CustomHeaderViewModel I can change too to adjust its appearance to fit the changing tab style. My header has a stack panel with a textblock and an icon. I can change the background colour of the SP but in the trapezoid mode I do not know how to change the trapezoid's background to match the colour theme chosen.
Here's my two styles:
<Style TargetType="{x:Type dragablz:TabablzControl}" x:Key="TabablzControlStyle">
<Setter Property="NewItemFactory" Value="{x:Static stUi:UINewItem.Factory}" />
<Setter Property="ItemsSource" Value="{Binding Items}" />
<Setter Property="ClosingItemCallback" Value="{Binding ClosingTabItemHandler}" />
<Setter Property="ShowDefaultCloseButton" Value="False" />
<Setter Property="AdjacentHeaderItemOffset" Value="-10" />
<Setter Property="ItemContainerStyle" Value="{StaticResource TrapezoidDragableTabItemStyle}" />
<Setter Property="HeaderMemberPath" Value="Header" />
<Setter Property="Background" Value="Red"/>
<Setter Property="InterTabController" Value="{StaticResource InterTabController}" />
<Setter Property="Margin" Value="0 8 0 0" />
</Style>
<Style TargetType="{x:Type dragablz:TabablzControl}" x:Key="ModernControlStyle">
<Setter Property="NewItemFactory" Value="{x:Static stUi:UINewItem.Factory}" />
<Setter Property="ItemsSource" Value="{Binding Items}" />
<Setter Property="ClosingItemCallback" Value="{Binding ClosingTabItemHandler}" />
<Setter Property="ShowDefaultCloseButton" Value="False" />
<Setter Property="AdjacentHeaderItemOffset" Value="0" />
<Setter Property="HeaderMemberPath" Value="Header" />
<Setter Property="InterTabController" Value="{StaticResource InterTabController}" />
<Setter Property="Margin" Value="0 8 0 0" />
</Style>
You can see the area around the stackpanel is lighter than the SP itself. How do I change the trapezoid colour?
Thanks, Steve
Well, I could not find an elegant way to do this so I added code to find the "Trapezoid" type in the Loaded() function of my custom header code:
var trap = TryFindParent<Trapezoid>(this);
if (null != trap)
{
trap.Background = Application.Current.Resources["AccentColorBrush1"] as SolidColorBrush;
}
TryFindParent from here : How can I find WPF controls by name or type?
It will do for me. Changing colour will typically only be done once and the setting saved.
Thanks
I think that you can create new style based on TrapezoidDragableTabItemStyle and override the Background property.
After that you must set this new style in ItemContainerStyle property of the TabablzControl.

How to select tabs with AvalonDock

I'm trying to select tabs (both in a LayoutDocumentPaneGroup and LayoutAnchorablePane) in AvalonDock. This seems like it should be an easy task, but I'm struggling to find any documentation on the subject. So far the best I've gotten is the ability to select the initial tab (see below), but this binding doesn't seem to persist when changing the bound property after the initial load.
<dock:DockingManager Name="DockingManager" Grid.Row="2"
AnchorablesSource="{Binding Anchorables}"
DocumentsSource="{Binding Documents}"
DocumentClosed="DockingManager_DocumentClosed"
DocumentClosing="DockingManager_DocumentClosing"
Loaded="DockingManager_Loaded"
MouseUp="DockingManager_MouseUp">
<dock:DockingManager.LayoutItemContainerStyle>
<Style TargetType="{x:Type dockctrl:LayoutItem}" >
<Setter Property="Title" Value="{Binding Model.Title}" />
<Setter Property="CloseCommand" Value="{Binding Model.CloseCommand}" />
<Setter Property="CanClose" Value="{Binding Model.CanClose}" />
<Setter Property="IsSelected" Value="False" />
<Style.Triggers>
<DataTrigger Binding="{Binding Model.Title}" Value="Resources">
<Setter Property="IsSelected" Value="True" />
</DataTrigger>
</Style.Triggers>
</Style>
</dock:DockingManager.LayoutItemContainerStyle>
<dock:LayoutRoot>
<dock:LayoutPanel Orientation="Horizontal">
<dock:LayoutAnchorablePaneGroup x:Name="leftAnchorableGroup" DockWidth="300" >
<dock:LayoutAnchorablePane />
</dock:LayoutAnchorablePaneGroup>
<dock:LayoutPanel Orientation="Vertical">
<dock:LayoutPanel Orientation="Horizontal">
<dock:LayoutDocumentPaneGroup x:Name="leftDocumentGroup">
<dock:LayoutDocumentPane />
</dock:LayoutDocumentPaneGroup>
</dock:LayoutPanel>
</dock:LayoutPanel>
</dock:LayoutPanel>
</dock:LayoutRoot>
</dock:DockingManager>
However if I replace these lines:
<Setter Property="IsSelected" Value="False" />
<Style.Triggers>
<DataTrigger Binding="{Binding Model.Title}" Value="Resources">
<Setter Property="IsSelected" Value="True" />
</DataTrigger>
</Style.Triggers>
with:
<Setter Property="IsSelected" Value="{Binding Model.ContentIsSelected" />
...it doesn't work when I change the value of ContentIsSelected. I can see (using Snoop) that the value of ContentIsSelected itself i in fact changing but IsSelected Does not change with it?!
I also found this other question (which lead me down the path of trying to use IsSelected): How to switch between document tabs in AvalonDock 2 However 'm not entirely sure how to programatically access the LayoutItems beyond the bindings in XAML. I tried the DockingManager.GetLayoutItemFromModel() function but could not get it to return anything other than NULL.
How can I select a tab and bring it into view/focus (as if I were clicking the tab with a mouse)?
The solution ended up being that the default binding was not as expected.
<Setter Property="IsSelected" Value="{Binding Model.ContentIsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

Problems with WPF ToolTipService properties (BetweenShowDelay, etc.) in Microsoft.Windows.Controls.Ribbon control

I have an very, very huge application in WPF with a Ribbon in it. The ribbon contain a bunch of RibbonControls, each binded to a different command. On every control, we put a ToolTip. We overrided these ToolTip templates to use a control of our own, which gives more information. We could call il a superToolTip.
The override of the tooltip templates is working just fine. Now we want to unify the way the tooltips are showing. What I mean is we want the same initialShowDelay, ShowDuration, etc., for every single tooltips in the application (there are tooltips elsewhere than in the ribbon, which use the same home made control that the ones of the ribbon). So, I binded the ToolTipService.InitialShowDelay, ToolTipService.BetweenShowDelay, ToolTipService.ShowDuration properties to global constants in the application.
InitialShowDelay :
The property InitialShowDelay is working just fine for almost every control in the application... The only one not working is RibbonSplitButton, which keep the default value of 400...
BetweenShowDelay :
The property BetweenShowDelay is working just fine when the tooltip is on a ListBoxItem... but not working in the Ribbon nor in a complex control of our own (a Property Grid).
These properties are set in the control on which the tooltip is set, and not on the tooltip themselves.
I honestly have absolutely no idead why it is behaving this way... Anyone has any idea on what could cause this or how to solve it?
If you need more information, do not hesitate to ask, i really am desperate about this.
Thank you very much!
The problem was that the condition for BetweenShowDelay wasn't respected, you need to have a value set for the property "ToolTip", in this case you were using a template, so the value was at null. You can resolve it this way :
<Style x:Key="{x:Type ToolTip}" TargetType="ToolTip">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Utils:ToolTipControl DataContext="{Binding ToolTipInfo}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and then place the dummy in the specified button :
<!-- RibbonButton -->
<Style TargetType="{x:Type ribbon:RibbonButton}" BasedOn="{StaticResource RibbonControlStyle}" >
<Style.Triggers>
<DataTrigger Value="true" >
<DataTrigger.Binding>
<Binding Converter="{StaticResource IsBoundConverter}" />
</DataTrigger.Binding>
<Setter Property="Command" Value="{Binding}" />
<Setter Property="ribbon:RibbonControlService.Label" Value="{Binding Name}" />
<Setter Property="ribbon:RibbonControlService.SmallImageSource" Value="{Binding Icon}" />
<Setter Property="ribbon:RibbonControlService.LargeImageSource" Value="{Binding LargeIcon}" />
<Setter Property="Visibility" Value="{Binding Visibility}" />
<Setter Property="ToolTip" Value="dummy"/> <!-- Use dummy value to force tooltip to show and to Bind the tooltip-->
</DataTrigger>
<DataTrigger Value="false" >
<DataTrigger.Binding>
<Binding Converter="{StaticResource IsBoundConverter}" />
</DataTrigger.Binding>
<Setter Property="Background" Value="#FF900000" />
</DataTrigger>
</Style.Triggers>
</Style>
That way the dummy value will be override.
:D
Here is some code showing how I implemented my ToolTips
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ribbon="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon"
...>
...
<!-- Ribbon Tooltips Style -->
<Style TargetType="ribbon:RibbonToolTip">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Utils:ToolTipControl DataContext="{Binding ToolTipInfo}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
...
<!-- RibbonControl -->
<Style x:Key="RibbonControlStyle">
<Setter Property="ribbon:RibbonControlService.ToolTipTitle" Value="dummy" /><!-- Use dummy value to force tooltip to show -->
<Setter Property="ToolTipService.InitialShowDelay" Value="{x:Static Utils:ToolTipViewModel.ToolTipInitialDelay}"/>
<Setter Property="ToolTipService.ShowDuration" Value="{x:Static Utils:ToolTipViewModel.ToolTipShowDuration}"/>
<Setter Property="ToolTipService.BetweenShowDelay" Value="{x:Static Utils:ToolTipViewModel.ToolTipBetweenShowDelay}"/>
<!-- This style is used to select the "Editors" tab when opening Editor without a world, and to select the "Home" tab otherwise -->
<Style.Triggers>
<DataTrigger Binding="{Binding IsWorldLoaded, Source={x:Static ViewModels:ViewportSettingsViewModel.Instance}}" Value="false">
<Setter Property="ribbon:Ribbon.SelectedIndex" Value="2"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsWorldLoaded, Source={x:Static ViewModels:ViewportSettingsViewModel.Instance}}" Value="true">
<Setter Property="ribbon:Ribbon.SelectedIndex" Value="0"/>
</DataTrigger>
</Style.Triggers>
</Style>
Also, for the splitbutton problem it was that the tooltipservice werent set for the child of the splitbutton ( the two parts) wich are named PART_HeaderButton and PART_ToggleButton. So even if you create your own style it will be override by the style of the ribbonsplit button ( see this link for the splitbutton.xaml file :
https://wpfcontrolextension.svn.codeplex.com/svn/trunk/Common/RibbonControlsLibrary/v3.5/Themes/Generic.xaml
So to bypass this overriding problem ( because we don't have access to the part directly we have to go via code. Im my case, I overrided the RibbonSplitButton class and the OnLoadTemplate method. That way with getchild we can access the property of the part and change them.
public partial class DuniaRibbonSplitButton : RibbonSplitButton
{
public DuniaRibbonSplitButton()
{
InitializeComponent();
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
var HeaderButton = base.GetTemplateChild("PART_HeaderButton");
var ToggleButton = base.GetTemplateChild("PART_ToggleButton");
OverrideAttributes(HeaderButton as Control);
OverrideAttributes(ToggleButton as Control);
}
private void OverrideAttributes(Control control)
{
control.ToolTip = "Dummy";
ToolTipService.SetInitialShowDelay(control, ToolTipViewModel.ToolTipInitialDelay);
ToolTipService.SetShowDuration(control, ToolTipViewModel.ToolTipShowDuration);
ToolTipService.SetBetweenShowDelay(control, ToolTipViewModel.ToolTipBetweenShowDelay);
}
}

Can I get this binding into 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.")

Why can't I add a DataTrigger to my control's Triggers collection?

Why cant I code like this
<Border Width="130" Height="70">
<Border.Triggers>
<DataTrigger Binding="{Binding Path=CurrentStatus}" Value="0">
<Setter Property="Style" Value="{StaticResource ResourceKey=ListBoxItemBorder}"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=CurrentStatus}" Value="200">
<Setter Property="Style" Value="{StaticResource ResourceKey=ListBoxItemBorderInactive}"/>
</DataTrigger>
</Border.Triggers>
</Border>
I get this error
Failed object initialization (ISupportInitialize.EndInit).
Triggers collection members must be of type EventTrigger.
Error at object '4_T' in markup file
What am I doing wrong plz help.
Abe is correct and explains the limitations well. One thing you might want to consider is:
Instead of having two border styles, and trying to pick between them based on a trigger...
Use a single style on your border, this style's setters represent your 'normal' look.
This style also contains your DataTrigger, and your DataTrigger has a collection of setters which essentially represents your second style (which have higher priority than the standard setters when this trigger evaluates to true!
Edit:
Something like this -
<Style TargetType="Border" x:Key="BorderStyle">
<!-- These setters are the same as your normal style when none of your triggers are true -->
<Setter Property="BorderBrush" Value="Black" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=CurrentStatus}" Value="0">
<!-- These setters are the same as your ListBoxItemBorder style -->
<Setter Property="BorderBrush" Value="Green" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=CurrentStatus}" Value="200">
<!-- These setters are the same as your ListBoxItemBorderInactive style -->
<Setter Property="BorderBrush" Value="Gray" />
</DataTrigger>
</Style.Triggers>
</Style>
Unfortunately, only EventTriggers can be applied directly to elements. If you want to use a Trigger or DataTrigger, they have to be in a Style, ControlTemplate, or DataTemplate.
From the resource names, it looks like this is a Border inside a ListBoxItem ControlTemplate. You could easily move the triggers into the template's triggers collection.
Here is a way for no limitations triggers.
Example:
<Border Width="130" Height="100" Grid.Row="1">
<ListBox x:Name="lstItems" ItemsSource="{Binding TestItems}">
</ListBox>
<tg:TriggerExtensions.Triggers>
<tg:TriggerCollections>
<tg:DataTriggerInfo Binding="{Binding CurrentStatus}" Value="0">
<tg:DataTriggerInfo.Setters>
<tg:SetterInfo ElementName="lstItems" Property="Style" Value="{StaticResource ListBoxRed}"/>
</tg:DataTriggerInfo.Setters>
</tg:DataTriggerInfo>
<tg:DataTriggerInfo Binding="{Binding CurrentStatus}" Value="0" IsInvert="True">
<tg:DataTriggerInfo.Setters>
<tg:SetterInfo ElementName="lstItems" Property="Style" Value="{StaticResource ListBoxBlue}"/>
</tg:DataTriggerInfo.Setters>
</tg:DataTriggerInfo>
</tg:TriggerCollections>
</tg:TriggerExtensions.Triggers>
</Border>
Link Sample
Link Component Github

Resources