Source

OKCDG_WPF / Presentation / coding_note_card.txt

Full commit
coding note card
----------------
XAML
	* Create New WPF Solution
	* Show MainWindow.xaml and MainWindow.xaml.cs
	* Explain the xml syntax and how each xml element is an instance
	* Change Title
	* Run it
	
	* Add a StackPanel
	* Add a Button with Text "Clear" and a TextBox with text "Try to clear me" in it
	* Run it
	
	* Show adding a click handler to the button
	* Give the textbox a name
	* Call .Clear() on the TextBox in the click handler
	* Run it
	
	* Show the Orientation property of StackPanel
	* Give the Stackpanel a name and show modifying the Orientation in code
	* Run it
	
	* Take out the Orientation codes
	* Show property-element syntax to set the orientation
	* Run it
	
	* Show using the property-element syntax to add a background with <LinearGradientBrush> and <GradientStops>
	
        <StackPanel.Background>
            <LinearGradientBrush>
                <GradientStop Offset="0.0" Color="Red"/>
                <GradientStop Offset="0.5" Color="Purple"/>
                <GradientStop Offset="1.0" Color="Blue"/>
            </LinearGradientBrush>
        </StackPanel.Background>
	* Run it
		
	* Show changing the TextBox opacity
	
	* ('hg up 16') Change the StackPanel to a Grid
	* Show how the children of the Grid get new AttachedProperties because they're in the container

Layout
	* Create new Solution
	* Put a StackPanel in the Grid
	* Add some labels
            <Label Background="Red" MaxWidth="200">Red</Label>
            <Label Background="Blue" MaxWidth="200">Blue</Label>
            <Label Background="Yellow" MaxWidth="200">Yellow</Label>
            <Label Background="Green" MaxWidth="200">Green</Label>
	* ('hg up 23') Explain default orientation is Vertical

	* Change Grid to StackPanel
	* ('hg up 24') Clone the StackPanel and change the orientation of the bottom one to Horizontal
	
	* Duplicate labels in top stackpanel until 	overflow is demonstrated
	* ('hg up 25') Run it and show how resizing will bring the overflow items into view
	
	* ('hg up 26') Add WrapPanel and clone the four Labels until the wrapping is demonstrated
	
	* Remove all but four labels and change parent container to Grid
	* Show how the attached properties work to position things in the different grid cells
	* ('hg up 27') Run it and show how the children expand to fill the cells
	
	* Remove the attached properties and change the Grid to a DockPanel
	* ('hg up 28') Show how the attached properties work to dock the labels to different sides
	
	* Remove the attached properties and change the DockPanel to a Canvas
	* Show how the attached properties position things absolutely
	* ('hg up 29') Run it and show how the resizing works

Routed Events
	* Create new solution
	* Put handlers on the Window and Grid and add a Lable inside the grid
	    <Grid Background="Red" MouseDown="Middle_MouseDown">
			<TextBlock Background="Purple" Height="50" Width="50" PreviewMouseDown="Front_MouseDown">Front</TextBlock>
		</Grid>
		
        private void Back_MouseDown(object sender, MouseButtonEventArgs e)
        {
            Console.WriteLine("Back");
        }

        private void Middle_MouseDown(object sender, MouseButtonEventArgs e)
        {
            Console.WriteLine("Middle");
        }

        private void Front_MouseDown(object sender, MouseButtonEventArgs e)
        {
            Console.WriteLine("Front");
        }
	* ('hg up 37') Run it and demonstrate how the events bubble
	
	* Change to PreviewMouseDown for the three event handlers
	* ('hg up 38') Run it and demonstrate how the tunneling happens
	
	* Change the Window's handler method to set e.Handled to true
	* ('hg up 39') Run it and demonstrate how the event tunneling stops
	
Commands
	* ('hg up 43') Create solution with built-in commands
	* ('hg up 44') Create a custom command
	
Styles
	* ('hg up 54') Show Music app, and point out duplication
	* ('hg up 55') Show using a Style by key for the Grids to share the margin property
	* ('hg up 56') Show using a Style by TargetType to take care of the out of control labels
	* ('hg up 57') to get styled "Focusable" for the Buttons
	* ('hg up 59') Show using styles for a complex property
	
Control Templates
	* Show expanding the Visual Tree in the debugger

	* ('hg up 62') Talk about why the buttons turn weird when you mouse over them

	* ('hg up 65') Open Meme app, show basic functionality
	* ('hg up 66') Use glass button template
		- Comment the entire template out and show that the button no longer has any UI
		- Explain structure of ControlTemplate
		- Talk about ContentPresenter
	* talk about why the button doesn't change on MouseOver
	* ('hg up 67') Show the use of Triggers to change the button on MouseOver
	
Animation
	* ('hg up 73') Show the use of animation for the IsPressed event