{"id":532,"date":"2014-08-12T14:15:56","date_gmt":"2014-08-12T14:15:56","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=532"},"modified":"2015-08-10T07:06:22","modified_gmt":"2015-08-10T07:06:22","slug":"notes-from-sams-teach-yourself-wpf-in-24-hours","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/books\/programming\/notes-from-sams-teach-yourself-wpf-in-24-hours\/","title":{"rendered":"Notes from Sams Teach Yourself WPF in 24 hours"},"content":{"rendered":"

This is the new section that I’ll be posting in Programming<\/a>\u00a0category (parent Books); whenever I read a book I always take notes, so here they are now for easier access and search.<\/p>\n

All in all I gave this book<\/a> 5\/5 in my Shelfari account<\/a>\u00a0as I think that it’s great,\u00a0for beginners especially. This StackOverflow question<\/a> may be useful if you\u2019re searching for a good book on learning WPF.<\/p>\n

WPF<\/strong> is an API for building\u00a0graphical user interfaces (UI) for desktop applications with the .NET Framework.<\/p>\n

WPF differs\u00a0fundamentally in that it builds on top of DirectX<\/strong>.\u00a0It also means that WPF will take advantage of hardware acceleration when\u00a0it is available.<\/p>\n

Graphics in WPF are vector<\/strong> based, in contrast to raster<\/strong> based.\u00a0A general rule of thumb is that vector graphics are good for geometrical<\/strong> or cartoonish\u00a0images and that raster is better for photographs<\/strong> and realistic images.<\/p>\n

There\u00a0are two types of templates in WPF: control<\/strong> templates and data<\/strong> templates.<\/p>\n

WPF requires the\u00a0.NET Framework 3.0 or later.<\/p>\n

XAML<\/strong> (pronounced zammel) is the language used for creating user interfaces in WPF.<\/p>\n

When you create a WPF application with Visual Studio<\/strong>, the XAML used in the application\u00a0is compiled into the resulting executable.<\/p>\n

Element<\/strong> in XAML is an instance<\/strong> of an object and attributes<\/strong> are\u00a0properties<\/strong> on that object.<\/p>\n

x:Name<\/strong> is not a property\u00a0on the Button class. Instead, it\u2019s a special attribute that provides a unique identifier\u00a0<\/strong>for the object for accessing it in code.\u00a0It is important to understand that any XAML element you want to\u00a0reference, in code or elsewhere in the XAML, must have a unique value for x:Name.\u00a0It\u2019s pretty easy to get into trouble using the Name property, though, and unless you\u00a0have a specific need, we recommend sticking with x:Name. It\u2019s the convention that\u00a0is generally adopted.<\/p>\n

The child element<\/strong> is referred to as a property element. Property elements take the\u00a0form of <ClassName.PropertyName \/><\/strong>.<\/p>\n

<Button Background=\u201d{StaticResource ResourceKey=myColor}\u201d\u00a0Content=\u201dClick Me\u201d \/>
\nMarkup extensions<\/strong> are indentified by the presence of curly brackets ({}<\/strong>)<\/p>\n

App.xaml<\/strong> represents the application itself. It is not visual, and it is primarily used to\u00a0store resources that will be used throughout an application. App.xaml also defines\u00a0which \u00a0window opens when the application launches.<\/p>\n

MainWindow.xaml<\/strong> is the main window for the application. Its markup contains all the\u00a0visual elements that represent the application on the screen, as well as declaring our\u00a0application\u2019s behavior.<\/p>\n

The concept of partial classes<\/strong> was introduced with .NET 2.0. The essential idea is\u00a0that a single class can be defined across multiple files. Each file contains a portion\u00a0of the class. The files can even be of different file types; such as .cs and\u00a0.xaml. The compiler is \u00a0responsible for dynamically combining the code into a\u00a0single class as it is compiled.<\/p>\n

Refactoring<\/strong> code means that you\u00a0improve the maintainability of the code without changing the behavior.<\/p>\n

Margin<\/strong>, present on all FrameworkElements, represents the\u00a0amount of space around the outside of the element. Padding<\/strong> –\u00a0amount of space\u00a0inside itself.<\/p>\n

Every Panel<\/strong> has a Children collection. This collection can\u00a0be used to add or remove controls from the panel\u2019s layout at runtime.<\/p>\n

StackPanel<\/strong> organizes its child elements by stacking them one on top of the other. StackPanel also has an Orientation property that can be set to Horizontal,\u00a0causing the panel to stack its children from left to right.<\/p>\n

DockPanel<\/strong> is capable of attaching its children to any of its four sides and is often\u00a0used as the root layout control of an application\u2019s UI.<\/p>\n

The Grid<\/strong> is WPF\u2019s all-purpose layout panel. It can achieve most of the same behavior\u00a0as the previous controls and much more. This power comes with a price; the\u00a0requirement of \u00a0additional XAML and more attached properties.<\/p>\n

<Grid ShowGridLines=\u201dTrue\u201d TextBlock.FontSize=\u201d20\u201d>\r\n    <Grid.RowDefinitions>\r\n        <RowDefinition \/>\r\n        <RowDefinition \/>\r\n    <\/Grid.RowDefinitions>\r\n    \r\n    <Grid.ColumnDefinitions>\r\n\t<ColumnDefinition \/>\r\n\t<ColumnDefinition \/>\r\n    <\/Grid.ColumnDefinitions>\r\n\r\n    <Button Content=\u201d0,0\u201d \/>\r\n    <Button Grid.Column=\u201d1\u201d Content=\u201d0,1\u201d \/>\r\n    <Button Grid.Row=\u201d1\u201d Content=\u201d1,0\u201d \/>\r\n    <Button Grid.Row=\u201d1\u201d Grid.Column=\u201d1\u201d Content=\u201d1,1\u201d \/>\r\n<\/Grid><\/pre>\n
<ColumnDefinition Width=\u201d34\u201d \/>\r\n<ColumnDefinition Width=\u201d1.5*\u201d \/>\r\n<ColumnDefinition Width=\u201d2*\u201d \/>\r\n<ColumnDefinition Width=\u201dauto\u201d \/>\r\n<\/pre>\n
In this case, the first column would be 34 pixels wide, the last column would\u00a0auto size to content and the middle columns would split the remaining space\u00a0with the ratio 1.5:2.<\/p>\n
The GridSplitter<\/strong> is a special control capable of letting a user resize rows or\u00a0columns of a Grid at runtime.<\/p>\n
WrapPanel<\/strong> is like a StackPanel, but\u00a0it has the ability to \u201cwrap\u201d what it is stacking to the next line or column if it runs\u00a0out of space.<\/p>\n
Canvas<\/strong> does not add any special dynamic layout behavior to its\u00a0child controls. A canvas must have an exact Width and Height, and all its child elements\u00a0must have an exact size and position as well. Canvas arranges controls at\u00a0strict Left (x) and Top (y) positions using attached properties.\u00a0Although most panels will size to fit their children, if no size is declared for a\u00a0Canvas it will collapse to zero.<\/p>\n
Decorators – Border<\/strong> and Viewbox<\/strong>.<\/p>\n
A Panel has a collection of Children that it arranges according to various\u00a0rules, based on the type of panel. A Decorator, on the other hand, has only\u00a0one Child to which it applies some additional set of behavior.<\/p>\n
\u00a0TextBlock<\/strong>\u00a0has many options (note LineBreak for, well, new\u00a0line):<\/p>\n
<TextBlock FontSize=\u201d14\u201d TextWrapping=\u201dWrap\u201d>\r\n    <Bold><Italic>Instructions:<\/Italic><\/Bold>\r\n    <LineBreak \/>\r\n    Select a <Underline>font<\/Underline> to view from the list\r\n    <Italic>below<\/Italic>.\r\n    <Span FontSize=\u201d10\u201d>You can change the text by typing in the region at the bottom.<\/Span>\r\n<\/TextBlock><\/pre>\n
Allow ENTER, TAB and wrap:<\/p>\n
<TextBox x:Name=\"additionalNotes\"\r\n                 Grid.Row=\"3\"\r\n                 Grid.Column=\"1\"\r\n                 MinLines=\"5\"\r\n                 AcceptsReturn=\"True\"\r\n                 AcceptsTab=\"True\"\r\n                 TextWrapping=\"Wrap\" \/><\/pre>\n
In <Window definition make a habit of adding this:<\/p>\n
FocusManager.FocusedElement=\u201d{Binding ElementName=firstName}\u201d<\/pre>\n
Use Label<\/strong> rather than TextBlock<\/strong> for forms<\/strong> as they provide shortcuts if you press Alt on the keyboard. In the listing below, the F would be underlined when Alt would be pressed.<\/p>\n
<Label Content=\"_First Name:\" Target=\"{Binding ElementName=firstName}\" \/><\/pre>\n
Using the tooltip:<\/p>\n
<TextBox x:Name=\"SampleText\" DockPanel.Dock=\"Bottom\" MinLines=\"4\" Margin=\"8 0\" TextWrapping=\"Wrap\">\r\n            <TextBox.ToolTip>\r\n                <TextBlock>\r\n\t\t\t\t\t<Italic Foreground=\"Red\">Instructions: <\/Italic>\r\n\t\t\t\t\tType here to change the preview text.\r\n                <\/TextBlock>\r\n            <\/TextBox.ToolTip>\r\n\r\n            The quick brown fox jumps over the lazy dog.\r\n<\/TextBox><\/pre>\n
Data binding<\/strong> is a means of connecting the elements of a user interface with the underlying\u00a0data that the application is interested in. Data binding is declarative rather than imperative.\u00a0Declarative<\/strong> means that instead of writing a series of commands to be executed, you\u00a0describe the relation that the data has to the elements in the UI.<\/p>\n
Markup extensions are identified by curly brackets ({}), and a data binding extension\u00a0always begins with the word Binding<\/strong>.<\/p>\n
Two way binding:<\/p>\n
<TextBox Text=\"{Binding ElementName=mySlider,Path=Value,Mode=TwoWay}\" \/>\r\n<Slider x:Name=\"mySlider\" Minimum=\"0\" Maximum=\"100\" TickFrequency=\"1\" IsSnapToTickEnabled=\"True\"\/><\/pre>\n
{x:Static Fonts.SystemFontFamilies}<\/strong> – this markup extension is used for referencing static \u00a0value members on a class (fields, properties, constants, and enumeration values).<\/p>\n
The WPF\u00a0property system allows properties to participate in data binding, styling, animation,\u00a0and several other exciting features. A property that is registered with the WPF property\u00a0system is called a dependency property.\u00a0A property must be a dependency \u00a0property to be the target of a data binding.<\/p>\n
<TextBox Text=\u201d{Binding Path=FirstName,Mode=TwoWay}\u201d Margin=\u201d4\u201d\/>\r\n\r\npublic Window1()\r\n{\r\n    InitializeComponent();\r\n    DataContext = new Person(); \/\/new class with only FirstName property\r\n}<\/pre>\n
Remember, WPF automatically looks for an event based on the property\u2019s\u00a0name.<\/p>\n
public string FirstName {get; set;}\r\n\r\npublic event EventHandler FirstNameChanged;\r\nprivate void OnFirstNameChanged()\r\n{\r\n    if (FirstNameChanged != null)\r\n        FirstNameChanged(this, EventArgs.Empty);\r\n}<\/pre>\n
For dynamic size of the text<\/strong> inside the\u00a0TextBlock<\/strong>, wrap it with a ViewBox<\/strong>, but without any additional sizes (width, height, font) set:<\/p>\n
<Viewbox>\r\n    <TextBlock TextWrapping=\"Wrap\" Text=\"Some Text\" \/>\r\n<\/Viewbox><\/pre>\n
XAML application, FontViewer for example, can work in IE if you change Window tag to Page<\/strong> and remove the IntegerUpDown control.<\/p>\n
User controls<\/strong> are similar to windows and pages. They allow you to easily define your\u00a0own controls that can be reused throughout your application.\u00a0Do not confuse them with \u00a0custom controls. Custom controls<\/strong> are another way to\u00a0create reusable elements for the UI, but I do not recommend them for a newcomer\u00a0to WPF.<\/p>\n
Open MainWindow.xaml and add the following Xml Namespace declaration to\u00a0the Window: xmlns:local=\u201dclr-namespace:TextEditor\u201d in order to be able to load user controls like this:<\/p>\n
<local:TextEditorToolbar x:Name=\u201dtoolbar\u201d\u00a0DockPanel.Dock=\u201dTop\u201d \/><\/pre>\n
A TextRange<\/strong> represents a concrete\u00a0selection of content within a document.<\/p>\n
_currentFile = dlg.FileName;\r\nusing (Stream stream = dlg.OpenFile())\r\n{\r\n    TextRange range = new TextRange(\r\n        _textBox.Document.ContentStart,\r\n        _textBox.Document.ContentEnd\r\n    );\r\n    \r\n    range.Load(stream, DataFormats.Rtf);\r\n}<\/pre>\n
An application in WPF consists of many elements in a tree.\u00a0If a user clicks the Image in our preceding example, WPF would route<\/strong> the event<\/strong>\u00a0along the tree of elements until a handler was found. If no handler is implemented,\u00a0the event continues beyond the Border all the way to the root element (which can\u00a0be a Window or a Page).<\/p>\n
Routed events are handled the same way except that the basic signature uses a
\nRoutedEventArgs.<\/p>\n
void Handle_RoutedEvent(object sender, RoutedEventArgs e)<\/pre>\n
So how does PreviewKeyDown differ from the KeyDown event, which is also owned by
\nUIElement? Both of these are routed events<\/strong>, but the difference between the two is that one bubbles\u00a0and the other tunnels. Remember we mentioned earlier that bubbling<\/strong> means\u00a0the event is moving up toward the root element, and tunneling<\/strong> means the event is\u00a0moving down toward its origin. The prefix Preview is a convention adopted in WPF\u00a0to show that an event is a counterpart to another event. Thus PreviewKeyDown is\u00a0the counterpart to KeyDown.\u00a0When you press a key with an element in focus, first the PreviewKeyDown event is\u00a0raised by the root element and tunnels down the tree to the actual element that was
\nin focus; then the KeyDown event is raised and bubbles back up to the root.<\/p>\n
In WPF, a\u00a0command<\/strong> is a function or action that can be bound to an input gesture.\u00a0WPF binds the EditingCommands. ToggleBold command to the keyboard\u00a0gesture Ctrl+B by default.<\/p>\n
<ToggleButton x:Name=\u201dboldButton\u201d Command=\u201dEditingCommands<\/strong>.ToggleBold\u201d ToolTip=\u201dBold\u201d><\/pre>\n
<MenuItem Header=\u201d_Edit\u201d>\r\n    <MenuItem Command=\u201dApplicationCommands<\/strong>.Undo\u201d \/>\r\n    <MenuItem Command=\u201dApplicationCommands.Redo\u201d \/>\r\n\r\n    <Separator \/>\r\n\r\n    <MenuItem Command=\u201dApplicationCommands.Cut\u201d \/>\r\n    <MenuItem Command=\u201dApplicationCommands.Copy\u201d \/>\r\n    <MenuItem Command=\u201dApplicationCommands.Paste\u201d \/>\r\n    <MenuItem Command=\u201dEditingCommands.Delete\u201d \/>\r\n<\/MenuItem><\/pre>\n
<Window.InputBindings>\r\n    <MouseBinding Gesture=\u201dControl+WheelClick\u201d Command=\u201dApplicationCommands.SaveAs\u201d \/>\r\n<\/Window.InputBindings><\/pre>\n
<Window.CommandBindings>\r\n    <CommandBinding Command=\u201dApplicationCommands.New\u201d Executed=\u201dNewDocument\u201d \/>\r\n<\/Window.CommandBindings><\/pre>\n
<Window.InputBindings>\r\n    <KeyBinding Key=\u201dS\u201d Modifiers=\u201dShift\u201d Command=\u201dApplicationCommands.SaveAs\u201d \/>\r\n<\/Window.InputBindings><\/pre>\n
We\u00a0have talked about dependency properties<\/strong> before, but have not detailed how to create
\nthem. We typically use this technique only when we need a property on a\u00a0Window, UserControl, or custom control that must support data binding or other\u00a0FrameworkElement-related features, such as animation or styling. The typical procedure\u00a0for creating a dependency property is to declare a public, static field using
\nDependencyProperty.Register. It is advised that you append the word\u00a0\u201cProperty\u201d onto the field name. There are several overloads of the Register\u00a0method, but at a minimum you must declare the actual property name, type, and\u00a0owning type. You should then create instance getters and setters by using the\u00a0static GetValue and SetValue methods inherited from DependencyObject. Use\u00a0your dependency property\u2019s field as the key to these \u00a0methods.<\/p>\n
Use Path.Combine<\/strong> to safely and correctly build up directory and file paths.<\/p>\n
All elements that are renderable<\/strong> must inherit from Visual<\/strong>.<\/p>\n
MVC<\/strong>, despite its\u00a0popularity, is commonly misunderstood. This may be because it tends to manifest\u00a0itself differently in different scenarios\u2014that is, web versus desktop applications.<\/p>\n
Controllers<\/strong> traditionally functioned as mediators between the human and the\u00a0application by handling user input from the mouse or keyboard.\u00a0Controller doesn\u2019t seem\u00a0to fit exactly with modern UI toolkits like WPF. Very rarely<\/strong> would one need to write\u00a0code to manually handle user input.\u00a0What is really needed is an application-centric component that
\ncan mediate between the View and the Model. This component would be capable of
\nresponding to View interactions and translating those into application commands.
\nIn the context of a contact manager, these commands would be actions like
\nSaveContact, DeleteContact, Search, and the like.<\/p>\n
The mismatch<\/strong> between the MVC pattern and modern UI frameworks has been recognized\u00a0by many people. Over time a new pattern called Model-View-Presenter<\/strong> has\u00a0evolved from MVC.<\/p>\n
Start a new project and add the following folders to the solution: Model<\/strong>, Presenters<\/strong>, Resources<\/strong>,\u00a0UserControls<\/strong> and Views<\/strong>.<\/p>\n
<TextBlock Text=\"Contacts\" FontSize=\"14\" FontWeight=\"Bold\">\r\n    <TextBlock.LayoutTransform>\r\n        <RotateTransform Angle=\"90\" \/>\r\n    <\/TextBlock.LayoutTransform>\r\n<\/TextBlock><\/pre>\n
The Expander<\/strong> is a simple control whose primary purpose is to allow the user to collapse\u00a0or expand a named region of the interface.<\/p>\n
To\u00a0serialize to disk\u00a0.NET requires the [Serializable]<\/strong> attribute on the classes.<\/p>\n
The important part of a repository<\/strong> is that it abstracts away the actual data store<\/strong> so\u00a0that other parts of the application are able to work with a high-level API and not\u00a0concern themselves with how the data is stored.<\/p>\n
In a typical application, there is a need for an Application Controller or Application\u00a0Presenter<\/strong>. This special type of presenter provides common application-level functionality\u00a0to other presenters and manages various other cross-presenter issues.<\/p>\n
This technique is known as\u00a0constructor injection<\/strong> and is a specific type of dependency injection<\/strong>. DI is a technique\u00a0that is commonly used to help enforce the principle of Separation of\u00a0Concerns (SoC<\/strong>).<\/p>\n
WPF uses a special type called a ResourceDictionary<\/strong> to store reusable \u201cpieces\u201d of an\u00a0application.\u00a0Everything that inherits from FrameworkElement has a Resources property.\u00a0Colors<\/strong> cannot be applied to most WPF element properties like Background or
\nForeground. These properties require<\/strong> the use of a Brush<\/strong>.<\/p>\n
<SolidColorBrush x:Key=\u201dbrownBrush\u201d Color=\u201d{StaticResource brownColor}\u201d \/>\r\n\r\n<Color x:Key=\u201dbrownColor\u201d>#FF513100<\/Color><\/pre>\n
You will recall from earlier hours that Binding is a markup extension. Binding<\/strong>,\u00a0along with StaticResource<\/strong>, make up the two most common extensions that you\u00a0will use in WPF.<\/p>\n
Refactoring<\/strong> the Resource files<\/strong>; in App.xaml instead of having all the mumbo jumbo, refactor to another file:<\/p>\n
<ResourceDictionary>\r\n    <ResourceDictionary.MergedDictionaries>\r\n        <ResourceDictionary Source=\u201dResources\\ColorsAndBrushes.xaml\u201d \/>\r\n    <\/ResourceDictionary.MergedDictionaries>\r\n<\/ResourceDictionary><\/pre>\n
Simply put, DynamicResource<\/strong> allows the resource to change<\/strong>\u00a0after the point of reference, whereas StaticResource<\/strong> does not<\/strong>. This most often\u00a0applies when you\u2019re using system resources. For example, if you wanted to use a\u00a0color from SystemColors, you would use a DynamicResource. This allows for the\u00a0scenario where the user changed the system color theme while your application was\u00a0running. If a DynamicResource was used, your application would update its colors\u00a0on-the-fly whereas they would remain the same with a StaticResource.\u00a0Because of\u00a0the dynamic nature of the so-named resource, it is more resource intensive and less\u00a0performant than StaticResource. You should prefer to use StaticResource and\u00a0fall back to DynamicResource only when you need the special \u00a0capabilities it offers.<\/p>\n
A Style resource<\/strong> is a special case because its key can be implicitly based on its\u00a0TargetType value.<\/p>\n
<Style x:Key=\u201dheader\u201d TargetType=\u201d{x:Type Border}\u201d>\r\n    <Setter Property=\u201dBackground\u201d Value=\u201d{StaticResource darkBlueBrush}\u201d \/>\r\n<\/Style>\r\n\r\n<Border DockPanel.Dock=\u201dTop\u201d&nbsp;Style=\u201d{StaticResource header}\u201d><\/pre>\n
WPF has a simple facility for letting you inherit styles\u00a0one from another by using\u00a0the BasedOn<\/strong> property:<\/p>\n
<Style x:Key=\u201dbaseControlStyle\u201d TargetType=\u201d{x:Type Control}\u201d>\r\n    <Setter Property=\u201dFontFamily\u201d Value=\u201dArial\u201d \/>\r\n    <Setter Property=\u201dFontSize\u201d Value=\u201d12\u201d \/>\r\n<\/Style>\r\n\r\n<Style TargetType=\u201d{x:Type Label}\u201d BasedOn<\/strong>=\u201d{StaticResource baseControlStyle}\u201d>\r\n    <Setter Property=\u201dHorizontalAlignment\u201d Value=\u201dRight\u201d \/>\r\n    <Setter Property=\u201dFontWeight\u201d Value=\u201dBold\u201d \/>\r\n<\/Style><\/pre>\n
By using the BasedOn property you can reference other styles and effectively enable
\nstyle inheritance<\/strong>. The basic constraint is that you must determine a compatible base<\/strong>
\nclass for all the styles involved<\/strong>. In this case, both Button and Label inherit from
\nControl<\/strong>.<\/p>\n
When WPF needs to find a resource, it first examines the Resources of the\u00a0current element. If the resource with the requested Key is not found, WPF will\u00a0look at that element\u2019s parent\u2019s Resources. WPF will follow this pattern until it\u00a0reaches the root element in the UI. If the resource has not yet been found, it\u00a0will look at the Application.Resources.<\/p>\n
Styles can be applied by TargetType or Key. If an element has a specific style\u00a0declared with a key, that style will override all other styles applied to that element.\u00a0If no style is explicitly set, WPF will search for a style defined with a\u00a0matching TargetType and apply it if found within the visible scopes; otherwise,\u00a0the WPF default style will be used. A developer can always override individual\u00a0aspects of a style by explicitly setting the properties on an element.<\/p>\n
Binding headerBinding = new Binding(presenter.TabHeaderPath);\r\n\r\nis equal to\r\n\r\n{Binding Path=TabHeader}\r\n<\/pre>\n
Data templates<\/strong> are one of the two types of templates used in WPF. They provide a\u00a0way to describe how data should be visualized in terms of UI elements. This is different\u00a0from deciding how to render a DateTime value, or formatting a telephone number.<\/p>\n
Styles<\/strong> are the simplest of the three, so if you are able to achieve what you want\u00a0using styles, that is the best choice. Keep in mind that styles allow you to set\u00a0nonvisual properties as well.<\/p>\n
Control templates<\/strong> define the UI elements that compose a given control. That\u2019s a\u00a0lot more complicated than merely setting some properties. You should use control\u00a0templates only when you really need to.<\/p>\n
Data templates<\/strong> resemble control templates in that they allow you to compose UI\u00a0elements. They are often used with list controls to define how items in a list
\nshould be rendered.<\/p>\n
We could\u00a0state that the primary difference between these two base classes is that ContentControl<\/strong>\u00a0supports the rendering of a single<\/strong> item, whereas ItemsControl<\/strong> supports the rendering of\u00a0multiple<\/strong> items.<\/p>\n
The important part is the call to Application.\u00a0Current.Dispatcher.Invoke<\/strong>. This method executes the delegate on the UI thread\u00a0according to the specified DispatcherPriority. This is important because WPF is\u00a0not guaranteed to work properly with events firing on threads other than the UI\u00a0thread.<\/p>\n
Transformations<\/strong>:<\/p>\n
<Canvas Height=\"600\" Width=\"800\">\r\n    <TextBlock Text=\"No Transform\" \/>\r\n        \r\n    <TextBlock Canvas.Left=\"200\" Canvas.Top=\"100\" Text=\"Skew Transform\">\r\n        <TextBlock.RenderTransform>\r\n            <SkewTransform AngleX=\"45\" \/>\r\n        <\/TextBlock.RenderTransform>\r\n    <\/TextBlock>\r\n<\/Canvas><\/pre>\n
When applying multiple transforms by using a TransformGroup<\/strong>, remember that
\nthe order of the transforms can have a strong impact on the result.<\/p>\n
Using a LayoutTransform<\/strong> allows an element to\u00a0be transformed while still playing by the layout rules of the Panel in which it lives.\u00a0WPF has such rich layout capabilities that it would be unfortunate if all transforms\u00a0broke the layout rules. Essentially, a LayoutTransform occurs before a Panel performs\u00a0layout; thus, any transforms that occur are taken into account when the\u00a0Panel arranges its children. A RenderTransform<\/strong> happens independently of the layout\u00a0mechanism.<\/p>\n
Every UIElement has a\u00a0BitmapEffect<\/strong> property that can be used to add various special shader-like effects to\u00a0the element:<\/p>\n
<Button Content=\"Blur\">\r\n    <Button.BitmapEffect>\r\n        <BlurBitmapEffect Radius=\"4\" \/>\r\n    <\/Button.BitmapEffect>\r\n<\/Button><\/pre>\n
Control templates<\/strong>:<\/p>\n
<Window.Resources>\r\n    <Canvas x:Key=\u201dSmiley\u201d Width=\u201d48\u201d Height=\u201d48\u201d>\r\n        <Ellipse Width=\u201d48\u201d Height=\u201d48\u201d Fill=\u201dYellow\u201d \/>\r\n        <Ellipse Width=\u201d8\u201d Height=\u201d8\u201d Canvas.Top=\u201d12\u201d Canvas.Left=\u201d12\u201d Fill=\u201dBlack\u201d\/>\r\n        <Ellipse Width=\u201d8\u201d Height=\u201d8\u201d Canvas.Top=\u201d12\u201d Canvas.Right=\u201d12\u201d Fill=\u201dBlack\u201d \/>\r\n        <Path Data=\u201dM10,30 C18,38 30,38 38,30\u201d Stroke=\u201dBlack\u201d \/>\r\n    <\/Canvas>\r\n<\/Window.Resources>\r\n\r\n<Button HorizontalAlignment=\u201dCenter\u201d VerticalAlignment=\u201dCenter\u201d>\r\n\t<Button.Template>\r\n\t\t<ControlTemplate>\r\n\t\t\t<Border Background=\u201dBlack\u201d Padding=\u201d4\u201d CornerRadius=\u201d4\u201d Child=\u201d{StaticResource Smiley}\u201d \/>\r\n\t\t<\/ControlTemplate>\r\n\t<\/Button.Template>\r\n<\/Button><\/pre>\n
Anytime you\u00a0implement a control template, you\u2019ll have to handle these effects yourself with triggers.<\/p>\n
Templates are composed out of UI elements.\u00a0Templates need to be explicitly told what type of control they are targeting.\u00a0Use the TargetType attribute to do this.\u00a0Templates need to know what to do with the control content. We used the\u00a0ContentPresenter element to handle this for a button.<\/p>\n
In style:<\/p>\n
<Style TargetType=\u201d{x:Type Slider}\u201d>\r\n\t<Setter Property=\u201dTemplate\u201d>\r\n\t\t<Setter.Value>\r\n\t\t\t<ControlTemplate TargetType=\u201d{x:Type Slider}\u201d>\r\n\t\t\t\t<Grid x:Name=\u201droot\u201d>\r\n\t\t\t\t\t<Border Height=\u201d4\u201d CornerRadius=\u201d2\u201d Background=\u201d{StaticResource sliderBg}\u201d>\r\n\t\t\t\t\t<\/Border>\r\n\r\n\t\t\t\t\t<Track x:Name=\u201dPART_Track\u201d>\r\n\t\t\t\t\t\t<Track.Thumb>\r\n\t\t\t\t\t\t\t<Thumb \/>\r\n\t\t\t\t\t\t<\/Track.Thumb>\r\n\t\t\t\t\t<\/Track>\r\n\t\t\t\t<\/Grid>\r\n\t\t\t<\/ControlTemplate>\r\n\t\t<\/Setter.Value>\r\n\t<\/Setter>\r\n<\/Style><\/pre>\n
We can bind elements in a template to the actual\u00a0control:<\/p>\n
<ControlTemplate x:Key=\u201dCircleButton\u201d TargetType=\u201d{x:Type Button}\u201d>\r\n\t<Grid HorizontalAlignment=\u201dCenter\u201d VerticalAlignment=\u201dCenter\u201d MinHeight=\u201d36\u201d MinWidth=\u201d36\u201d>\r\n\t\t<Ellipse Fill=\u201d{TemplateBinding Background<\/strong>}\u201d \/>\r\n\t\t<ContentPresenter \/>\r\n\t<\/Grid>\r\n<\/ControlTemplate><\/pre>\n
In this example, the Fill property on the Ellipse will be set to the Background\u00a0property of the button that the template is applied to.<\/p>\n
It is a common practice to keep a control template flexible through the use of template
\nbinding. The idea is that you create a default style for your controls that sets\u00a0the control template. However, you use template binding and set as many of the properties as possible in the style. That way, you can inherit from the default style,\u00a0overriding specifics as needed, while retaining your control template.<\/p>\n
This data binding:<\/p>\n
{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}<\/pre>\n
is the equivalent of this template binding:<\/p>\n
{TemplateBinding Background}<\/pre>\n
Triggers<\/strong> are a special feature of Style, ControlTemplate, DataTemplate, and\u00a0FrameworkElement.\u00a0Through the careful use of triggers, you can declaratively enable your\u00a0UI and graphics to respond to mouse events, changes in dependency properties, and even\u00a0changes in your application\u2019s data model.<\/p>\n
<ControlTemplate.Triggers>\r\n\t<Trigger Property=\"IsMouseOver\" Value=\"True\">\r\n\t\t<Setter TargetName=\"highlight\" Property=\"Visibility\" Value=\"Visible\" \/>\r\n\t<\/Trigger>\r\n\r\n\t<Trigger Property=\"IsPressed\" Value=\"True\">\r\n\t\t<Setter TargetName=\"highlight\" Property=\"Opacity\" Value=\"0.5\" \/>\r\n\t<\/Trigger>\r\n<\/ControlTemplate.Triggers><\/pre>\n
If multiple triggers alter the\u00a0same UI properties, the last one wins.<\/p>\n
<Style.Triggers>\r\n\t<DataTrigger Binding=\"{Binding Path=IsMuted, ElementName=mediaElement}\" Value=\"True\">\r\n\t\t<Setter Property=\"Visibility\" Value=\"Visible\" \/>\r\n\t<\/DataTrigger>\r\n<\/Style.Triggers><\/pre>\n
EventTrigger<\/strong> is the final type of trigger that WPF currently offers<\/p>\n
<ControlTemplate.Triggers>\r\n\t<EventTrigger RoutedEvent=\u201dUIElement.MouseEnter\u201d>\r\n\t\t<BeginStoryboard>\r\n\t\t\t<Storyboard Storyboard.TargetName=\u201dchromeEdge\u201d Storyboard.TargetProperty=\u201dRenderTransform.Angle\u201d>\r\n\t\t\t\t<DoubleAnimation To=\u201d90\u201d Duration=\u201d0:0:0.10\u201d \/>\r\n\t\t\t<\/Storyboard>\r\n\t\t<\/BeginStoryboard>\r\n\t<\/EventTrigger>\r\n\r\n\t<EventTrigger RoutedEvent=\u201dUIElement.MouseLeave\u201d>\r\n\t\t<BeginStoryboard>\r\n\t\t\t<Storyboard Storyboard.TargetName=\u201dchromeEdge\u201d Storyboard.TargetProperty=\u201dRenderTransform.Angle\u201d>\r\n\t\t\t\t<DoubleAnimation To=\u201d0\u201d Duration=\u201d0:0:0.10\u201d \/>\r\n\t\t\t<\/Storyboard>\r\n\t\t<\/BeginStoryboard>\r\n\t<\/EventTrigger>\r\n<\/ControlTemplate><\/pre>\n
Notice\u00a0the important RoutedEvent<\/strong> property, which is used to declare which event will trigger\u00a0the action.<\/p>\n
Sometimes a situation arises in which a simple Trigger can\u2019t express the conditions\u00a0under which a collection of setters should be applied. For these scenarios, WPF\u00a0provides the MultiTrigger<\/strong> and the MultiDataTrigger<\/strong>. These represent more\u00a0advanced versions of Trigger and DataTrigger, respectively.\u00a0Instead of having a\u00a0simple Property or Binding and a Value, they each have a collection called\u00a0Conditions<\/strong>. To leverage this functionality, you add multiple Condition instances to\u00a0this collection.<\/p>\n
<DataTemplate.Triggers>\r\n\t<MultiDataTrigger>\r\n\t\t<MultiDataTrigger.Conditions>\r\n\t\t\t<Condition Binding=\u201d{Binding Organization}\u201d Value=\u201dBlue Spire Consulting, Inc.\u201d \/>\r\n\t\t\t<Condition Binding=\u201d{Binding Address.City}\u201d Value=\u201dTallahassee\u201d \/>\r\n\t\t<\/MultiDataTrigger.Conditions>\r\n\t\r\n\t\t<MultiDataTrigger.Setters>\r\n\t\t\t<Setter TargetName=\u201dborder\u201d Property=\u201dBackground\u201d Value=\u201dBlue\u201d \/>\r\n\t\t<\/MultiDataTrigger.Setters>\r\n\t<\/MultiDataTrigger>\r\n<\/DataTemplate.Triggers><\/pre>\n
At its root, an animation<\/strong>\u00a0is a series of images shown in rapid succession to give the illusion of motion.\u00a0The individual images in an animation are referred to as frames. The number of frames\u00a0per second (fps) is called the frame<\/strong> rate<\/strong>. Most television and film is somewhere between\u00a020 and 30fps. The higher the frame rate, the smoother the animation will seem. Computer\u00a0graphics generally target a frame rate around 60fps.\u00a0Key frames<\/strong> are
\nthe frames that represent significant points in the motion, such as the start and \u00a0end\u00a0points. All the remaining frames, those in between the key frames, are called tweens<\/strong>.\u00a0A timeline<\/strong> is a segment of\u00a0time; it has a beginning point and duration.<\/p>\n
<Window x:Class=\"LearningAnimation.MainWindow\" xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\" xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\" Title=\"Window1\" Height=\"300\" Width=\"300\">\r\n    <Window.Triggers>\r\n        <EventTrigger RoutedEvent=\"Window.Loaded\">\r\n            <BeginStoryboard>\r\n                <Storyboard Storyboard.TargetName=\"Ball\" Storyboard.TargetProperty=\"(Canvas.Left)\">\r\n                    <DoubleAnimation By=\"300\" Duration=\"0:0:07.5\"\/>\r\n                <\/Storyboard>\r\n            <\/BeginStoryboard>\r\n        <\/EventTrigger>\r\n    <\/Window.Triggers>\r\n    \r\n    <Canvas>\r\n        <Ellipse x:Name=\"Ball\" Width=\"20\" Height=\"20\" Fill=\"Red\" Canvas.Top=\"50\" Canvas.Left=\"0\"><\/Ellipse>\r\n    <\/Canvas>\r\n<\/Window><\/pre>\n
The Storyboard has a single child. It\u2019s a DoubleAnimation because Canvas.Left is\u00a0of type double.<\/p>\n
<DataTemplate x:Key=\"PictureDataTemplate\">\r\n        <Image Source=\"{Binding Path=Thumbnail}\" Width=\"75\" Height=\"75\" Margin=\"4\">\r\n            <Image.Triggers>\r\n                <EventTrigger RoutedEvent=\"Image.MouseEnter\">\r\n                    <BeginStoryboard>\r\n                        <Storyboard Storyboard.TargetProperty=\"Width\">\r\n                            <DoubleAnimation By=\"25\" Duration=\"0:0:0.25\" \/>\r\n                        <\/Storyboard>\r\n                    <\/BeginStoryboard>\r\n                <\/EventTrigger>\r\n                <EventTrigger RoutedEvent=\"Image.MouseLeave\">\r\n                    <BeginStoryboard>\r\n                        <Storyboard Storyboard.TargetProperty=\"Width\">\r\n                            <DoubleAnimation To=\"{TemplateBinding Width}\" Duration=\"0:0:0.25\" \/>\r\n                        <\/Storyboard>\r\n                    <\/BeginStoryboard>\r\n                <\/EventTrigger>\r\n            <\/Image.Triggers>\r\n        <\/Image>\r\n    <\/DataTemplate><\/pre>\n
Very basically a ControlTemplate describes how to display a Control while a DataTemplate \u00a0describes how to display Data.<\/span><\/p>\n
Any element can trigger an animation<\/strong>.\u00a0In addition to this technique, animations can be triggered from styles, control templates,\u00a0and data templates.\u00a0Inside of a Style, you cannot use Storyboard.TargetName. When you create an\u00a0animation in a style, it will always target the element that the style is applied to.\u00a0Likewise, you cannot specify the SourceName on a trigger. On the whole, a storyboard\u00a0inside a style cannot reference dynamic resources or data bind.<\/p>\n
<DoubleAnimation By=\u201d300\u201d AccelerationRatio=\u201d0.4\u201d DecelerationRatio=\u201d0.4\u201d Duration=\u201d0:0:10\u201d\/><\/pre>\n
With this markup, the ball will start at a speed of 0 and accelerate for 4 seconds.\u00a0Then, beginning at the sixth second, it will slow down for 4 seconds.<\/p>\n
<Button x:Name=\"button\" Content=\"mybutton\">\r\n            <Button.Triggers>\r\n                <EventTrigger RoutedEvent=\"Button.Click\">\r\n                    <BeginStoryboard>\r\n                    <Storyboard Storyboard.TargetName=\"Ball\" Storyboard.TargetProperty=\"(Canvas.Top)\">\r\n                        <DoubleAnimation By=\"300\" Duration=\"0:0:07.5\"\/>\r\n                    <\/Storyboard>\r\n                <\/BeginStoryboard>\r\n                <BeginStoryboard>\r\n                    <Storyboard Storyboard.TargetName=\"Ball\" Storyboard.TargetProperty=\"(Canvas.Left)\">\r\n                        <DoubleAnimation By=\"300\"\r\nAccelerationRatio=\"0.4\"\r\nDecelerationRatio=\"0.4\"\r\nDuration=\"0:0:10\"\/>\r\n                    <\/Storyboard>\r\n                <\/BeginStoryboard>\r\n            <\/EventTrigger>\r\n            <\/Button.Triggers>\r\n        <\/Button>\r\n        <Ellipse x:Name=\"Ball\" Width=\"20\" Height=\"20\" Fill=\"Red\" Canvas.Top=\"50\" Canvas.Left=\"0\"><\/Ellipse>\r\n    <\/Canvas><\/pre>\n
 <\/p>\n
<Window.Triggers>\r\n        <EventTrigger RoutedEvent=\"Window.Loaded\">\r\n            <BeginStoryboard x:Name=\"BallStoryboard\">\r\n                <Storyboard Storyboard.TargetName=\"Ball\" Storyboard.TargetProperty=\"(Canvas.Left)\">\r\n                    <DoubleAnimation By=\"300\" Duration=\"0:0:07.5\"\/>\r\n                <\/Storyboard>\r\n            <\/BeginStoryboard>\r\n        <\/EventTrigger>\r\n        <EventTrigger RoutedEvent=\"Button.Click\" SourceName=\"Pause\">\r\n            <PauseStoryboard BeginStoryboardName=\"BallStoryboard\" \/>\r\n        <\/EventTrigger>\r\n        <EventTrigger RoutedEvent=\"Button.Click\" SourceName=\"Resume\">\r\n            <ResumeStoryboard BeginStoryboardName=\"BallStoryboard\" \/>\r\n        <\/EventTrigger>\r\n    <\/Window.Triggers>\r\n    <StackPanel>\r\n        <StackPanel Orientation=\"Horizontal\">\r\n            <Button x:Name=\"Pause\">Pause<\/Button>\r\n            <Button x:Name=\"Resume\">Resume<\/Button>\r\n        <\/StackPanel>\r\n        <Canvas>\r\n            <Ellipse x:Name=\"Ball\" Width=\"20\" Height=\"20\" Fill=\"Red\" Canvas.Top=\"50\" Canvas.Left=\"0\"><\/Ellipse>\r\n        <\/Canvas>\r\n    <\/StackPanel><\/pre>\n
Setting animation in code behind:<\/p>\n
var animation = new ColorAnimation\r\n{\r\nFrom = Colors.Blue,\r\nTo = Colors.Yellow,\r\nDuration = new Duration(TimeSpan.FromSeconds(2))\r\n};\r\nvar button = new Button();\r\nbutton.BeginAnimation(Button.BackgroundProperty,animation);<\/pre>\n
Ortogonality<\/strong>\u00a0– things that are independent of one another.<\/p>\n
Single Responsibility Principle<\/strong>\u00a0– there should never be more than one reason\u00a0for a class to change.<\/p>\n
Separation of Concerns<\/strong>\u00a0– embodies a \u201cdivide and conquer\u201d approach to programming. Rather than having\u00a0huge, complex classes, our system should be built from smaller, more focused\u00a0components that work together.<\/p>\n
Don\u2019t Repeat Yourself<\/strong>\u00a0– the key point is if you find yourself writing the same sort of
\ncode over and over again, there\u2019s something wrong.<\/p>\n
Inversion of Control =>\u00a0The constructor signature is shown next:<\/p>\n
public ApplicationPresenter(Shell view, ContactRepository contactRepository)<\/pre>\n
ApplicationPresenter<\/strong> is dependent<\/strong> on both a Shell<\/strong> view and a\u00a0ContactRepository<\/strong>. It cannot function without these other components, yet it doesn\u2019t\u00a0take the responsibility of creating them<\/strong>. This is called Inversion of Control, often\u00a0abbreviated IoC.<\/p>\n
Dependency<\/strong> Injection<\/strong>\u00a0– the control of dependency creation is inverted because the presenter\u00a0has given up its right to create the components it depends on. It is relying on some\u00a0outside source to hand it the pieces it needs to work. These dependencies are then
\ninjected into the class via the constructor. This is known as Dependency Injection, or
\nDI, and it adds a great deal of flexibility and extensibility to your software design.<\/p>\n
Ya Aren\u2019t Gonna Need It<\/strong>\u00a0– well, you just ain’t so why bother feature-stacking?<\/p>\n","protected":false},"excerpt":{"rendered":"
This is the new section that I’ll be posting in Programming\u00a0category (parent Books); whenever I read a book I always take notes, so here they are now for…<\/p>\n","protected":false},"author":1,"featured_media":603,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[],"class_list":["post-532","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=532"}],"version-history":[{"count":21,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/532\/revisions"}],"predecessor-version":[{"id":1510,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/532\/revisions\/1510"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/603"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}