I have an object like that:
public class Person : IDataErrorInfo
{
public string PersonName{get;set;}
public int Age{get;set;}
string IDataErrorInfo.this[string propertyName]
{
get
{
if(propertyName=="PersonName")
{
if(PersonName.Length>30 || PersonName.Length<1)
{
return "Name is required and less than 30 characters.";
}
}
return null;
}
}
string IDataErrorInfo.Error
{
get
{
if(PersonName=="Tom" && Age!=30)
{
return "Tom must be 30.";
}
return null;
}
}
}
Binding the PersonName and Age properties is easy:
<TextBox Text="{Binding PersonName, ValidatesOnDataErrors=True}" />
<TextBox Text="{Binding Age, ValidatesOnDataErrors=True}" />
However, how can I use the Error property and show it appropriately?
You should modify the TextBox style so it shows what's wrong with the property. Here is a simple example that shows the error as tooltip:
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self},
Path=(Validation.Errors).CurrentItem.ErrorContent}" />
</Trigger>
</Style.Triggers>
</Style>
Just put it inside Application.Resources from your app.xaml file and it will be aplied for every textbox of your application:
<Application.Resources>
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self},
Path=(Validation.Errors).CurrentItem.ErrorContent}" />
</Trigger>
</Style.Triggers>
</Style>
</Application.Resources>
Here is an example, adapted from this question, that shows how to display the error in Tooltip:
<TextBox>
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip"
Value="{Binding RelativeSource={RelativeSource Self},
Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
Related
I am trying to change the fill of a rectangle based upon a value in my ViewModel but despite having tried all the suggestions I have found online, it still isn't working.
The IsMouseOver trigger works fine but the DataTrigger is ignored despite the fact there is always either a 4 or 5 in my ViewModel property.
Could somebody show me where I may be going wrong?
Thanks.
This is my style:
<Style x:Key="FavouriteRectangleStyle" TargetType="{x:Type Rectangle}">
<Setter Property="Opacity" Value="1"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Rectangle.Opacity" Value="0.5" />
</Trigger>
<DataTrigger Binding="{Binding Path=Theme}" Value="4">
<Setter Property="Rectangle.Fill" Value="{DynamicResource content__star__hex646464__shadow}"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=Theme}" Value="5">
<Setter Property="Rectangle.Fill" Value="{DynamicResource content__star__favorit__hexebebeb__shadow}"/>
</DataTrigger>
</Style.Triggers>
</Style>
EDIT: So it seems that my Binding was incorrect due to my incorrect assumption that the DataContext of the UserControl is where I should direct the binding.
The Rectangle is in the template for a ListBox and has "Items" as it's DataContext so by changing the "Binding" it now works.
Many thanks for all assistance though:
SOLUTION:
<Style x:Key="FavouriteRectangleStyle" TargetType="{x:Type Rectangle}">
<Setter Property="Opacity" Value="1"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Rectangle.Opacity" Value="0.5" />
</Trigger>
<DataTrigger Binding="{Binding DataContext.Theme,
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType=UserControl} }" Value="4">
<Setter Property="Rectangle.Fill"
Value="{DynamicResource content__star__hex646464__shadow}"/>
</DataTrigger>
<DataTrigger Binding="{Binding DataContext.Theme,
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType=UserControl} }" Value="5">
<Setter Property="Rectangle.Fill"
Value="{DynamicResource content__star__favorit__hexebebeb__shadow}"/>
</DataTrigger>
</Style.Triggers>
</Style>
Change your TargetType="Rectangle"
Here is the code I used to test
<Style x:Key="FavouriteRectangleStyle" TargetType="Rectangle">
<Setter Property="Fill" Value="Blue"/>
<Setter Property="Opacity" Value="1"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Rectangle.Opacity" Value="0.5" />
</Trigger>
<DataTrigger Binding="{Binding Theme}" Value="4">
<Setter Property="Fill" Value="Red"/>
</DataTrigger>
<DataTrigger Binding="{Binding Theme}" Value="5">
<Setter Property="Fill" Value="Black"/>
</DataTrigger>
</Style.Triggers>
</Style>
And the implementation
<Rectangle Style="{StaticResource FavouriteRectangleStyle}"/>
Inside the constructor of your window or usercontrol what you haveused, you should set this.DataContext = this; Otherwise binding not properly worked for the corresponding window or usercontrol.
That probably because you miss to implement the INotifyPropertyChanged interface, update you Theme property to this:
private int _theme = 5;
public int Theme
{
get
{
return _theme;
}
set
{
if (_theme == value)
{
return;
}
_theme = value;
OnPropertyChanged();
}
}
and make sure your codebehind or your viewmodel is implementing the interface
public partial class MainWindow : Window,INotifyPropertyChanged
{
here a full working sample:
Title="MainWindow" Height="350" Width="525"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Window.Resources>
<SolidColorBrush x:Key="content__star__hex646464__shadow" Color="Red"/>
<SolidColorBrush x:Key="content__star__favorit__hexebebeb__shadow" Color="Green"/>
<Style x:Key="FavouriteRectangleStyle" TargetType="{x:Type Rectangle}">
<Setter Property="Opacity" Value="1"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Rectangle.Opacity" Value="0.5" />
</Trigger>
<DataTrigger Binding="{Binding Path=Theme}" Value="4">
<Setter Property="Rectangle.Fill" Value="{DynamicResource content__star__hex646464__shadow}"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=Theme}" Value="5">
<Setter Property="Rectangle.Fill" Value="{DynamicResource content__star__favorit__hexebebeb__shadow}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel>
<Rectangle Style="{StaticResource FavouriteRectangleStyle}" VerticalAlignment="Center" HorizontalAlignment="Center" Width="200" Height="100"></Rectangle>
<Button Content="Change Theme" Click="ButtonBase_OnClick"></Button>
</StackPanel>
and the code behind :
public partial class MainWindow : Window,INotifyPropertyChanged
{
private int _theme = 5;
public int Theme
{
get
{
return _theme;
}
set
{
if (_theme == value)
{
return;
}
_theme = value;
OnPropertyChanged();
}
}
public MainWindow()
{
this.InitializeComponent();
}
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
Theme = Theme == 5 ? 4 : 5;
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
var handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
}
Answer in EDIT part of original question. Thanks for all assistance
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 toggle button that has two data triggers that are bound to the buttons IsChecked property. Within the Data triggers I am setting the buttons content and also its command property. The problem that I am having is that when you click the button the data trigger is changing the command value and then firing the command. Is it possible to have the command fire first then the data trigger? Here is the code.
<ToggleButton x:Name="commandToggleButton" Grid.Row="0" Height="30" HorizontalAlignment="Left" Margin="26,24,0,0" VerticalAlignment="Top" Width="75">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=commandToggleButton, Path=IsChecked}" Value="False">
<Setter Property="Content" Value="Build" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Command" Value="{Binding Build}" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=commandToggleButton, Path=IsChecked}" Value="True">
<Setter Property="Content" Value="Cancel" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Command" Value="{Binding CancelBuild}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
What I would like to happen is that when the button is clicked the first time for the Build command to be fired, then if it is clicked the second time for the CancelBuild command to be fired.
Keep it simple:
<ToggleButton IsChecked="{Binding EnableBuild}" FontWeight="Bold">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Style.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Content" Value="Build" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="Cancel" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
ViewModel:
public Command Build {get;set;}
public Command Cancel {get;set;}
//...
private bool _enableBuild;
public bool EnableBuild
{
get { return _enableBuild; }
set
{
_enableBuild = value;
NotifyPropertyChange(() => EnableBuild);
if (value)
Build.Execute();
else
Cancel.Execute();
}
}
I am writing a XAML file which use DataTrigger to set a property in the ViewModel. The ViewModel class defined as:
public class ShellModel : INotifyPropertyChanged
{
public Brush ForegroundBrush
{
get; set;
}
....................
}
I want to use DataTrigger in the View.xaml to set the property ForegroundBrush. The XAML I wrote is:
<StatusBar Name="statusBar" Grid.Row="3">
<StatusBarItem>
<StatusBarItem.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding HasError}" Value="True">
<Setter Property="ForegroundBrush" Value="Red" />
</DataTrigger>
<DataTrigger Binding="{Binding HasError}" Value="False">
<Setter Property="ForegroundBrush" Value="Black" />
</DataTrigger>
</Style.Triggers>
</Style>
</StatusBarItem.Style>
<TextBlock Name="statusBarMessage" Foreground="{Binding ForegroundBrush}" Text="{Binding StatusMessage}"></TextBlock>
</StatusBarItem>
........................
This does not compile. When I changed the
<Setter Property="ForegroundBrush" Value="Black" />
to
<Setter Property="ShellModel.ForegroundBrush" Value="Black" />
it gives me error:
Dependency property field missing ....
How shall I write this so that the DataTrigger can set the property ForegroundBrush in the ViewModel?
Setters in your DataTriggers should change properties of your UI elements only (and also they only work with DependencyProperties).
Set the Foregound Property of your StatusBarItem directly and set the TargetType of the Style. That should help.
<Style TargetType="{x:Type StatusBarItem}">
<Style.Triggers>
<DataTrigger Binding="{Binding HasError}" Value="True">
<Setter Property="Foreground" Value="Red" />
</DataTrigger>
<DataTrigger Binding="{Binding HasError}" Value="False">
<Setter Property="Foreground" Value="Black" />
</DataTrigger>
</Style.Triggers>
</Style>
Having information about the visual representation in your ViewModel is usually not a good idea anyway.
Is there a way in XAML to determine if the ListBox has data?
I wanna set its IsVisibile property to false if no data.
The ListBox contains a HasItems property you can bind to. So you can just do this:
<BooleanToVisibilityConverter x:Key="BooleanToVisibility" />
...
<ListBox
Visibility="{Binding HasItems,
RelativeSource={RelativeSource Self},
Converter=BooleanToVisibility}" />
Or as a Trigger so you don't need the converter:
<ListBox>
<ListBox.Style>
<Style TargetType="{x:Type ListBox}">
<Setter Property="Visibility" Value="Visible" />
<Style.Triggers>
<DataTrigger
Binding="{Binding HasItems, RelativeSource={RelativeSource Self}}"
Value="False">
<Setter Property="Visibility" Value="Hidden" />
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.Style>
</ListBox>
I haven't tested the bindings so there might be some typos but you should get the idea.
Do it in a trigger and you won't need a ValueConverter:
<ListBox>
<ListBox.Style>
<Style TargetType="{x:Type ListBox}">
<Style.Triggers>
<DataTrigger
Binding="Items.Count, {Binding RelativeSource={RelativeSource Self}}"
Value="0">
<Setter Property="Visibility" Value="Hidden" />
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.Style>
</ListBox>
So that shows the ListBox by default, but if Items.Count is ever 0, the ListBox is hidden.
<ListBox.Style>
<Style TargetType="ListBox">
<Setter Property="Visibility" Value="Visible"/>
<Style.Triggers>
<Trigger Property="HasItems" Value="False">
<Setter Property="Visibility" Value="Hidden"/>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.Style>
You can probably make this work using a ValueConverter and normal binding.
Set Visibility to be:
Visibility = "{Binding myListbox.Items.Count, Converter={StaticResource VisibilityConverter}}"
Then set up your converter to return Visibility.Collapsed etc based on the value of the count.