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
	
	* Change the StackPanel to a Grid ('hg up 16')
	* 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>
	* Explain default orientation is Vertical ('hg up 23')

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

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

	* Talk about why the buttons turn weird when you mouse over them, add a normal button ('hg up 62')
	        <Button Name="Button" Grid.Row="0" Grid.Column="1" Height="50" Width="100">Normal Button</Button>

	* Open Meme app, show basic functionality ('hg up 65')
	* Use glass button template ('hg up 66')
		- 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
	* Show the use of Triggers to change the button on MouseOver ('hg up 67')
	
Animation
	* Show the use of animation for the Button Press ('hg up