My textbox :
<TextBox Grid.Column="1" TextWrapping="Wrap" Height="50">
<TextBox.Style>
<Style TargetType="TextBox">
<Setter Property="Foreground" Value="DarkGray"/>
<Setter Property="Text" Value="Must be seperated with coma"/>
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="Text" Value="{x:Null}"/>
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
The problem is : when I put my mouse on the textbox, the foreground change in red, that's cool but the text doesn't clear up. Have you any idea of why ?
Thanks a lot !
Related
I have created a customized textbox which have a property SelfPropertyInfo. This again have some other property which we use(like IsValid, Description etc). I am trying to add style on text box so that if if IsValid is false it should show a tooltip(which contains Description).
<Style TargetType="{x:Type ToolTip}">
<Setter Property = "Foreground" Value=" Red "/>
</Style>
<Style TargetType="{x:Type CustomControls:TextBox}">
<Setter Property="Height" Value="22"/>
<Setter Property="Margin" Value="2,2,2,2"/>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="DarkGray" />
</Trigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=SelfPropertyInfo.IsValid}" Value="False">
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=SelfPropertyInfo.RuleDescription}" >
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
By above code everything is working fine, but the issue is that the tooltip is not in "Red" color. :(
Can anybody suggest?
I tried another approach and the foreground is now "Red", but I need help about how TO bind description with tootip's text. Please see the changes inside DataTrigger, :
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=SelfPropertyInfo.IsValid}" Value="False">
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="ToolTip">
<Setter.Value>
<ToolTip >
<TextBlock Foreground="Red" Text="Hello"/>
</ToolTip>
</Setter.Value>
</Setter>
</DataTrigger>
Thanks in advance for any help.
I also tried below code, but it makes tooltip blank:
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=SelfPropertyInfo.IsValid}" Value="False">
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="ToolTip">
<Setter.Value>
<ToolTip >
<TextBlock Foreground="Red" Text="{Binding RelativeSource={RelativeSource Self}, Path=SelfPropertyInfo.RuleDescription}"/>
</ToolTip>
</Setter.Value>
</Setter>
In the DataTrigger, "Text" property of TextBlock used to set Foreground for tooltip is overriding the Tooltip's text value, thats why you're unable to see the description. So bind the "Text" property with SelfPropertyInfo.RuleDescription.
I tried out using normal property it worked fine for me
private string testString;
public string TestString
{
get { return testString; }
set
{
testString = value;
RaisePropertyChanged("TestString");
}
}
<TextBox Height="100" Text="{Binding TestString}">
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Style.Triggers>
<DataTrigger Binding="{Binding TestString}" Value="False">
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="ToolTip">
<Setter.Value>
<ToolTip >
<TextBlock Foreground="Red" Text="{Binding TestString}"/>
</ToolTip>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
I have a WPF label and want to change its look on mouse over or hover.
This question shows how to do it with TextBlock and not quite what I want using a trigger to set a textblock foreground on mouseover.
It's different because with Label, changing foreground did not work.
Using the example from the question that you linked from, but changing the word TextBlock to Label works just fine for changing the Foreground, so you'll have to provide more information if you really can't get it to work. Try this:
<Label Content="My colour changes just fine" HorizontalContentAlignment="Center"
VerticalContentAlignment="Center">
<Label.Style>
<Style TargetType="Label">
<Setter Property="Foreground" Value="Blue" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
Note that if you set the Foreground on the actual Label element, as you did in your answer, instead of in the Style then that would stop the Trigger from working, so don't do this:
<Label Content="My colour changes just fine" HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" Foreground="Black">
<Label.Style>
<Style TargetType="Label">
<Setter Property="Foreground" Value="Blue" /> <!-- This won't work -->
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Red" /> <!--This won't work-->
</Trigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
Here is how you can do it. Ignore other properties, focus on Label.Style.
Using a Label allows you to align text as I showed below. That does not work with TextBlock.
<Label Content="Hover over me" Name="lblSeasons" FontWeight="Bold" Foreground="DarkBlue" Width="150" HorizontalContentAlignment="Center" Height="50"
VerticalContentAlignment="Center" >
<Label.Style>
<Style TargetType="Label">
<Setter Property="Foreground" Value="Green"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Green"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="Aqua"/>
</Trigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
I am trying to style my WPF TabControl. I basically want to get the tab control to have a transparent background, with a white border and text. I want the selected tab to have a White Background and Transparent Text (or any colour text!). Essentially a 2 colour tab.
However, I cannot override the selected tab appearance - this shows as white. And my child textboxes are taking the style of the TabItem font. Note, in the screen shot my labels have their own style set so do not take the TabItem font.
I have the following XAML in place to do this. Ideally I want to create the styles so that I can reuse across the application.
Resource Dictionary
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008">
<Style x:Key="Tabs" TargetType="TabControl">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="White"/>
</Style>
<Style x:Key="TabItemStyle" TargetType="TabItem">
<Setter Property="Foreground" Value="White" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="FontSize" Value="16" />
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="Background" Value="White"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="False">
<Setter Property="Foreground" Value="LightGray"/>
<Setter Property="Background" Value="Transparent"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
Then the XAML MarkUp
<TabControl Style="{StaticResource Tabs}">
<TabItem Header="General" Style="{StaticResource TabItemStyle}">...</TabItem>
<TabItem Header="Details" Style="{StaticResource TabItemStyle}">...</TabItem>
<TabItem Header="Info" Style="{StaticResource TabItemStyle}">...</TabItem>
<TabItem Header="More Stuff..." Style="{StaticResource TabItemStyle}">...</TabItem>
</TabControl>
How can I style my tabs to be and prevent the children from sizing?
Your DataTriggers don't work. To fix it change RelatveSource to Self
Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Self}}"
However I would suggest to change them to Triggers like so:
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="Background" Value="White"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Foreground" Value="LightGray"/>
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</Style.Triggers>
You should create control template for TabItem.
This sample change TabItem background to Transparent and Text color to White.
You can use own color schema.
<Window.Resources>
<Style TargetType="TabControl">
<Setter Property="Background"
Value="Transparent" />
<Setter Property="BorderBrush"
Value="White" />
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border"
Margin="0,0,-4,0"
Background="{x:Static Brushes.White}"
BorderBrush="{x:Static Brushes.White}"
BorderThickness="1,1,1,1"
CornerRadius="2,12,0,0">
<ContentPresenter x:Name="ContentSite"
Margin="12,2,12,2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ContentSource="Header"
RecognizesAccessKey="True" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="Panel.ZIndex"
Value="100" />
<Setter TargetName="Border"
Property="Background"
Value="{x:Static Brushes.Transparent}" />
<Setter TargetName="Border"
Property="BorderThickness"
Value="1,1,1,0" />
<Setter Property="TextBlock.Foreground"
Value="White" />
<!--<Setter Property="TextBlock.Foreground"
Value="Transparent" />-->
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter TargetName="Border"
Property="Background"
Value="{x:Static Brushes.White}" />
<Setter TargetName="Border"
Property="BorderBrush"
Value="{x:Static Brushes.White}" />
<Setter Property="Foreground"
Value="{x:Static Brushes.White}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="SkyBlue">
<TabControl Margin="20">
<TabItem Header="TabItem #1">
<TextBox>Tab Item #1 content</TextBox>
</TabItem>
<TabItem Header="TabItem #2">
<TextBox>Tab Item #1 content</TextBox>
</TabItem>
<TabItem Header="TabItem #3">
<TextBox>Tab Item #1 content</TextBox>
</TabItem>
</TabControl>
</Grid>
I have some TabItems, each one containg one image and a textblock. Here is the code:
<TabItem.Header>
<ContentControl>
<ContentControl.Template>
<ControlTemplate>
<StackPanel x:Name="sp" Orientation="Horizontal">
<Image x:Name="img" Source="img0.png"/>
<TextBlock x:Name="tb" Text="Tab1" VerticalAlignment="Center" Foreground="Green"/>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="TabItem.IsSelected" Value="True">
<Setter TargetName="img" Property="Source" Value="img1.png" />
<Setter TargetName="tb" Property="Foreground" Value="Red" />
<Setter Property="FontWeight" Value="Bold"/>
</Trigger>
<Trigger SourceName="sp" Property="IsMouseOver" Value="True">
<Setter TargetName="img" Property="Source" Value="img1.png" />
<Setter TargetName="tb" Property="Foreground" Value="Red" />
<Setter Property="FontWeight" Value="Bold"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
What I'm trying to achieve is to change the image's source and textblock's foreground value when the TabItem is selected. The IsMouseOver behaviour is working properly but the TabItem.IsSelected is not working as expected.
Basically this code is not doing what I'm thinking it should do:
<Trigger Property="TabItem.IsSelected" Value="True">
<Setter TargetName="img" Property="Source" Value="img1.png" />
<Setter TargetName="tb" Property="Foreground" Value="Red" />
<Setter Property="FontWeight" Value="Bold"/>
Please share your opinion.
Thank you.
You are trying to reach the IsSelected property of the TabItem from the TabItem.Header and that can't be accomplished with an ordinary Trigger. Instead, you need to use a DataTrigger so that you can Bind to the IsSelected property with a RelativeSource Binding:
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=
{x:Type TabItem}}}" Value="True">
<Setter TargetName="img" Property="Source"
Value="/WpfApplication1;component/Images/Tulips.jpg" />
<Setter TargetName="tb" Property="Foreground" Value="Red" />
<Setter Property="TextElement.FontWeight" Value="Bold"/>
</DataTrigger>
I have many TextBox controls and I'm trying to write a style that clears the Text property when the Control is disabled.
I don't want to have Event Handlers in code behind.
I wrote this:
<Style TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Text" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
The problem is that if the TextBox is defined like:
<TextBox Text={Binding Whatever} />
then the trigger does not work (probably because it's bound)
How to overcome this problem?
Because you're explicitly setting the Text in the TextBox, the style's trigger can't overwrite it. Try this:
<TextBox>
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Text" Value="{Binding Whatever}" />
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Text" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>