We Keep Coding

How to put tooltips depending on togglebutton's state, WPF

I created a toggle button in WPF. Each state is represented by an image.
It looks like that:
<ToggleButton Click="ButtonEnable_Click" x:Name="ButtonEnable" Width="36" Height="36" ToolTipService.ShowOnDisabled="true" >
<ToggleButton.Resources>
<BitmapImage x:Key="imgNormal" UriSource="/Project;component/Resources/images/Image-active.png"/>
<BitmapImage x:Key="imgChecked" UriSource="/Project;component/Resources/images/Image-inactive.png"/>
</ToggleButton.Resources>
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Image x:Name="PART_Image" Source="{StaticResource imgNormal}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter TargetName="PART_Image" Property="Source" Value="{StaticResource imgChecked}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="PART_Image" Property="Source" Value="{StaticResource imgNormal}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
And everything works fine.
But i want to create a tooltip for each state of my togglebutton.
One "Active, blabla".
And the other "Inactive blabla".
And my software has to be localized, so the text of the tooltip is based on a ressource (en, fr, de, etc).
From what i saw, i am pretty sure it's a simple keyword or something... But i don't know what keyword, and where i have to put it...
Thanks a lot.
Bye.

You can simply set the Tooltip property
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="ToolTip" Value="Active"></Setter>
</Trigger>
</Style.Triggers>
<Setter Property="ToolTip" Value=""></Setter>
</Style>
</ToggleButton.Style>

Use Style something like:
<Trigger Property="IsChecked" Value="True">
<Setter Property="ToolTip" Value="{x:Static local:MainWindow.Tooltip1}"/>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="ToolTip" Value="{x:Static local:MainWindow.Tooltip2}"/>
</Trigger>
Property: Use CLR property to get values from Resource file
private static string tooltip1;
public static string Tooltip1
{
get
{
if (tooltip1 == null)
{
tooltip1 = "";//get this value form Resources
}
return tooltip1;
}
}

Visual studio extension resource files

I have developed a visual studio extension and I have a custom button that I want to style using PNG images, but the image files/resource files wont show while in action and the button is blank.
I have a custom button template.
<Style x:Key="openFilebtn" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Name="bgGrid">
<Image Name="btn_bg" Source="/vsPlayer;component/Resources/open.png"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="True">
<Setter Property="Source" TargetName="btn_bg" Value="/vsPlayer;component/Resources/open.png"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" TargetName="btn_bg" Value="/vsPlayer;component/Resources/open_hover.png"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Source" TargetName="btn_bg" Value="/vsPlayer;component/Resources/open.png"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Source" TargetName="btn_bg" Value="/vsPlayer;component/Resources/open.png"/>
<Setter Property="Opacity" TargetName="btn_bg" Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

So like I was saying, always make sure you have your build action property set correctly on assets like images you're including in the build. In your case, setting it to Resource does the trick.
Glad you got your remedy, cheers!

using MouseOver in StackPanel WPF

I have just started learning WPF and trying to hide a StackPanel during MouseOver. Below is the code that I use. I can only see the Panel flickering when mouse is placed on it but, it doesn't hide completely. Am I missing something here? Thanks in advance.
<Style x:Key="myStyle" TargetType="{x:Type StackPanel}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Visibility" Value="Hidden" />
</Trigger>
<Trigger Property="IsMouseOver" Value="false">
<Setter Property="Visibility" Value="Visible" />
</Trigger>
</Style.Triggers>
</Style>
Stackpanel:
<StackPanel Style="{StaticResource myStyle}">
// Child controls
</StackPanel>

When the StackPanel is hidden, the IsMouseOver property toggles to false, which makes the StackPanel visible again.
You might set the Opacity property instead of Visibility:
<Style x:Key="myStyle" TargetType="{x:Type StackPanel}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="0" />
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Opacity" Value="1" />
</Trigger>
</Style.Triggers>
</Style>
Or, as pointed out in the other answer, declare just one Trigger for IsMouseOver == true:
<Style x:Key="myStyle" TargetType="{x:Type StackPanel}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="0" />
</Trigger>
</Style.Triggers>
</Style>

Clemens has already answered your question, but just FYI when you are triggering on a Boolean value, you don't need a trigger for both states. Just set a single trigger for the true or false state, then when the state no longer applies the properties that were changed by the setters in the trigger will revert back to their previous values. This will cut down on the amount of XAML you need to write.

How to display validation error in button bound to command

I am developing an app and trying to stick to an MVVM model, I have a button that is just bound to a command. Currently the command can be enabled / disabled and greys out the button when the command is set to CanExecute false. But I want to add the ability to show validation errors on the button (by changing its color to red, maybe showing a tooltip).
The validation is currently already shown in another location in the UI, but the users are getting annoyed that the button is enabled and they click it only to have a message box pops up telling them they shouldn't of clicked the button because there is a validation error. But just disabling the button completely without showing them why would make the users confused(since they overlook the large red validation error at the bottom of the screen). So how can I show additional information on the save button?
This is my current button xaml:
<Button Name="SaveDataPointButton" Style="{StaticResource ImageButton}" Command="{Binding OpenDataPoint.SaveDataPointEditsCommand}" Margin="5,0" VerticalAlignment="Stretch">
<Image Source="save.png" Stretch="None" ToolTip="Save Edits"/>
</Button>
And the style that is changing its appearance when IsEnabled is false, is it possible to somehow inspect some other command state from the style to make the button red during validation errors?
<!-- Style for all of the nav and save buttons in the datapoints view -->
<Style x:Key="ImageButton" TargetType="Button">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border
x:Name="Border"
BorderThickness="0">
<ContentPresenter
Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<SolidColorBrush Color="LightGray"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<SolidColorBrush Color="Gray"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" Value="0.3"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Command" Value="{x:Null}">
<Setter Property="IsEnabled" Value="False"/>
</Trigger>
</Style.Triggers>
</Style>

I ended up using a DataTrigger bound to another property on the view model to change the background color, but because I was setting a ControlTemplate in the style, the only way I could figure out to make the DataTrigger apply a background change was to copy the entire style and put the DataTrigger on the Border element in the control template. Since apparently you can't reference a child element from the new ControlTemplate from outside that control template.
<!-- Style for all of the nav and save buttons in the datapoints view -->
<Style x:Key="ImageSaveButton" TargetType="Button">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border
x:Name="Border"
BorderThickness="0">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding OpenDataPoint.HasValidationError}" Value="True">
<Setter Property="Background" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<ContentPresenter
Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<SolidColorBrush Color="LightGray"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<SolidColorBrush Color="Gray"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" Value="0.3"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Command" Value="{x:Null}">
<Setter Property="IsEnabled" Value="False"/>
</Trigger>
</Style.Triggers>
</Style>

How can I change tab border brush on changing key board focus in wpf style

I want to change border color of tab item when it has key board focus. I have written following trigger in its style
<Style TargetType="{x:Type TabItem}" x:Key="{x:Type TabItem}">
<Style.Triggers>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="BorderBrush" Value="#800000" />
</Trigger>
It works fine for all other UI controls except tab itme. Can any one please help

Although this is working fine for me (make sure you actually have the keyboard focus to view the change in color)
<Style TargetType="{x:Type TabItem}" >
<Style.Triggers>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="BorderBrush" Value="Yellow"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="False">
<Setter Property="BorderBrush" Value="Blue"/>
</Trigger>
</Style.Triggers>
</Style>
You can also try this to change the color if any item inside the Tab have keyboard focus
<Style TargetType="{x:Type TabItem}" >
<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="BorderBrush" Value="Yellow"/>
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="False">
<Setter Property="BorderBrush" Value="Blue"/>
</Trigger>
</Style.Triggers>
</Style>