WPF #55

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:

 

WPF #54

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:

 

WPF #53

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:

 

WPF #52

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
  • Prism.WPF – nugget
  • DelegateCommand – RaiseCanExecuteChanged

Links:

 

WPF #51

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:

 

WPF #50

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:

 

WPF #49

tree

We learned about two new types of panels in WPF: WrapPanel and Gird. The WrapPanel will position each of its child controls next to the other, horizontally (default) or vertically, until there is no more room, where it will wrap to the next line and then continue. Use it when you want a vertical or horizontal list controls that automatically wraps when there’s no more room.  The Grid can contain multiple rows and columns. You define a height for each of the rows and a width for each of the columns, in either an absolute amount of pixels, in a percentage of the available space or as auto, where the row or column will automatically adjust its size depending on the content. Use the Grid when you need multiple columns and often in combination with the other panels. We investigated more WPF controls: ScrollViewer, ComboBox and Media (image, video). we created a button click Event in the XAML code and attached it to a function. we saw that WPF controls have a property window (when pressing F4) which displays their properties and events. modifying properties in the property window will modify the XAML (and vice versa). we studied how to Bind data to a ComboBox control. in order to do so we created a List and assigned the ItemsSource of the ComboBox to this list (in the C# code behind). in the XAML, we added a ComboBox control which contain a TextBlock with Binding data to the Person.FirstName and a TextBlock with Binding data to the Person.LastName, that’s it!

More topics covered:

  • Grid: ColumnDefinition RowDefinition
  • ColumnSpan
  • WPF namespace, xmlns:x
  • MouseDown Event
  • DataTemplate
  • { Binding Property-Name }
  • Adding media to WPF window
  • Adding media to solution explorer
  • Modifying media build action
  • Project Resource
  • Embedded Resource

Links:

 

WPF #48

fonter

We learned about two types of panels in WPF: StackPanel  and DockPanel. The StackPanel will position each of its child controls next to the other, horizontally (default) or vertically, until there is no more room and then it simply expands itself, if possible. the child controls are stretched to take up the full width or height (based on the largest item). Use the StackPanel when you want a list of controls that takes up all the available room, without wrapping. The DockPanel allows you to dock the child controls to the top, bottom, left or right. By default, the last control, if not given a specific dock position, will fill the remaining space. Use the DockPanel whenever you need to dock one or several controls to one of the side. We explored a font-viewer application which allows the user to select a specific font from a list and modify the text accordingly. the text could be modified by the user and is automatically duplicated among all other text blocks. the entire application is written without a single line of code! only in XAML declarations! we saw how the { } brackets are used to compute a value in XAML – for example to read a list of fonts, set a font value , set a text value etc. we also saw some more cool design features such as : margin, padding, border, background colors and more

More topics covered:

  • What is XML ?
  • Create multiple XAML windows inside the application
  • Binding data to Control
  • Margin orientation – single value, two values, etc.
  • Border control
  • Nesting panels – panel inside a panel
  • ListBox – ItemsSource, SelectedItem
  • Path attribute
  • x: [name-of-property]
  • Adding ToolTip 
  • TextBlock is more lightweight control for displaying text
  • TextBox is used when you require user input or edit existing text
  • TextWrapping attribute
  • MinLines attribute

Links:

panels2

WPF – introduction

wpf.PNG

WPF introduction

More topics covered:

Links: