A bunch of small demo projects on quick starting of WPF programing on Windows. The demos are mainly provided by 'DotNet菜园' from his WPF Introduction series. And I would also add some demos which are useful for me, I hope this would work for you as well.
This visual studio solutions consist of different small projects, following are the brief introduction on each of them.
Mainly demonstrate on how to start the wpf application by code in App.cs rather than using the default App.xaml configuration.
Application level of events capturing in App.xaml.cs, such as capture application exit event.
How to update UI controls in another thread by Dispatcher in sync(Dispatcher.Ivoke) and async(Dispatcher.BeginIvoke) methods.
Canvas layout generated by xaml file and code. Some takeaways:
- Canvas layout would not adjust the position of control within it automatically like most of the other containers
- We could use "Canvas.Right|Left|Top|Bottom" Attachedproperty in control within the canvas to adjust the position manually
- If no attachedproperty is set, the controls would be positioning to the top-left of the canvas
Simple wrappanel layout demo. Wrappanel would organize the controls within in from left to right or from top to bottom automatically, once the controls are out of space in one "row" or "column", it would wrap them and start from another "row" or "column".
Takeaway:
- The controls within the wrappanel would wrap automatically once out of space in "Row" or "Column"
- We could set Orientation="Horizontal|Vertical" of the wrappanel to specify how the controls within it are placed
Simple stackpanel layout demo. Similar to wrappanel, stackpanel would place the controls within it by row or column automatically, but, it would not wrap automatically.
Takeaway:
- Set Orientation="Vertical|Horizontal" to specify the direction of how controls within it are placed
- By default, every control within it would be with the same width(Orientation=Vertical) or height(Orientation=Horizontal) as the stackpanel, it makes the controls like stacking up together, and I think that's why we call it the stackpanel
Simple grid layout demo.
Takeaway:
- Use <Grid.RowDefinitions> and <Grid.ColumnDefinitions> to define how many rows and columns the grid has, and could also specify the height of the row and the width of the column
- <ColumnDefinition Width="*"/>: Use as much space left of the parent control as possible
- <ColumnDefinition Width="139"/>: Set the width of the column to 139 pixels
- <ColumnDefinition Width="auto"/>: Set the width of the column as less space of the parent control as possible
- Use Grid.Row and Grid.Column in controls within grid to specify which row and/or column the control could be placed into.
- Use Grid.ColumnSpan or Grid.RowSpan to specify how many columns or rows the control would span in the grid
Demos on how to use the GridSplitter to split the grid layout. Please be aware of the property of Grid.RowSpan and Grid.ColumnSpan, it'd be quite useful here.
Demo on UniformGrid. It's a simplify version of Grid layout where you could specify the row and columns of it, and there are no attachedproperties of Grid.Row and Grid.Column for the controls within it to be used.
Dockpanel would dock the controls within it by specifying the attachedproperty of DockPanel.Dock, for instance, <Button DockPanel.Dock="Left" /> would dock the button to the left of the parent dockpanel
Takeaway:
- If set the property of LastChildFill for DockPanel to True, the last control within the DockPanel would take up all the space left.
Please try different options of Stretch and StretchDirection properties and then resize the window to view the effect.
There could be only one control within the Border layout, Border is used to set the border and background of the control
Demo on how to use ScrollView to view the content of a Textbox
To demonstrate all the layouts we learnt above
Demo on how to create a customized DependencyProperty in a customized DependencyObject, and how to bind the DependencyProperty to the Label and Textbox control. Once we change the content of the Textbox, the corresponding dependencyproperty would be updated, and the Label would show the changes of it.
Demo on how to create and use of a readonly dependencyproperty
During registering a dependencyproperty, we could pass several callbacks to the register function, once we change the value of the dependencyproperty, those callbacks would be triggerred to validate the changes. Please check the output after click on the button of the demo app, and refer to the blog to get better understanding if necessary.
A more concrete demo on how to use the callbacks of the dependencyproperty to do the validation of the input, and coerce the change of it if the input's not within the valid range.
Simple demo on how to bind the Text of a TextBlock to the selected item of a ListBox. Once the selected item changed, the TextBlock would show the corresponding value selected.
Demo on how different binding modes work.
- OneWay: Select a color item of the listbox, corresponding value and background color of the OneWay binding TextBlock would be changed
- TwoWay: The TwoWay binding TextBox could not only take effect after selecting a color item of the listbox, but also could affect the selection of the listbox after typing in the name of the color in the TextBox backward.
Demo on how to bind the xml data to WPF controls by specifying the XmlDataProvider. Please notice that we use the XPath to get the corresponding value of within the xml file.
Demo on how to bind a normal list of objects(The object class consit of the list are just normal class, does not derived from any other classes) to the WPF controls by specifying ObjectDataProvider property of Control.Resource in xaml.
This demo also shows how to use DataTemplate to display the list of data, please be aware of that.
By using the CollectionViewSource rather than ObjectDataProvider as the data source specified in the xaml, we could be able to specify the sorting order of the data
An overall demo on the binding related knowledges we've leant above.
Demo on basic usage of the Treeview. The code at backend would specify the data source of the treeview by setting the DataContext or ItemSource of the Treeview, then the xaml file would specify how to display the data with HierarchicalDataTemplate property.
Demo on how to apply styles to controls based on resource dictionary, and how to extract the resource dictionary to a separated resource file.
Demo on how to convert the binding value of control to a different format, and how to convert it back.
Demo on how to customize a button by applying the ControlTemplate.
Takeaway:
- If no Key specified, the style resource would be applied to all the same TargetType within the context. For instance, forllowing style would be applied to all button within this page.
<Style TargetType="Button">
<Setter Property="Width" Value="130"/>
<Setter Property="Height" Value="130"/>
</Style>
<ControlTemplate TargetType="Button" x:Key="BtnTemplate">
...
</ControlTemplate>
- Since the style of the button's overriten by the ControlTemplate, we need to provide the ContentControl to bind the Content of the parent button container, in order to display the text correctly.
<ContentControl VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}"/>
Shows different ways on using the DataTemplate on ListBox
Demo on how to use HierarchicalDataTemplate on a TreeView.