I hope that this question has not been asked elsewhere, but I'm having difficulty finding the right search terms to bring up any already-existing answers to this problem.
I'm implementing a program in C# WPF (MVVM) with many interview-style screens where the user inputs scientific data in an orderly manner. We would like to have the Textbox's and DataGrid's change Foreground and Background colors on an individual basis based on whether the data in that control has been inputted by the user, inputted as a default value by the program, or is a template value from another file the user imported. On top of this, we would like the UI to respond to validation checks from IDataErrorInfo implemented in the ViewModel.
Thus, the data displayed in a TextBox could be blue if it is a templated value, green if a program default, black if user inputed, and red if IDataErrorInfo says it is bad data.
My initial answer for implementing this was to create a custom class:
class AdornerString{
private string _myString;
private bool _isTemplate;
private bool _isDefault;
public string MyString{
get{
etc.
}
set{
etc.
}
}
// accessor properties and Constructors omitted for brevity
}
Then I have all my TextBox.Text properties in the View bound like so:
<TextBox Text="{Binding Path=someAdornerString.MyString,UpdateSourceTrigger=PropertyChanged,ValidatesOnDataErrors=True}"/>
and apply a style with DataTriggers that responds to someAdornerString's properties to create the appropriate colors.
However, IDataErrorInfo on the ViewModel doesn't validate the TextBox anymore. Why is this so, and is there a better way to solve my problem? I can't validate inside the AdornerString class.
A possible work-around, though undesirable:
The only other solution I can think of is to have two properties in the ViewModel for each field entered by the user- one for the data itself and the other being the same custom class as above minus the string. However, this means I can't generalize the style used for the textboxes. Each TextBox would have to have a custom style something like this:
<TextBox.Style>
<Style TargetType="{x:Type TextBox}"
BasedOn="{StaticResource OtherStyle}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=**instanceCustomClass**.IsDefault}"
Value="True">
<Setter Property="Foreground"
Value="Green" />
</DataTrigger>
<Trigger Property="Validation.HasError"
Value="true">
<Setter Property="Foreground"
Value="OrangeRed" />
</Trigger>
</Style.Triggers>
</Style>
since each UI field has a specific custom class associated with it.
I would seriously rather not implement this way, as I have possibly 100+ pages of input screens, with each screen having 1-12 TextBox's each, ignoring the DataGrids thrown in the mix (with parellel arrays of data and their associated custom classes).
Any ideas? I've read about custom validation, though I yet don't see how this might help in this case.
Ignore making use of the IDataErrInfo validation all together, as it seems that the you really want to make it 1 of 4 values...and 'bad' data just happens to be one of them.
You need to keep the items on an even playing field since you are treating them the same, just differentiating colors. Use a single property with an object wrapping the value and the state of the model within the ViewModel. Ignore IDataErroInfo and then use a converter to provide the coloring and then add a delegate to the AdornerString that will be set to the validation function written in the ViewModel for it.
Related
Ok I would think this would be fairly simple, but it seems almost impossible to do. I have a resource dictionary in my app and I define a style like so:
<Style x:Key="appBackground" TargetType="Grid">
<Setter Property="Background" Value="#ebf2f3"/>
</Style>
My end goal would be to allow users to select a color and let them change the appearance of the app. I would like to still use my resourcedictionary to control the styles, so they can pick like background color, main text color, and accent color and remain consistent throughout the app. But I cannot find a way to edit the resourceDictionary. I have tried to use the System.Windows.Markup.XamlWriter.Save method which was talked about in this SO post (How to dynamically add key and value to the ResourceDictionary in wpf?) but when I do it adds:
<s:String x:Key="appBackground">Blue</s:String>
Any ideas or suggestions out there??
You can make value of your setter a binding to static resource, that you would be dynamically changing like in the answer you referenced.
<Color x:Key="myAppBackground">#ebf2f3</Color>
<Style x:Key="appBackground" TargetType="Grid">
<Setter Property="Background" Value="{StaticResource myAppBackground}"/>
</Style>
After this you would be just changing value of myAppBackground.
Another suggestion, though it might not solve your problem since it's a bit different. You still make values of setters a binding, but instead of dynamically changing the values you would have 2 ResouceDictionaries with same keys, but different values. You would merge the one you want with the rest in your application and apply that. I used this approach to load different color themes on application startup, but if you need to do this many times it might be slow and not efficient approach.
Probably a dumb question but to make a default value for binding in a WPF ControlTemplate what is the best way in terms of performance?
I've tried several option:
Priority binding: It didn't work, probably my bad...
ControlTemplate Trigger: Works well, I use it on a property which always return true in my case:
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Setter Property="TextBoxWidth" Value="300" />
</Trigger>
</ControlTemplate.Triggers>
FallBackValue: Works well too.
Is it better to work with trigger, FallBackValue or is there another way to do it?
Thanks in advance
----------------- UPDATE ----------------
After doing more research it seems that the best way to achieve my goal is simply using the styles...
I don't know why it didn't work in the first place but just doing this seems to work:
<Style TargetType="local:EditableWidthText">
<Setter Property="TextBoxWidth" Value="300"/>
</Style>
No need for FallbackValue anymore. It works when there is a binding, when there is no binding and when it's overrided by another style. Exactly what I need.
Thanks Sinatr for your comment about performance of FallbackValue.
Fyi Priority Binding:
PriorityBinding lets you associate a binding target (target) property with a list of bindings.
The first binding that returns a value successfully becomes the active binding.
https://msdn.microsoft.com/en-us/library/system.windows.data.prioritybinding%28v=vs.110%29.aspx
I never used template selector nor datatemplate, but I think it's a bit overkill for my need, no?
----------------- UPDATE #2----------------
#Sinatr:
I've a Mainviewmodel which contains several ViewModel binded to several usercontrols displayed into the MainView.
(Something like one of my other post: Navigate through UserControl with MVVM LIGHT (WPF))
But this controlTemplate is for a looklessControl (something quite simple, juste a label and a textbox).
In this LookLess Control I've created 4 dependency properties.
In the control template I've binded 2 of them to the Text/Content propertie of the Textbox/Label
and two to their width. (I want the user to be able to create forms in the future, binding way).
For example the label looks like this in the ControlTemplate:
<Label
Width="{Binding Path=LabelWidth,
RelativeSource={RelativeSourceAncestorType=local:EditableWidthText}}"
Content="{Binding Path=LabelText,
RelativeSource={RelativeSource AncestorType=local:EditableWidthText}}"/>
I just want the width to be equals to 130 when there is no binding defined.
But I don't want problem of performance because of a binding failed or something like this.
Template selector are very interesting, but I don't think that applied in my case.
There is no switching within the datas, it's just a default value. So I don't think that apply either.
(But maybe I'm wrong :p )
So maybe I think that styles are the way to go?
I've been trying to just hide items from a TreeView. I'm using a custom data type as source (called SettingsMenuItem) which inherits from FrameworkElement (currently FrameworkContentElement, because otherwise the TreeView renders them wrong).
My goal is by setting the VisibilityProperty of these FrameworkElements to either Collapsed or Visible that I'm able to hide certain items (including their children). I know that this can be done by deleting items from the source collection. But that's not what I want. It would mean that I have to mirror each collection in order to keep track of it's actual items, bind to each one in order to be notified about Visibility-changes and create a new collection each time one changes. A lot of overhead for this.
Right now I have no clue how I could accomplish that. I figure it's related to the ItemsGenerator, but I haven't seen any possibility to override it's behaviour. I thought TreeView would be able to detect Visibility, but obviously it doesn't. As alternative I thought of a custom TreeViewItem (maybe even TreeView if necessary) - but at this point the abstraction of this whole system overwhelms me. I don't know where to start and what is actually necessary to solve the problem.
Tips what I have to change or implement by myself would be more than enough. A complete solution would be nice.
You can do this using a data trigger bound to a property (e.g. "IsVisible") in you tree data nodes:
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="Visibility" Value="Visible" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsVisible}" Value="False">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
</Style.Triggers>
</Style>
</TreeView.ItemContainerStyle>
While this technically answers your question I would be wary of actually doing it. User3690202's comment is correct, it's the sort of thing you would normally do via filtering in your view model.
For alternate solution using code behind xaml.cs:
To Remove a specific TreeViewItem from a TreeView which is created from a code behind.
TreeViewItem treeViewItem1 = new TreeViewItem
{
Visibility = Visibility.Collapsed,
};
use the code with TreeViewItem you want to hide in a if condition to hide specific TreeViewItem Header let say "Cars" and you want to hide it and use the code with if condition to hide "Cars" TreeViewItem.
So, picture the situation...
I have a MainWindow, with a TabControl, Apadtly named TabControl1, placed within it. The TabControl is made up of 2 "tabs".
The first tab, contains an instantiation of one of my Custom User Controls, FruitForm, this particular instantiation is named FruitForm1.
Likewise the second tab contains an instantion of another one of my Custom User Control, VegForm, this particular instantiation is named VegForm1.
To give you an impression of what FruitForm and VegForm look like I have included the following image:
I don't have enough rep to embed images within my question :(
I also have 2 Validation classes named FruitValidation and VegValidation which are essentially made up of simple public static methods which return true or false depending on whether the input string matches the simple criteria. For example, consider the "FruitValidation.validateApple()" method:
public static bool validateApple(string apple)
{
if (apple == null) return false;
if (apple.ToUpper() == "APPLE") return true;
else return false;
}
I also have an static IconLoader class, which is essentially a wrapper, which allows me to easily change the source property of my desired icon to a Tick or a Cross. For example if I wanted to change the icon next to the Banana textbox (see image above) to a Tick then I would write the following code:
imageBanana.Source = IconLoader.GetTick();
//setting it back to a cross...
imageBanana.Source = IconLoader.GetCross();
Everytime the text is changed within a particular textbox I validate whether the contents of the textbox matches the desired value. If it does I set the icon to a Tick otherwise it displays a Cross.
This image should clarify what I have described in the previous paragraph.
Now essentially this is the question:
How do I change the image found within the header to a Tick when all textboxes within it's corresponding UserControl are valid (i.e. every TextBox has a Tick next to it)? I also want this particular event to be triggered from within the UserControl, which is not currently aware of TabControl1's exsistance
I should also point out that if one of the textfields were to become invalid (after being once valid at some point) the corresponding Tab header should reflect this - by displaying a Cross
Well, to answer your question: the easiest way is to define a dependency property on your UserControls which will indicate the validation result and then bind your tab item to it. For example:
public static readonly DependencyProperty IsValidProperty = DependencyProperty.Register("IsValid", typeof (bool), typeof (VegForm));
public bool IsValid
{
get { return (bool) GetValue(IsValidProperty); }
set { SetValue(IsValidProperty, value); }
}
<TabItem>
<TabItem.Header>
<Image>
<Image.Style>
<Style TargetType="Image">
<!-- Replace "..." with valid "tick" image source -->
<Setter Property="Source" Value="..."/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsValid, ElementName=VegForm}" Value="False">
<!-- Replace "..." with valid "cross" image source -->
<Setter Property="Source" Value="..."/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</TabItem.Header>
<VegForm x:Name="VegForm"/>
</TabItem>
However, if your goal is to learn wpf - you should get rid of this Windows.Forms mentality before it takes you any further. Because normally you would not need this code. Reading a few articles on MVVM pattern in WPF is a good start.
Also WPF has an inbuild validation. You should read on that as well. Before you end up reinventing the wheel.
WPF application, .NET 3.5.
I have a ListView control, to which I bind a collection of business classes.
I'd like to bind the ForeColor of items to a bool property of the class (say: MyClass.Active), so that the items are displayed in black when active, in light gray when disabled.
I want listview items to change their color on-the-fly, I mean when I'd change Active value of one of the instances in my databound collection, its respective listview item would change its color automatically.
What do I need to achieve this? I've found numerous tutorials on WPF databinding on the net, some questions on StackOverflow, but not exactly the same thing, and I don't want to start combining my solution out of everything I can put my hands on, by trial and error.
I know about INotifyPropertyChanged (for my business class), IValueConverter (but should I need it for a bool??), DataTrigger etc.
But which pieces of the puzzle do I really need, what is the simpliest way to achieve my goal?
I would just do it in a style, and apply that style on your List items. Providing that your object implements INotifyPropertyChanged and the property changed event gets raised when IsActive changes, this will change the foreground to Gray if IsActive = False
<Style x:Key="DisableInactiveTextStyle" TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="Black" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsActive}" Value="False">
<Setter Property="Foreground" Value="LightGray" />
</DataTrigger>
</Style.Trigger>
</Style>
<TextBlock Style="{StaticResource DisableInactiveTextStyle}" ... />
I would suggest creating an IValueConverter that takes a bool and returns a color. You can then bind the ForeColor to the MyClass.Active property and use the created converter.