Category: WPF

07 AUG 2019

c#basics multiple-windows custom-control depe-property idata-error

dep

Multiple-windows: you can open multiple interactive windows in XAML using the show method. or open a new window while making other windows inactive using the showdialog method
User controls represented by the UserControl class, is the concept of grouping markup and code into a reusable container, so that the same interface, with the same functionality, can be used in several different places and even across several applications. A user control acts much like a WPF Window – an area where you can place other controls, and then a Code-behind file where you can interact with these controls. The file that contains the user control also ends with .xaml, and the Code-behind ends with .xaml.cs – just like a Window
IDataErrorInfo is an interface defined in System.ComponentModel namespace. The contract required implementing indexer and a string property named Error. it allows you to execute a validation on a control (i.e. validate the text value of a TextBox). when the validation fails- the control will have an invalid color (i.e. red). it is also possible to trigger an event which will modify the UI (in order to supply extra details for the user) in case of validation error, for example a tooltip message error like- “password must be at least 8 characters”
Custom dependency property: dependency properties are properties that are registered with the WPF property system by calling the Register method (or RegisterReadOnly), and that are backed by a DependencyProperty identifier field. Dependency properties can be used only by DependencyObject types( which is  the majority of classes in WPF). you can create your own dependency property in order to add extra data to the control (or user control) and simplify the trigger events (which uses dependency properties)for ui modifications, such as styling

Final project Part II:

wpf_gen

DB Generator – project part 2!

More topics covered:

  • Multiple window – close current window
  • User control – pass parameters
  • User control – flip between controls
  • Custom dependency property – initial value
  • Validation error – trigger event

Links:

04 AUG 2019

c#basics datagrid materials

material

XAML Material theme: With Material Design In XAML Toolkit you can easily bring beautiful desktop applications to life, using a modern and popular design language. Fully open source and one of the most popular GUI libraries for WPF
Data Grid: To show a basic data grid , just drop a DataGrid control to your view and bind the ItemsSource to a collection of data objects and you’re done. The DataGrid provides a feature called AutoGenerateColumns that automatically generates column according to the public properties of your data objects. It generates the following types of columns:
– TextBox columns for string values
– CheckBox columns for boolean values
– ComboBox columns for enumerable values
– Hyperlink columns for Uri values

More topics covered:

  • Material nugget
  • DatePicker
  • DataGrid AutoGenerateColumns
  • DataGrid enum converter
  • DataGrid check-box converter
  • DataGrid OneWayToSource

Links:

31 JULY 2019

c#basics observable-collection content-presenter data-template value-converter

obs.png

An ObservableCollection is a dynamic collection of objects of a given type. Objects can be added, removed or be updated with an automatic notification of actions. When an object is added to or removed from an observable collection, the UI is automatically updated. This happens because, when binding to an observable collection, WPF automatically adds a CollectionChanged event handler to the ObservableCollecion’s events. The ObservableCollection class exists in the System.Collections.ObjectModel namespace
Content-Presenter is a placeholder for any XAML content and it can be used to insert content at runtime. Or we can say that ContentPresenter is a class that will automatically take the content of the ContentControl and display it, when placed into a ContentControl’s ControlTemplate. it can be used with the DataTemplate. Data template describes how bound data is displayed. A data template can contain elements that are each bound to a data property along with additional markup that describes layout, color and other appearance. DataTemplate is, basically, used to specify the appearance of data displayed by a control not the appearance of the control itself.
A Value Converter functions as a bridge between a target and a source and it is necessary when a target is bound with one source, for instance you have a text box and a button control. You want to enable or disable the button control when the text of the text box is filled or null.

More topics covered:

  • Snoop, the WPF Spy Utility
  • ObservableCollection  requires ObservableCollection
  • Content-Presenter as a Window.Resource
  • ValueConverter convert back
  • ValueConverter for a Property data

Links:

28 JULY 2019

c#basics routed-events icommand prism

prism

Routed Events have three main routing strategies: Direct Event, Bubbling Event, Tunneling Event. Direct Event: A direct event is similar to events in Windows forms which are raised by the element in which the event is originated. Unlike a standard CLR event, direct routed events support class handling and they can be used in Event Setters and Event Triggers within your style of your Custom Control. A good example of a direct event would be the MouseEnter event. Bubbling Event: A bubbling event begins with the element where the event is originated. Then it travels up the visual tree to the topmost element in the visual tree. As you probably have guessed, in WPF, the topmost element is most likely a window. Tunnel Event: The direction of Tunneling event is opposite to the Bubbling event. Here the event handlers on the element tree root are invoked and then the event travels down the visual tree to all the children nodes until it reaches the element in which the event originated. The difference between a bubbling and a tunneling event (apart from the direction) is that a tunneling event name will always start with a ‘preview’.
ICommand provide a mechanism for the view to update the model in the MVVM architecture.  The ICommand interface is defined inside the System.Windows.Input namespace. It has two methods: bool CanExecute (object parameter) which determinate if the command can be executed or not. void Execute (object parameter) which tells the command what to do when fired. we will “hook” the command into a button, instead of creating a Click event

More topics covered:

  • Routed Events – source, has-handled
  • ICommand RelayCommand wrapper
  • ICommand ActionCommand<T>
  • Prism.WPF – nugget
  • DelegateCommand – RaiseCanExecuteChanged

Links:

24 JULY 2019

c#basics one-way-to-source event-trigger inotify-property-change invoke-required dispatcher-invoke

mvvm2.png

You can use the binding mode option to determine the directions in which data passes between the binding source and the target control.  Five options are available: TwoWay. Configures the binding to be bi-directional. Changes made by the user are passed back to the data source and changes in the source update the control. This option is generally used for user input controls. OneWay. Sets the binding so that changes made in the data source are copied into the bound property of the target control. Updates made by the user are not passed to the data source. This binding mode is generally used for read-only controls, such as TextBlocks. OneWayToSource. Configures the binding so that changes made by manipulating the control are passed back to the data source. Changes in the data source are not copied into the control. OneTime. A one-time data binding means that the control’s property is set when control is created or when the data context is changed. Further changes to either the property or the data source are not transmitted. This type of binding is generally used for static data or when you wish to display a snapshot of the data at a point in time. Default. Uses the default binding mode for the property. This value varies according to the control. For example, a TextBlock’s Text property defaults to being one-way but a TextBox’s Text property uses a two-way binding as standard. We saw another type of trigger that is available called- the event trigger. As the name suggests, this trigger causes actions in response to events being raised. You can detect any routed event and respond with an action or group of actions. the event trigger is mostly used for animation effects (i.e. enlarging fonts).

We learned about the MVVM pattern (Model View View-Model). MVVM facilitates a separation of development of the graphical user interface (XAML and c# code behind) – from development of the business logic or back-end logic (the data model). when we follow the MVVM architecture we need to use the INotifyPropertyChanged. INotifyPropertyChanged is an interface used to notify the Control that the property value has changed. so if we modify a property inside an object which is Bind to the XAML, it will be updated in the view. in order to inform the UI we need to fire the PropertyChanged event (which we “get for free” when we implement this interface).

The last topic was the UI thread in WPF. when we developed a Winform application we used the async and BeginInvoke mechanism in order to call the UI thread. but before we called the UI thread we needed to check if the current thread is the UI thread or not. we can call the InvokeRequired method. if the method returns true, it means that the current thread is the UI thread. in WPF we can do the same: Dispatcher.CheckAccess()  returns true if the current thread is the UI thread (and false if not). in order to ask the UI to invoke a method we use the Dispatcher.Invoke( Action ) method

More topics covered:

  • SafeInvoke pattern
  • MVVM – for testing purposes
  • Tools like Selenium – for full end to end testing
  • Model class (like person) implements the INotifyPropertyChanged
  • MVVM class could be used as the DataContext of the window

Links:

21 JULY 2019

c#basics resources style trigger data-binding data-context

ways

We saw how to add Resources into our WPF application. the Resources define styling attribute (such as color) into a specific key. this allows us to attach a definition (such as color) into our controllers. what do we gain from all of this? answer: if we choose to modify the color of many controllers at once- we can achieve that but simply modify the Resource only one time! the Resources could be declared at a Local scope, Window scope, Application scope or as a Dynamic resource (in order to modify the value from the C# code). we saw how to define a Style. a Style is a set of design properties which are used to define an appearance of a component. we can use these properties in order to define the appearance of our controllers (like Resource) and update them at once. we can also use Style in order to Trigger a UI modification. we do that by defining two styles into a controller: one Style for the “regular mode” and a second Style for a triggered event. whenever the event occurs- the new Style will take place. for example – mouse over. we learned about DataBinding types: one way, one time and two ways. the one way is used to update a target control whenever the source control is modified (for example a slider bar could be used as a source and a text block could be used as the target. whenever the user “drags” the slide bar – the value of the text block will be updated according to the slide bar position [in percentage]). one way means that the text block will be updated only once- from the slide bar value. two ways means for example, that if a slider is attached to a text box, then whenever the user “drags” the slide bar- the text box text will be updated. and whenever the user modified the text in text box- the slider will be updated. we learned about DataContext. whenever you Bind a property into the XAML you need to specify a DataContext so the WPF will know which object holds the specified property. the DataContext could be set in a controller level, in a panel level or in a window level

More topics covered:

  • UpdateSourceTrigger – change, focus lost
  • DataTrigger for Style (data modification event)
  • DataContext set to an Object (i.e. Person)
  • App.xaml Application.Resources
  • Style Trigger could modify text
  • Style Trigger could be fired on check box selection

Links:

 

Design a site like this with WordPress.com
Get started