WPF TextBlock Style Underline on Mouse Hover - c#

Simple question. Can the following WPF C# code cut down some weight? I mean, WTF, uh... I mean WPF, come one. Have you every seen CSS? I only want to underline the Text when I hover with the mouse just like a link. Do I really have to add 9 lines for that?
<TextBlock x:Name="Cassette_tblPrintLabel" Text="Print Label" Canvas.Left="154" Canvas.Top="215" Foreground="#FF3355FF" Cursor="Hand" MouseDown="Cassette_lblPrintLabel_MouseDown">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="TextBlock.TextDecoration" Value="Underline" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
Thanks in advance!

Add the style as resource; then at least you can re-use it. I think that's the best you can do.
<Application.Resources>
<Style TargetType="TextBlock" x:Key="HoverUnderlineStyle">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="TextBlock.TextDecorations" Value="Underline" />
</Trigger>
</Style.Triggers>
</Style>
</Application.Resources>
<TextBlock Style="{StaticResource HoverUnderlineStyle}" />

Related

XAML "The member `isChecked` is not recognized or accessable" error for a RadioButton style trigger

I have two RadioButtons that I'd like to change the text on based on their IsChecked state, but Visual Studio is telling me IsChecked and Content aren't recognized/accessable. The below code is the same for both buttons.
<RadioButton GroupName="{Binding CommunicatingGroupName}" IsChecked="{Binding IsCommunicating}" IsEnabled="{Binding IsActive}" FontSize="11" TextOptions.TextFormattingMode="Display" Content="ACTIVE" >
<RadioButton.Style>
<Style TargetType="{StaticResource ButtonBlue}">
<Style.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Content" Value="ACTIVE" />
</Trigger>
<Trigger Property="IsChecked" Value="false">
<Setter Property="Content" Value="STANDBY" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Content" Value="ACTIVE" />
</Trigger>
</Style.Triggers>
</Style>
</RadioButton.Style>
</RadioButton>
I have ToggleButtons elsewhere in the file that work with the same <Style.Triggers> elements, and as far as I know should work the same way for these RadioButtons. Am I missing something specific to RadioButtons? I've rebuilt, restarted VS, etc. and the errors persist.
Look at this line:
<Style TargetType="{StaticResource ButtonBlue}">
You set target type to something that looks like style. Probably you tried to write something like this:
<Style TargetType="{x:Type RadioButton}" BasedOn="{StaticResource ButtonBlue}">

How to make DataTrigger with Style using WPF? [duplicate]

Here is a simple XAML with trigger that should change ToggleButton content when it is checked. But for some reason it doesn't work. I have a silly feeling that I missed something extra small. Appreciate your help
<ToggleButton Content="<">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value=">" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
You must move Content="<" from ToggleButton to setter of Style.
Example:
<ToggleButton>
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="Content" Value="<" />
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value=">" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
Because local value has higher precedence order over Style setters and triggers:
Property system coercion.
Active animations, or animations with a Hold behavior.
3. Local value.
TemplatedParent template properties.
Implicit style.
6. Style triggers.
Template triggers.
8. Style setters.
...
For more information, please see:
MSDN: Dependency Property Value Precedence
You are overriding the Content set by the Trigger by setting the Content attribute at the control level. You want to set it using a Setter within the Style instead:
<ToggleButton>
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="Content" Value="<" />
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value=">" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>

how i can color the textblock while mouse over

i have a style that will make the textblock on mouse over underligned can we change the forecolor on mouse over of this textblock using WPF or i will need to change it programmatically ? here the style that i have
<TextBlock Text="Hurrah">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="TextDecorations" Value="Underline" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
Just add following line in your trigger
<Setter Property="Foreground" Value="CadetBlue"/>

ToggleButton Style only works on last ToggleButton

I'm trying to customize my ToggleButtons so that when checked they say 'Yes' in green and when not checked, say 'No' in red.
I've created the following style which is sitting in my Styles resource dictionary.
<!-- ToggleButtons -->
<Style x:Key="YesNoToggleStyle" TargetType="ToggleButton">
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="SpringGreen" />
<Setter Property="Content">
<Setter.Value>
<TextBlock Text="Yes"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Background" Value="Crimson" />
<Setter Property="Content">
<Setter.Value>
<TextBlock Text="No"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
This works ... sort of. If the ToggleButton is the last one of either value, then it displays correctly. All previous buttons with the same value are blank. The height was also shrinking, but I fixed that with the 'Height' Setter above the triggers. To illustrate, when a new record is being created it looks like:
and after I've clicked buttons 1, 2, and 3 and 1 again:
I originally had the style referenced from the surrounding grid:
<Grid>
...
<Grid.Resources>
<Style BasedOn="{StaticResource YesNoToggleStyle}" TargetType="{x:Type ToggleButton}" />
</Grid.Resources>
But changing that so each ToggleButton references the style individually (<ToggleButton Style="{StaticResource YesNoToggleStyle}" ... />) hasn't made a difference.
I looked at Customizing the toggle state of a toggle button in wpf, and Override ToggleButton Style where the effect is the same, but they talk about external images, and my issues is all within wpf.
I also looked at the second answer to: i want to change backcolor of toggle button when toggle button ischecked and viceversa in WPF but a) I only have the blend + sketchflow preview that comes with VS2012, and b) i'm a total noob with blend and can't get from Select the "Checked State" to Reset the Background Color instruction in the answer (plus i'd be surprised if this task requires the blend tool).
Can anyone show me what to do to get multiple ToggleButtons to use the same style properly?
This works for me. Somewhere in Dictionary1.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="YesNoToggleStyle" TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource {x:Static ToolBar.ToggleButtonStyleKey}}">
<Style.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Background" Value="Crimson" />
<Setter Property="Content" Value="No"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="SpringGreen" />
<Setter Property="Content" Value="Yes"/>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
Note, that style is based on ToolBar.ToggleButtonStyle.
<Grid>
<Grid.Resources>
<ResourceDictionary Source="pack://application:,,,/Dictionary1.xaml"/>
</Grid.Resources>
<ItemsControl ItemContainerStyle="{StaticResource YesNoToggleStyle}">
<ToggleButton />
<ToggleButton />
<ToggleButton />
</ItemsControl>
</Grid>
try to replace Content property to ContentTemplate:
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="Yes"/>
</DataTemplate>
</Setter.Value>
</Setter>
In my case I wanted to have a "Locked" ToggleButton in a common dll defined and reused across my Apps.
Here's my result, which worked for me. Maybe someone find it useful (put this in a Resourcedictionary.xaml):
<BitmapImage x:Key="LockedLock"
UriSource="/...;component/Resources/Lock_closed_16p.png" />
<BitmapImage x:Key="OpenLock"
UriSource="/...;component/Resources/Lock_open_16p.png" />
<Style x:Key="LockButton"
TargetType="ToggleButton">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Image Source="{DynamicResource OpenLock }"
Width="12"
Height="12"
Name="contentimage" />
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ToggleButton , AncestorLevel=1, Mode=FindAncestor }, Path=IsChecked}"
Value="True">
<Setter Property="Image.Source"
TargetName="contentimage"
Value="{DynamicResource LockedLock }" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Credits to:
Setting Button's Content to <Image> via Styles
Setter Target Name not recognized

Change a button's content in a style?

I'm trying to do something similar to this:
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Button>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Content"
Value="No mouse over" />
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Content">
<Setter.Value>
<CheckBox Content="Mouse is over" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Grid>
</Window>
However, I get a run-time XamlParseException with a message of:
Cannot add content of type
'System.Windows.Controls.CheckBox' to
an object of type 'System.Object'.
Error at object
'System.Windows.Controls.CheckBox
I'm actually trying to draw different icons for the button's content depending on external conditions. So I'm actually trying to use a DataTrigger, but the example above simplifies the problem. Any ideas?
The actual error is occurring because Visuals can not be directly set as a Setter value.
You can get the behavior you are looking for though, by setting the ContentTemplate using a DataTemplate, or by creating your content as a resource, either specific to the button or located elsewhere.
<Button>
<Button.Resources>
<CheckBox x:Key="Local_MouseOverContent" Content="Mouse is over" />
</Button.Resources>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Content" Value="No mouse over" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Content"
Value="{StaticResource Local_MouseOverContent}" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Content" Value="No mouse over" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate DataType="Button">
<CheckBox Content="Mouse is over" />
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
REMARK! Exactly your example works in .NET Framework 4 without any Changes !!!!
<Button>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Content"
Value="No mouse over" />
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Content">
<Setter.Value>
<CheckBox Content="Mouse is over" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
If you are making a generic style to be used by buttons all around your app, you will get visual tree conflicts using the approach where the image is a resource. So the template is your only choice in that case.
WARNING: This may not be the best or correct way to do it. Make sure you read the other answers on this page as well.
Pretty sure you'd want to use a control template in this sort of situation. Something like:
<style>
<Setter Property="Content">
<Setter.Value>
<ControlTemplate>
<Image Img="something.jpg" />
</ControlTemplate>
</Setter.Value>
</Setter>
</style>
And add a control template in the trigger for the on-hover.
Here's a good link

Categories