WPF Note

Points from my learning about WPF/ XAML.

1. Use itemscontrol against Listbox, if no selection is required.

2. DataTemplate is used to apply visual rendering to a data structure.

3. ControlTemplate - Custom control can be used to: 

• Redefine a standard type like Radio button.
• Determine value of an ItemTemplate or a template property.
  

  <ControlTemplate targettype={x:type radiobutton}>
  <CheckBox IsChecked={templatebinding IsSelected}/>
  </ControlTemplate>

Actual CheckBox from outside logically behaves as Radio button, whose property(IsSelected) is bound/ implemented to/ by CheckBox.IsChecked.

4. Panels - StackPanel, DockPanel, WrapPanel

5. StackPanel arranges stacks of sub controls in a horizental or vertical direction. DockPanel can hold sub controls related to given dock - top, bottom, left or right. WrapPanel is similar with StackPanel and  the difference is that it acts like a container box, can pack sub controls in breaking lines/ columns.

6. Canvas, lightweight container, anchors sub controls in pixels related to left or right and top or button.

7. Trigger\MultiTrigger VS DataTrigger\MultiDataTrigger VS eventtrigger

trigger is conditioned on self property, while DataTrigger\MultiDataTrigger can bind to any other element, e.g,

<CheckBox x:Name="cb1"/>
 <CheckBox x:Name="cb2"/>
 <Button>
    <Button.Style>
           <Style TargetType="Button">
              <Style.Triggers>
                 <MultiDataTrigger>
                     <Condition Binding="{Binding ElementName=cb1, Path=IsChecked}" Value="True"/>
                     <Condition Binding="{Binding ElementName=cb2, Path=IsChecked}" Value="True"/>
                 </MultiDataTrigger>
                  <Setter Property="IsEnabled" Value="True"/>
             </Style.Triggers>
           </Style>
   </Button.Style>
 </Button>

Eventtrigger – trigger on event like ismouseover, only EventTrigger can reside in control tag. In order to attach Trigger or DataTrigger to control, use embedded style.

8. Update all binding properties of an data structure

Binding the data structure to a datatemplate, once the data structure instance updated, the whole visual appearance is updated.

9. SelectedValue, SelectedPath and SelectedItem

selectedItem – the whole item of the object from the binding collection.

selectedValuePath – bound to property of the item object, indicates the SelectedValue source property.

selectedValue – the value indicates by value path for the item.

 

10. DataBinding

Inherits from ObservableObject which implemented INotifyPropertyChanged.

Or implement INotifypropertychanged yourself.

Or register a change event for each property in bound type - less cost and good performance and writting more code.

 

11. Navigation between page

One DataContext for a view (Window/Frame/Page), in order to sync, can set Frame DataContext to page in handler frame_loaded

12. DataTemplate, ControlTemplate and UserControl

DataTemplate - apply visual looking to data type where it appears by placeholder of ContentControl

ControlTemplate - redefine or customize a standard control, like button. used as resource by view.

UserControl - organize sub controls together with logic, used as independent component.

13. uid, key and name

uid - for G11N

key - identifier for reference a resource

name - reference for logic in code or xaml (targettype, elementname)

14. Triggers

Trigger - trigger by properties of control own

DataTrigger - can use binding to bind property of other control, or to property in code

EventTrigger - trigger by event like mouseover, to trigger a series of animation. Only EventTrigger can reside in control tag, while Trigger and DataTrigger need to be reside in style or inner style.

15. scroll stackpanel

stackpanel not scrollable, can use scrollviewer to wrap stackpanel to achieve.

Stackpanel not good for vertical layout as it exceeds may parent boundary.

16. SelectedValue SelectedPath and SelectedItem

SelectedValue - binding to variable

SelectedPath - indicates which property of the selected value bound to of the item, e.g. item.propertypath

SelectedItem - the whole item of selected.

17. Auto VS *

Auto - acuuires as much as needed, just needed, may exceeds parent boundary.

Star (* ) - aquires all available, not exeeding

18. ItemsPanel

complex control like listview, tabcontrol has itemsPanel in its implementation, you can override ItemsPanel if needed.