Christian Moser's WPF Tutorial.net News and tutorials around the Windows Presentation Foundation en http://www.wpftutorial.net Tue, 28 Feb 2017 04:29:25 +0100 Development Tools moc@zuehlke.com (Christian Moser) <h1>WPF Development Tools</h1> <p>Microsoft provides two development tools for WPF applications. One is <b>Visual Studio</b>, made for developers and the other is <b>Expression Blend </b>made for designers. While Visual Studio is good in code and XAML editing, it has a rare support for all the graphical stuff like gradients, template editing, animation, etc. This is the point where Expression Blend comes in. Blend covers the graphical part very well but it has (still) rare support for code and XAML editing.</p> <p>So the conclusion is that you will need both of them.</p> <h2>Microsoft Visual Studio 2010</h2> <p>Visual Studio is the tool for developers to develop WPF applications. It includes a graphical designer for WPF since version 2008. If you're using Visual Studio 2005 you can install an add-on that enables you to develop WPF applications.</p> <p>Microsoft provides a free Express Edition of Visual Studio that also includes the WPF designer. You can download it from the following URL</p> <a style="padding-left: 10px;" href="http://www.microsoft.com/express/Express-2010/" class="external">Download Microsoft Visual C# 2010 - Express Edition</a><br/> <br/> <img style="padding-left: 200px;" src="images/v2_vs2008.jpg"/> <br/> <h2>Microsoft Expression Blend 3 + Sketch Flow</h2> <p>Expression Blend is the tool for designers. It's part of the Expression Studio, a new tool suite from Microsoft especially created for user experience designers. Blend covers all the missing features of the Visual Studio designer like styling, templating, animations, 3D graphics, resources and gradients.</p> <p>In the latest Version it also includes a powerful prototyping tool called SketchFlow. Expression Blend can open solution files created by visual studio. </p> <a style="padding-left: 10px;" href="http://www.microsoft.com/Expression/try-it/Default.aspx#PageTop" class="external">Download Microsoft Expression Blend 3</a><br/> <br/> <img style="padding-left: 200px;" src="images/v2_blend.jpg" /> <br/> <h2>Other useful tools</h3> <ul> <li><a href="inspector.html">WPF Inspector</a></li> <li><a href="http://blois.us/Snoop/">Snoop (Inspect the Visual Tree of running WPF applications)</a></li> <li><a href="http://karlshifflett.wordpress.com/mole-for-visual-studio/">Mole (Data Visualizer for Visual Studio</a></li> <li><a href="http://karlshifflett.wordpress.com/xaml-power-toys/">XAML Power Toys</a></li> <li><a href="http://windowsclient.net/wpf/perf/wpf-perf-tool.aspx">WPF Performance Suite</a></li> </ul> http://www.wpftutorial.net/wpfdevtools.html Tue, 28 Feb 2017 04:29:25 +01002015-05-26 08:05:14 List of 3rd-Party Controls moc@zuehlke.com (Christian Moser) <h1>WPF - Third Party Controls</h1> <h2>WPF Component Vendors</h2> <ul> <li><a href="http://www.mindscapehq.com/products/wpfelements">Mindscape</a></li> <li><a href="http://www.componentart.com/products/wpf/navigation/">Component Art</a></li> <li><a href="http://www.devexpress.com/Products/NET/Controls/WPF/">DevExpress</a></li> <li><a href="http://www.syncfusion.com/products/user-interface-edition/wpf">SyncFusion</a></li> <li><a href="http://www.infragistics.com/dotnet/netadvantage/wpf.aspx#Overview">Infragistics</a></li> <li><a href="http://xceed.com/pages/TopMenu/Products/ProductSearch.aspx?Lang=EN-CA&Category=0617b4dd-af9a-4e34-a1a1-d1129237d614">Xceed</a></li> <li><a href="http://www.telerik.com/products/wpf.aspx">Telerik</a></li> <li><a href="http://www.actiprosoftware.com/Products/DotNet/WPF/WPFStudio/Default.aspx">Actipro</a></li> <li><a href="http://www.divil.co.uk/net/controls/wpf.aspx">divelements</a></li> <li><a href="http://www.binarymission.co.uk/">Binary Mission</a></li> <li><a href="http://www.e-iceblue.com/">Ice Blue</a></li> </ul> <hr> <table> <tr> <td style="vertical-align: top; width: 300px;"> <h2>Bar Code</h2> <ul> <li><a href="http://www.neodynamic.com/Products/Barcode-WPF/Barcode_wpf_Feature_Details.aspx">Neodynamics BarCode</a></li> <li><a href="http://www.actiprosoftware.com/Products/DotNet/WPF/BarCode/Default.aspx">Actipro BarCode</a></li> </ul> <h2>Data Grids</h2> <ul> <li><a href="http://www.infragistics.com/dotnet/netadvantage/wpf/xamdatagrid.aspx#Overview">Infragistics Data Grid</a></li> <li><a href="http://xceed.com/Grid_WPF_New.html">Xceed Data Grid</a></li> <li><a href="http://www.componentone.com/SuperProducts/GridWPF/ ">Component One Data Grid</a></li> <li><a href="http://www.syncfusion.com/products/user-interface-edition/wpf/grid">Syncfusion Essential Grid</a></li> <li><a href="http://www.telerik.com/products/wpf/gridview.aspx">Telerik RadGridView for WPF</a></li> <li><a href="http://www.componentart.com/products/wpf/datagrid/">ComponentArt DataGrid</a></li> <li><a href="http://www.mindscapehq.com/products/wpfelements/controls/data-grid">Mindscape Datagrid</a></li> </ul> <h2>CAD</h2> <ul> <li><a href="http://code.google.com/p/tf-net/">Topology Framework .NET</a></li> <li><a href="http://www.devdept.com/products/eyeshot/">Eyeshot</a></li> <li><a href="http://www.mono-project.com/GtkSharp">Mono GtkSharp</a></li> <li><a href="http://www.woutware.com/cadlib3.5.html">CadLib 3.5 DWG DXF .NET Library</a></li> <li><a href="http://www.geometros.com/sgcore/review.htm">sgCode</a></li> <li><a href="http://www.seedrawex.com/">SeeDraw</a></li> </ul> <h2>Charts</h2> <ul> <li><a href="http://www.scichart.com/">SCI High Performance Charts</a></li> <li><a href="http://www.infragistics.com/dotnet/netadvantage/wpf/xamchart.aspx#Overview ">Infragistics xamChart</a></li> <li><a href="http://sourceforge.net/projects/swordfishcharts">Swordfish Charts</a></li> <li><a href="http://www.componentone.com/SuperProducts/ChartWPF/ ">Component One Chart</a></li> <li><a href="http://www.visifire.com/">Visifire Chart for WPF and Silverlight</a></li> <li><a href="http://www.codeproject.com/KB/WPF/wpfgraph.aspx">WPF Graph on Code Project</a></li> <li><a href="http://www.codeproject.com/KB/WPF/WPF_3D_Bar_chart_control.aspx">Free 3D Chart</a></li> <li><a href="http://www.codeproject.com/KB/WPF/WPFChart3D.aspx">Free High Performance 3D Chart</a></li> <li><a href="http://dynamicdatadisplay.codeplex.com/">D3 Dynamic Data Display</a></li> <li><a href="http://www.syncfusion.com/products/user-interface-edition/wpf/chart">Syncfusion Essential Chart</a></li> <li><a href="http://www.syncfusion.com/products/user-interface-edition/wpf/gauge">Syncfusion Gauge</a></li> <li><a href="http://www.telerik.com/products/wpf/gauge.aspx">Telerik RadGauge for WPF</a></li> <li><a href="http://www.telerik.com/products/wpf/chart.aspx">Telerik RadChart for WPF</a></li> <li><a href="http://www.componentart.com/products/wpf/charting/">ComponentArt Chart</a></li> <li><a href="http://www.mindscapehq.com/products/wpfelements/controls/wpf-bar-chart">Mindscape Chart</a></li> <li><a href="http://www.softwarefx.com/sfxNetProducts/ChartFX/wpf/">ChartFX for WPF</a></li> <li><a href="http://www.nextwavesoft.com/products/nextwave-chart-for-wpf">NextWave Chart for WPF</a></li> <li><a href="http://www.nextwavesoft.com/products/nextwave-gauge-for-wpf">NextWave Gauge for WPF</a></li> </ul> <h2>Color Picker</h2> <ul> <li><a href="http://www.mindscapehq.com/products/wpfelements/controls/wpf-color-picker">Mindscape Color Picker</a></li> <li><a href="http://www.telerik.com/products/wpf/colorpicker.aspx">Telerik Color Picker</a></li> <li><a href="http://wpfcolorpicker.codeplex.com/">Free Color Picker (CodePlex)</a></li> <li><a href="http://www.componentone.com/SuperProducts/ColorPickerWPF/">Component One Color Picker</a></li> </ul> <h2>Diagram Editors</h2> <ul> <li><a href="http://visualizationtools.net/default/productsoverview/">Orbifold Visualizers</a></li> <li><a href="http://www.syncfusion.com/products/user-interface-edition/wpf/diagram">Syncfusion Essential Diagram Editor</a></li> </ul> <h2>Dialogs and Windows</h2> <ul> <li><a href="http://wpfdialogs.codeplex.com/">Pure WPF FileOpen, FileSave and FolderBrowser Dialogs</a></li> <li><a href="http://www.divil.co.uk/net/controls/sandshellwpf/">divelements Shell</a></li> </ul> <h2>Dock</h2> <ul> <li><a <li><a href="http://www.infragistics.com/dotnet/netadvantage/wpf/xamdockmanager.aspx#Overview ">Infragistics Dock Manager</a></li> <li><a href="http://www.actiprosoftware.com/Products/DotNet/WPF/Docking/Default.aspx">Actipro Dock Panel</a></li> <li><a href="http://www.devcomponents.com/dotnetbar-wpf/">DevComponents Dock Panel</a></li> <li><a href="http://sourceforge.net/projects/wpfdockinglib/">WPF Docking Library (Open Source)</a></li> <li><a href="http://avalondock.codeplex.com">Avalon Dock (Open Source)</a></li> <li><a href="http://www.telerik.com/products/wpf/docking.aspx">Telerik RadDocking for WPF</a></li> <li><a href="http://www.divil.co.uk/net/controls/sanddockwpf/screenshots.aspx">divelements Dock</a></li> </ul> <h2>Editors</h2> <ul> <li><a href="http://www.infragistics.com/dotnet/netadvantage/wpf/xameditors.aspx#Overview ">Infragistics xamEditors</a></li> <li><a href="http://xceed.com/Editors_WPF_Intro.html">Xceed Editors</a></li> <li><a href="http://www.devcomponents.com/dotnetbar-wpf/WPFNumericDoubleInput.aspx ">DevComponents Numeric Editor</a></li> <li><a href="http://www.telerik.com/products/wpf/numericupdown.aspx">Telerik RadNumericUpDown for WPF</a></li> <li><a href="http://www.syncfusion.com/products/user-interface-edition/wpf/edit">Syncfusion Essential Edit (with Syntax Highlighting)</a></li> <li><a href="http://wpfcalendarcontrol.codeplex.com/">WPF Calendar Control</a></li> <li><a href="http://www.mindscapehq.com/products/wpfelements/controls/wpf-rich-text-toolbar">Mindscape Rich Text Editor</a></li> <li><a href="http://www.telerik.com/products/wpf/image-editor.aspx">Telerik Image Editor</a></li> </ul> <h2>Effects</h2> <ul> <li><a href="http://www.codeplex.com/transitionals">Transitionals - Framework to transition between screens.</li> <li><a href="http://www.codeplex.com/fx">WPF Shader and Transition FX</a></li> <li><a href="http://www.codeplex.com/wpffx">Windows Presentation Foundation Pixel Shader Effects Library</a></li> <li><a href="http://www.codeplex.com/dotwaywpf">DotWay WPF - Color Picker, Panels and several Shader Effects</a></li> <li><a href="http://www.telerik.com/products/wpf/drag-drop.aspx">Telerik Drag&amp;Drop for WPF</a></li> </ul> <h2>GIS and Maps</h2> <ul> <li><a href="http://resources.arcgis.com/content/arcgis-api-silverlightwpf/1.2/about">ESRI ArcGIS Controls for WPF</a></li> <li><a href="http://vewpf.codeplex.com/">Microsoft Virual Earth Control</a></li> <li><a href="http://wpfsharpmapcontrols.codeplex.com/">Sharp Map Control</a></li> </ul> <h2>Multimedia</h2> <ul> <li><a href="http://directshownet.sourceforge.net/">DirectShowLib - .NET Wrapper for DirectShow</a></li> <li><a href="http://videorendererelement.codeplex.com/">VideoRenderElement</a></li> <li><a href="http://wpfcap.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=13380#ReleaseFiles">Webcam Control</a></li> <li><a href="http://www.codeplex.com/WPFMediaKit">WPF Media Kit - DVD Player, DirectShow, WebCam</li> </ul> </td> <td style="padding-left: 40px; vertical-align: top;"> <h2>Misc</h2> <ul> <li><a href="http://www.codeplex.com/wpf/Release/ProjectReleases.aspx?ReleaseId=15598">WPF Toolkit</a></li> <li><a href="http://www.infragistics.com/dotnet/netadvantage/wpf/xamTabControl.aspx#Overview ">Infragistics Tab Control</a></li> <li><a href="http://www.mindscape.co.nz/products/wpfflowdiagrams/">Mindscape Flow Diagrams</a></li> </ul> <h2>Office Components</h2> <ul> <li><a href="http://www.e-iceblue.com/Introduce/word-for-wpf-introduce.html">Spire.DOC for WPF</a></li> <li><a href="http://www.e-iceblue.com/Introduce/excel-for-wpf-introduce.html">Spire.XLS for WPF</a></li> </ul> <h2>Outlook Bar</h2> <ul> <li><a href="http://www.infragistics.com/dotnet/netadvantage/wpf/xamOutlookBar.aspx#Overview ">Infragistics Outlook Bar</a></li> <li><a href="http://www.actiprosoftware.com/Products/DotNet/WPF/Navigation/Default.aspx">Actipro Outlook Bar</a></li> <li><a href="http://www.devcomponents.com/dotnetbar-wpf/NavigationPane.aspx">DevComponents Outlook Bar</a></li> <li><a href="http://www.codeproject.com/KB/WPF/WPFOutlookBar.aspx">Odyssey Outlook Bar</a></li> <li><a href="http://www.codeproject.com/KB/WPF/WPFExplorerBar.aspx">Odyssey Explorer Bar</a></li> <li><a href="http://www.telerik.com/products/wpf/outlookbar.aspx">Telerik RadOutlookBar for WPF</a></li> <li><a href="http://www.mindscapehq.com/products/wpfelements/controls/wpf-outlook-bar">Mindscape Outlook Bar</a></li> <li><a href="http://www.componentone.com/SuperProducts/OutlookBarWPF/">Component One Outlook Bar</a></li> </ul> <h2>Panels</h2> <ul> <li><a href="http://www.infragistics.com/dotnet/netadvantage/wpf/xamcarouselpanel.aspx#Overview">Infragistics Carousel Panel</a></li> <li><a href="http://www.telerik.com/products/wpf/carousel.aspx">Telerik WPF Carousel Control</a></li> <li><a href="http://www.telerik.com/products/wpf/tileview.aspx">Telerik RadTileView for WPF</a></li> <li><a href="http://www.mindscapehq.com/products/wpfelements/controls/wpf-coverflow-control">Mindscape Coverflow Control</a></li> <li><a href="http://www.telerik.com/products/wpf/virtualizingwrappanel.aspx">Telerik Virtualizing Wrap Panel</a></li> <li><a href="http://www.componentone.com/SuperProducts/HyperPanelWPF/">Component One HyperPanel</a></li> </ul> <h2>Progress Bars</h2> <ul> <li><a href="http://www.mindscapehq.com/products/wpfelements/controls/wpf-progress-bar">Mindscape Progress Bar</a></li> </ul> <h2>Property Grids</h2> <ul> <li><a href="http://www.actiprosoftware.com/Products/DotNet/WPF/PropertyGrid/Default.aspx">Actipro Property Grid</a></li> <li><a href="http://www.mindscape.co.nz/products/WpfPropertyGrid/default.aspx">Mindscape Property Grid</a></li> <li><a href="http://www.componentone.com/SuperProducts/PropertyGridWPF/">Component One Property Grid</a></li> </ul> <h2>PDF &amp; Reporting</h2> <ul> <li><a href="http://www.infragistics.com/dotnet/netadvantage/wpf/reporting.aspx#Overview ">Infragistics Reporting for WPF</a></li> <li><a href="http://www.componentone.com/SuperProducts/ReportsWPF/">Component One Reports</a></li> <li><a href="http://www.componentone.com/SuperProducts/PdfViewerWPF/">Component One PDF Viewer</a></li> <li><a href="http://www.e-iceblue.com/Introduce/pdf-viewer-wpf.html">IceBlue PDF Viewer</a></li> <li><a href="http://www.e-iceblue.com/Introduce/pdf-for-wpf-introduce.html">IceBlue PDF for WPF</a></li> <li><a href="http://www.o2sol.com/pdfview4net/overview.htm">o2sol PDFView4NET</a></li> </ul> <h2>Ribbon</h2> <ul> <li><a href="http://fluent.codeplex.com">Fluent Ribbon Control Suite</a></li> <li><a href="http://www.infragistics.com/dotnet/netadvantage/wpf/xamRibbon.aspx#Overview">Infragistics Ribbon</a></li> <li><a href="http://www.actiprosoftware.com/Products/DotNet/WPF/Ribbon/Default.aspx">Actipro Ribbon</a></li> <li><a href="http://www.devcomponents.com/dotnetbar-wpf/wpfribbon/ ">DevComponents Ribbon</a></li> <li><a href="http://www.codeproject.com/KB/WPF/OdysseyRibbonBar.aspx">Odyssey Ribbon</a></li> <li><a href="http://www.telerik.com/products/wpf/ribbonbar.aspx">Telerik WPF UI RibbonBar</a></li> <li><a href="http://windowsclient.net/wpf/wpf35/wpf-35sp1-ribbon-walkthrough.aspx">Free Microsoft WPF Ribbon Control</a></li> <li><a href="http://www.divil.co.uk/net/controls/sandribbonwpf/">divelements Ribbon</li></a> <li><a href="http://www.binarymission.co.uk/Products/wpf/ribbon-wpf.html">BinaryMisson Ribbon</a></li> </ul> <h2>Schedule</h2> <ul> <li><a href="http://www.devcomponents.com/dotnetbar-wpf/WPFScheduleControl.aspx ">DevComponents Schedule Control</a></li> <li><a href="http://www.devcomponents.com/dotnetbar-wpf/WPFDateTimePicker.aspx ">DevComponents DateTime Picker</a></li> <li><a href="http://www.componentone.com/SuperProducts/SchedulerWPF/">Component One Schedule</a></li> <li><a href="http://timeline.codeplex.com/">Timeline Control</a></li> <li><a href="http://www.telerik.com/products/wpf/scheduler.aspx">Telerik RadScheduler for WPF</a></li> <li><a href="http://wpfschedule.codeplex.com/">Free WPF Schedule Control</a></li> <li><a href="http://www.mindscapehq.com/products/wpfelements/controls/wpf-scheduler">Mindscape Schedule Control</a></li> <li><w href="http://www.mindscapehq.com/products/wpfelements/controls/time-explorer">Mindscape Time Explorer</a></li> <li><a href="http://www.infragistics.com/dotnet/netadvantage/wpf/xamMonthCalendar.aspx#Overview">Infragistics MonthCalendar</a></li> </ul> <h2>Slider</h2> <ul> <li><a href="http://www.mindscapehq.com/products/wpfelements/controls/wpf-dual-slider">Mindscape Dual-Slider</a></li> <li><a href="http://www.componentone.com/SuperProducts/RangeSliderWPF/">Component One Dual-Slider</a></li> </ul> <h2>Toolbar</h2> <ul> <li><a href="http://www.devexpress.com/Products/NET/Controls/WPF/Bar_Menu/">DevExpress ToolBar</a></li> <li><a href="http://www.codeproject.com/KB/tree/WPFBreadcrumbBar.aspx">Odyssey Breadcrumb Bar</a></li> <li><a href="http://www.componentart.com/products/wpf/navigation/">ComponentArt Toolbar</a></li> </ul> <h2>Theming</h2> <ul> <li><a href="http://wpfthemeselector.codeplex.com/">WPF Theme Selector</a></li> </ul> <h2>Tree</h2> <ul> <li><a href="http://www.telerik.com/products/wpf/treeview.aspx">Telerik RadTree View for WPF</a></li> <li><a href="http://www.mindscapehq.com/products/wpfelements/controls/wpf-multicolumn-tree-view">Mindscape Multicolumn Tree</a></li> </ul> <h2>Web Browser</h2> <ul> <li><a href="http://wpfchromium.codeplex.com/SourceControl/changeset/view/28084#413984">Chromium Web Browser</a></li> </ul> <h2>Wizard</h2> <ul> <li><a href="http://www.divil.co.uk/net/controls/wizardframeworkwpf/">divelements Wizard</a></li> <li><a href="http://www.actiprosoftware.com/Products/DotNet/WPF/Wizard/Default.aspx">Actipro Wizard</a></li> </ul> <h2>3D</h2> <ul> <li><a href="http://xceed.com/3DViews_WPF_Intro.html">Xceed 3D Views</a></li> </ul> </td> </tr> </table> http://www.wpftutorial.net/3rdPartyLibs.html Tue, 28 Feb 2017 04:29:25 +01002014-10-07 13:33:27 Home moc@zuehlke.com (Christian Moser) <table cellpadding="0" cellspacing="0"> <tr> <td style="width: 511px; padding-bottom: 20px; vertical-align: top;"> <h1>Welcome to the WPF Tutorial</h1> <img src="images/title.jpg" style="width: 400px; height: 349px; padding-left: 30px;" /> <p style="padding-top: 20px; padding-right: 10px; padding-left: 0px;">Welcome to my website about the Windows Presentation Foundation. The tutorials will show you how to create the next generation user experience. I hope you will get amazed by the possibilities of this fascinating technology.</p> <br/> [news] </td> <td rowspan="2" style="padding-left: 30px; margin-top: 10px; vertical-align: top; border-left: #eeeeee 1px solid;" > [tipofday] [popular] </td> </tr> </table> http://www.wpftutorial.net/Home.html Tue, 28 Feb 2017 04:29:25 +01002014-07-09 21:26:57 PasswordBox moc@zuehlke.com (Christian Moser) <h1>WPF PasswordBox Control</h1> <p>The password box control is a special type of TextBox designed to enter passwords. The typed in characters are replaced by asterisks. Since the password box contains a sensible password it does not allow cut, copy, undo and redo commands.</p> <img src="images/passwordbox.png" style="padding:15px; padding-left: 200px;"> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span style="color: #800000;">&lt;StackPanel<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Label</span> <span style="color: #ff0000;">Content</span>=<span style="color: #0000ff;">&quot;Password:&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;PasswordBox</span> <span style="color: #ff0000;">x:Name</span>=<span style="color: #0000ff;">&quot;passwordBox&quot;</span> <span style="color: #ff0000;">Width</span>=<span style="color: #0000ff;">&quot;130&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/StackPanel<span style="color: #800000;">&gt;</span></span></span> </pre></div> <h2>Change the password character</h2> <p>To replace the asteriks character by another character, set the PasswordChar property to the character you desire.</p> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span style="color: #800000;">&lt;PasswordBox</span> <span style="color: #ff0000;">x:Name</span>=<span style="color: #0000ff;">&quot;passwordBox&quot;</span> <span style="color: #ff0000;">PasswordChar</span>=<span style="color: #0000ff;">&quot;*&quot;</span> <span style="color: #800000;">/&gt;</span></span> </pre></div><h2>Limit the length of the password</h2> <p>To limit the length of the password a user can enter set the <code>MaxLength</code> property to the amount of characters you allow.</p> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span style="color: #800000;">&lt;PasswordBox</span> <span style="color: #ff0000;">x:Name</span>=<span style="color: #0000ff;">&quot;passwordBox&quot;</span> <span style="color: #ff0000;">MaxLength</span>=<span style="color: #0000ff;">&quot;8&quot;</span> <span style="color: #800000;">/&gt;</span></span> </pre></div> <h2>Databind the Password Property of a WPF PasswordBox</h2> <p>When you try to databind the password property of a PasswordBox you will recognize that you cannot do data binding on it. The reason for this is, that the password property is not backed by a DependencyProperty.</p> <p>The reason is databinding passwords is not a good design for security reasons and should be avoided. But sometimes this security is not necessary, then it's only cumbersome that you cannot bind to the password property. In this special cases you can take advantage of the following PasswortBoxHelper.</p> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span style="color: #800000;">&lt;StackPanel<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;PasswordBox</span> w:PasswordHelper.<span style="color: #ff0000;">Attach</span>=<span style="color: #0000ff;">&quot;True&quot;</span> </span> <span style="color: #800000;"> w:PasswordHelper.<span style="color: #ff0000;">Password</span>=<span style="color: #0000ff;">&quot;{Binding Text, ElementName=plain, Mode=TwoWay}&quot;</span> </span> <span style="color: #800000;"> <span style="color: #ff0000;">Width</span>=<span style="color: #0000ff;">&quot;130&quot;</span><span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;TextBlock</span> <span style="color: #ff0000;">Padding</span>=<span style="color: #0000ff;">&quot;10,0&quot;</span> <span style="color: #ff0000;">x:Name</span>=<span style="color: #0000ff;">&quot;plain&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/StackPanel<span style="color: #800000;">&gt;</span></span></span> </pre></div> <p>The PasswordHelper is attached to the password box by calling the <code>PasswordHelper.Attach</code> property. The attached property <code>PasswordHelper.Password</code> provides a bindable copy of the original password property of the PasswordBox control.</p> <div class="codeblock"><pre class="csharp csharp" style="font-family: courier new,courier,monospace;"> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #2b91af; font-weight: bold;">class</span> PasswordHelper <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #0600FF; font-weight: bold;">readonly</span> DependencyProperty PasswordProperty <span style="color: #008000;">=</span> DependencyProperty.<span style="color: #0000FF;">RegisterAttached</span><span style="color: #000000;">&#40;</span><span style="color: #666666;">&quot;Password&quot;</span>, <a href="http://www.google.com/search?q=typeof+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">typeof</span></a><span style="color: #000000;">&#40;</span><span style="color: #2b91af; font-weight: bold;">string</span><span style="color: #000000;">&#41;</span>, <a href="http://www.google.com/search?q=typeof+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">typeof</span></a><span style="color: #000000;">&#40;</span>PasswordHelper<span style="color: #000000;">&#41;</span>, <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> FrameworkPropertyMetadata<span style="color: #000000;">&#40;</span><span style="color: #2b91af; font-weight: bold;">string</span>.<span style="color: #0000FF;">Empty</span>, OnPasswordPropertyChanged<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>; <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #0600FF; font-weight: bold;">readonly</span> DependencyProperty AttachProperty <span style="color: #008000;">=</span> DependencyProperty.<span style="color: #0000FF;">RegisterAttached</span><span style="color: #000000;">&#40;</span><span style="color: #666666;">&quot;Attach&quot;</span>, <a href="http://www.google.com/search?q=typeof+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">typeof</span></a><span style="color: #000000;">&#40;</span><span style="color: #2b91af; font-weight: bold;">bool</span><span style="color: #000000;">&#41;</span>, <a href="http://www.google.com/search?q=typeof+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">typeof</span></a><span style="color: #000000;">&#40;</span>PasswordHelper<span style="color: #000000;">&#41;</span>, <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> PropertyMetadata<span style="color: #000000;">&#40;</span><span style="color: #0600FF; font-weight: bold;">false</span>, Attach<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>; <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #0600FF; font-weight: bold;">readonly</span> DependencyProperty IsUpdatingProperty <span style="color: #008000;">=</span> DependencyProperty.<span style="color: #0000FF;">RegisterAttached</span><span style="color: #000000;">&#40;</span><span style="color: #666666;">&quot;IsUpdating&quot;</span>, <a href="http://www.google.com/search?q=typeof+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">typeof</span></a><span style="color: #000000;">&#40;</span><span style="color: #2b91af; font-weight: bold;">bool</span><span style="color: #000000;">&#41;</span>, <a href="http://www.google.com/search?q=typeof+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">typeof</span></a><span style="color: #000000;">&#40;</span>PasswordHelper<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>; <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #0600FF; font-weight: bold;">void</span> SetAttach<span style="color: #000000;">&#40;</span>DependencyObject dp, <span style="color: #2b91af; font-weight: bold;">bool</span> value<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> dp.<span style="color: #0000FF;">SetValue</span><span style="color: #000000;">&#40;</span>AttachProperty, value<span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #2b91af; font-weight: bold;">bool</span> GetAttach<span style="color: #000000;">&#40;</span>DependencyObject dp<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">return</span> <span style="color: #000000;">&#40;</span><span style="color: #2b91af; font-weight: bold;">bool</span><span style="color: #000000;">&#41;</span>dp.<span style="color: #0000FF;">GetValue</span><span style="color: #000000;">&#40;</span>AttachProperty<span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #2b91af; font-weight: bold;">string</span> GetPassword<span style="color: #000000;">&#40;</span>DependencyObject dp<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">return</span> <span style="color: #000000;">&#40;</span><span style="color: #2b91af; font-weight: bold;">string</span><span style="color: #000000;">&#41;</span>dp.<span style="color: #0000FF;">GetValue</span><span style="color: #000000;">&#40;</span>PasswordProperty<span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #0600FF; font-weight: bold;">void</span> SetPassword<span style="color: #000000;">&#40;</span>DependencyObject dp, <span style="color: #2b91af; font-weight: bold;">string</span> value<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> dp.<span style="color: #0000FF;">SetValue</span><span style="color: #000000;">&#40;</span>PasswordProperty, value<span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #2b91af; font-weight: bold;">bool</span> GetIsUpdating<span style="color: #000000;">&#40;</span>DependencyObject dp<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">return</span> <span style="color: #000000;">&#40;</span><span style="color: #2b91af; font-weight: bold;">bool</span><span style="color: #000000;">&#41;</span>dp.<span style="color: #0000FF;">GetValue</span><span style="color: #000000;">&#40;</span>IsUpdatingProperty<span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #0600FF; font-weight: bold;">void</span> SetIsUpdating<span style="color: #000000;">&#40;</span>DependencyObject dp, <span style="color: #2b91af; font-weight: bold;">bool</span> value<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> dp.<span style="color: #0000FF;">SetValue</span><span style="color: #000000;">&#40;</span>IsUpdatingProperty, value<span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #0600FF; font-weight: bold;">void</span> OnPasswordPropertyChanged<span style="color: #000000;">&#40;</span>DependencyObject sender, DependencyPropertyChangedEventArgs e<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> PasswordBox passwordBox <span style="color: #008000;">=</span> sender <span style="color: #0600FF; font-weight: bold;">as</span> PasswordBox; passwordBox.<span style="color: #0000FF;">PasswordChanged</span> <span style="color: #008000;">-=</span> PasswordChanged; <span style="color: #0600FF; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #008000;">!</span><span style="color: #000000;">&#40;</span><span style="color: #2b91af; font-weight: bold;">bool</span><span style="color: #000000;">&#41;</span>GetIsUpdating<span style="color: #000000;">&#40;</span>passwordBox<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> passwordBox.<span style="color: #0000FF;">Password</span> <span style="color: #008000;">=</span> <span style="color: #000000;">&#40;</span><span style="color: #2b91af; font-weight: bold;">string</span><span style="color: #000000;">&#41;</span>e.<span style="color: #0000FF;">NewValue</span>; <span style="color: #000000;">&#125;</span> passwordBox.<span style="color: #0000FF;">PasswordChanged</span> <span style="color: #008000;">+=</span> PasswordChanged; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #0600FF; font-weight: bold;">void</span> Attach<span style="color: #000000;">&#40;</span>DependencyObject sender, DependencyPropertyChangedEventArgs e<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> PasswordBox passwordBox <span style="color: #008000;">=</span> sender <span style="color: #0600FF; font-weight: bold;">as</span> PasswordBox; <span style="color: #0600FF; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>passwordBox <span style="color: #008000;">==</span> <span style="color: #0600FF; font-weight: bold;">null</span><span style="color: #000000;">&#41;</span> return; <span style="color: #0600FF; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #000000;">&#40;</span><span style="color: #2b91af; font-weight: bold;">bool</span><span style="color: #000000;">&#41;</span>e.<span style="color: #0000FF;">OldValue</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> passwordBox.<span style="color: #0000FF;">PasswordChanged</span> <span style="color: #008000;">-=</span> PasswordChanged; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #000000;">&#40;</span><span style="color: #2b91af; font-weight: bold;">bool</span><span style="color: #000000;">&#41;</span>e.<span style="color: #0000FF;">NewValue</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> passwordBox.<span style="color: #0000FF;">PasswordChanged</span> <span style="color: #008000;">+=</span> PasswordChanged; <span style="color: #000000;">&#125;</span> <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #0600FF; font-weight: bold;">void</span> PasswordChanged<span style="color: #000000;">&#40;</span><span style="color: #2b91af; font-weight: bold;">object</span> sender, RoutedEventArgs e<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> PasswordBox passwordBox <span style="color: #008000;">=</span> sender <span style="color: #0600FF; font-weight: bold;">as</span> PasswordBox; SetIsUpdating<span style="color: #000000;">&#40;</span>passwordBox, <span style="color: #0600FF; font-weight: bold;">true</span><span style="color: #000000;">&#41;</span>; SetPassword<span style="color: #000000;">&#40;</span>passwordBox, passwordBox.<span style="color: #0000FF;">Password</span><span style="color: #000000;">&#41;</span>; SetIsUpdating<span style="color: #000000;">&#40;</span>passwordBox, <span style="color: #0600FF; font-weight: bold;">false</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #000000;">&#125;</span> </pre></div> <p>The Idea for this password helper was originally posted here:</p> <a href="http://blog.functionalfun.net/2008/06/wpf-passwordbox-and-data-binding.html">http://blog.functionalfun.net/2008/06/wpf-passwordbox-and-data-binding.html</a> http://www.wpftutorial.net/PasswordBox.html Tue, 28 Feb 2017 04:29:25 +01002014-06-22 08:58:38 XAML moc@zuehlke.com (Christian Moser) <h1>Introduction to XAML</h1> <p>XAML stands for Extensible Application Markup Language. Its a simple language based on XML to create and initialize .NET objects with hierarchical relations. Altough it was originally invented for WPF it can by used to create any kind of object trees.</p> <p>Today XAML is used to create user interfaces in WPF, Silverlight, declare workflows in WF and for electronic paper in the XPS standard.</p> <p>All classes in WPF have parameterless constructors and make excessive usage of properties. That is done to make it perfectly fit for XML languages like XAML.</p> <h2>Advantages of XAML</h2> <p>All you can do in XAML can also be done in code. XAML ist just another way to create and initialize objects. You can use WPF without using XAML. It's up to you if you want to declare it in XAML or write it in code. Declare your UI in XAML has some advantages:</p> <ul> <li>XAML code is short and clear to read</li> <li>Separation of designer code and logic</li> <li>Graphical design tools like Expression Blend require XAML as source.</li> <li>The separation of XAML and UI logic allows it to clearly separate the roles of designer and developer.</li> </ul> <h2>XAML vs. Code</h2> <p>As an example we build a simple StackPanel with a textblock and a button in XAML and compare it to the same code in C#.</p> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span style="color: #800000;">&lt;StackPanel<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;TextBlock</span> <span style="color: #ff0000;">Margin</span>=<span style="color: #0000ff;">&quot;20&quot;</span><span style="color: #800000;">&gt;</span></span>Welcome to the World of XAML<span style="color: #800000;"><span style="color: #800000;">&lt;/TextBlock<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Button</span> <span style="color: #ff0000;">Margin</span>=<span style="color: #0000ff;">&quot;10&quot;</span> <span style="color: #ff0000;">HorizontalAlignment</span>=<span style="color: #0000ff;">&quot;Right&quot;</span><span style="color: #800000;">&gt;</span></span>OK<span style="color: #800000;"><span style="color: #800000;">&lt;/Button<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/StackPanel<span style="color: #800000;">&gt;</span></span></span> </pre></div><p>The same expressed in C# will look like this:</p> <div class="codeblock"><pre class="csharp csharp" style="font-family: courier new,courier,monospace;"> <span style="color: #008000;">// Create the StackPanel</span> StackPanel stackPanel <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> StackPanel<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; <span style="color: #0600FF; font-weight: bold;">this</span>.<span style="color: #0000FF;">Content</span> <span style="color: #008000;">=</span> stackPanel; <span style="color: #008000;">// Create the TextBlock</span> TextBlock textBlock <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> TextBlock<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; textBlock.<span style="color: #0000FF;">Margin</span> <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> Thickness<span style="color: #000000;">&#40;</span><span style="color: #FF0000;">10</span><span style="color: #000000;">&#41;</span>; textBlock.<span style="color: #0000FF;">Text</span> <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;Welcome to the World of XAML&quot;</span>; stackPanel.<span style="color: #0000FF;">Children</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>textBlock<span style="color: #000000;">&#41;</span>; <span style="color: #008000;">// Create the Button</span> Button button <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> Button<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; button.<span style="color: #0000FF;">Margin</span><span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> Thickness<span style="color: #000000;">&#40;</span><span style="color: #FF0000;">20</span><span style="color: #000000;">&#41;</span>; button.<span style="color: #0000FF;">Content</span> <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;OK&quot;</span>; stackPanel.<span style="color: #0000FF;">Children</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>button<span style="color: #000000;">&#41;</span>; </pre></div><p>As you can see is the XAML version much shorter and clearer to read. And that's the power of XAMLs expressiveness.</p> <h2>Properties as Elements</h2> <p>Properties are normally written inline as known from XML <code>&lt;Button Content="OK" /&gt;</code>. But what if we want to put a more complex object as content like an image that has properties itself or maybe a whole grid panel? To do that we can use the property element syntax. This allows us to extract the property as an own child element.</p> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span style="color: #800000;">&lt;Button<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Button</span>.Content<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Image</span> <span style="color: #ff0000;">Source</span>=<span style="color: #0000ff;">&quot;Images/OK.png&quot;</span> <span style="color: #ff0000;">Width</span>=<span style="color: #0000ff;">&quot;50&quot;</span> <span style="color: #ff0000;">Height</span>=<span style="color: #0000ff;">&quot;50&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Button</span>.Content<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Button<span style="color: #800000;">&gt;</span></span></span> </pre></div> <h2>Implicit Type conversion</h2> <p>A very powerful construct of WPF are implicit type converters. They do their work silently in the background. When you declare a BorderBrush, the word "Blue" is only a string. The implicit <code>BrushConverter</code> makes a <code>System.Windows.Media.Brushes.Blue</code> out of it. The same regards to the border thickness that is beeing converted implicit into a <code>Thickness</code> object. WPF includes a lot of type converters for built-in classes, but you can also write type converters for your own classses.</p> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span style="color: #800000;">&lt;Border</span> <span style="color: #ff0000;">BorderBrush</span>=<span style="color: #0000ff;">&quot;Blue&quot;</span> <span style="color: #ff0000;">BorderThickness</span>=<span style="color: #0000ff;">&quot;0,10&quot;</span><span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Border<span style="color: #800000;">&gt;</span></span></span> </pre></div> <h2>Markup Extensions</h2> <p>Markup extensions are dynamic placeholders for attribute values in XAML. They resolve the value of a property at runtime. Markup extensions are surrouded by curly braces (Example: <code>Background="{StaticResource NormalBackgroundBrush}"</code>). WPF has some built-in markup extensions, but you can write your own, by deriving from <code>MarkupExtension</code>. These are the built-in markup extensions: <ul> <li><b>Binding</b><br/>To bind the values of two properties together.</li> <li><b>StaticResource</b><br/>One time lookup of a resource entry</li> <li><b>DynamicResource</b><br/>Auto updating lookup of a resource entry</li> <li><b>TemplateBinding</b><br/>To bind a property of a control template to a dependency property of the control</li> <li><b>x:Static</b><br/>Resolve the value of a static property.</li> <li><b>x:Null</b><br/>Return <code>null</code></li> </ul> The first identifier within a pair of curly braces is the name of the extension. All preciding identifiers are named parameters in the form of Property=Value. The following example shows a label whose <code>Content</code> is bound to the <code>Text</code> of the textbox. When you type a text into the text box, the text property changes and the binding markup extension automatically updates the content of the label. </p> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span style="color: #800000;">&lt;TextBox</span> <span style="color: #ff0000;">x:Name</span>=<span style="color: #0000ff;">&quot;textBox&quot;</span><span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Label</span> <span style="color: #ff0000;">Content</span>=<span style="color: #0000ff;">&quot;{Binding Text, ElementName=textBox}&quot;</span><span style="color: #800000;">/&gt;</span></span> </pre></div> <h2>Namespaces</h2> <p>At the beginning of every XAML file you need to include two namespaces. <br/>The first is <code>http://schemas.microsoft.com/winfx/2006/xaml/presentation</code>. It is mapped to all wpf controls in <code>System.Windows.Controls</code>. <br/>The second is <code>http://schemas.microsoft.com/winfx/2006/xaml</code> it is mapped to <code>System.Windows.Markup</code> that defines the XAML keywords.<br/> The mapping between an XML namespace and a CLR namespace is done by the <code>XmlnsDefinition</code> attribute at assembly level. You can also directly include a CLR namespace in XAML by using the <code>clr-namespace:</code> prefix.</p> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span style="color: #800000;">&lt;Window</span> <span style="color: #ff0000;">xmlns</span>=<span style="color: #0000ff;">&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;</span></span> <span style="color: #800000;"><span style="color: #ff0000;">xmlns:x</span>=<span style="color: #0000ff;">&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;</span><span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Window<span style="color: #800000;">&gt;</span></span></span> </pre></div> http://www.wpftutorial.net/XAML.html Tue, 28 Feb 2017 04:29:25 +01002013-12-13 09:08:46 WPF Inspector moc@zuehlke.com (Christian Moser) <h1>WPF Inspector</h1> <h2>NEW: XAML Inspector - cross platform visual Debugging</h2> <p>Have a look at XAML inspector. The successor of WPF Inspector. It brings all the features of WPF Inspector to all XAML platofrms (WPF, Silveright, WinRT and Windows Phone).</p> <p>Visit project page: <a href="http://www.xamlinspector.com" target="_blank">www.xamlinspector.com</a></p> <img src="images/inspector_ad.jpg" /> <p>WPF Inspector is a utility that attaches to a running WPF application to troubleshoot common problems with layouting, databinding or styling. WPF Inspector allows you to explore a live view of the logical- and visual tree, read and edit property values of elements, watch the data context, debug triggers, trace styles and much more. Since March 2011, WPF Inspector is open source and available on CodePlex.</p> <a href="http://wpfinspector.codeplex.com/">Download WPF Inspector from CodePlex</a> <br/><br/> http://www.wpftutorial.net/Inspector.html Tue, 28 Feb 2017 04:29:25 +01002013-10-17 13:47:17 Query Screen Resolutions moc@zuehlke.com (Christian Moser) <h1>WPF replacemenet for <code>Screen.AllScreens()</code></h1> <p>Many WPF applications want to check the available screen resolution to adjust window placements of sizes. In WinForms was a nice helper called <code>Screen.AllScreens</code> that returned a list of screens with their corresponding resolution. To use it from WPF you have to reference <code>System.Windows.Forms</code> and <code>System.Windows.Drawing</code> which is not always what you want (because of application load time, dependencies, ambigue class names, etc.).</p> <p>To get around this limitation I created a helper called <code>Monitor</code> which is a simple port of the <code>Screen</code> functionality from WinForms.</p> <div class="codeblock"><pre class="csharp csharp" style="font-family: courier new,courier,monospace;"> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #2b91af; font-weight: bold;">class</span> Monitor <span style="color: #000000;">&#123;</span> <span style="color: #008000;">#region Dll imports</span> <span style="color: #000000;">&#91;</span>DllImport<span style="color: #000000;">&#40;</span><span style="color: #666666;">&quot;user32.dll&quot;</span>, CharSet <span style="color: #008000;">=</span> CharSet.<span style="color: #0600FF; font-weight: bold;">Auto</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#93;</span> <span style="color: #000000;">&#91;</span>ResourceExposure<span style="color: #000000;">&#40;</span>ResourceScope.<span style="color: #0000FF;">None</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#93;</span> <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #0600FF; font-weight: bold;">extern</span> <span style="color: #2b91af; font-weight: bold;">bool</span> GetMonitorInfo <span style="color: #000000;">&#40;</span>HandleRef hmonitor, <span style="color: #000000;">&#91;</span><span style="color: #0600FF; font-weight: bold;">In</span>, <span style="color: #0600FF; font-weight: bold;">Out</span><span style="color: #000000;">&#93;</span>MonitorInfoEx info<span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#91;</span>DllImport<span style="color: #000000;">&#40;</span><span style="color: #666666;">&quot;user32.dll&quot;</span>, ExactSpelling <span style="color: #008000;">=</span> <span style="color: #0600FF; font-weight: bold;">true</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#93;</span> <span style="color: #000000;">&#91;</span>ResourceExposure<span style="color: #000000;">&#40;</span>ResourceScope.<span style="color: #0000FF;">None</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#93;</span> <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #0600FF; font-weight: bold;">extern</span> <span style="color: #2b91af; font-weight: bold;">bool</span> EnumDisplayMonitors <span style="color: #000000;">&#40;</span>HandleRef hdc, IntPtr rcClip, MonitorEnumProc lpfnEnum, IntPtr dwData<span style="color: #000000;">&#41;</span>; <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #2b91af; font-weight: bold;">delegate</span> <span style="color: #2b91af; font-weight: bold;">bool</span> MonitorEnumProc <span style="color: #000000;">&#40;</span>IntPtr monitor, IntPtr hdc, IntPtr lprcMonitor, IntPtr lParam<span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#91;</span>StructLayout<span style="color: #000000;">&#40;</span>LayoutKind.<span style="color: #0000FF;">Sequential</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#93;</span> <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #2b91af; font-weight: bold;">struct</span> Rect <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #2b91af; font-weight: bold;">int</span> left; <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #2b91af; font-weight: bold;">int</span> top; <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #2b91af; font-weight: bold;">int</span> right; <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #2b91af; font-weight: bold;">int</span> bottom; <span style="color: #000000;">&#125;</span> <span style="color: #000000;">&#91;</span>StructLayout<span style="color: #000000;">&#40;</span>LayoutKind.<span style="color: #0000FF;">Sequential</span>, CharSet <span style="color: #008000;">=</span> CharSet.<span style="color: #0600FF; font-weight: bold;">Auto</span>, Pack <span style="color: #008000;">=</span> <span style="color: #FF0000;">4</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#93;</span> <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #2b91af; font-weight: bold;">class</span> MonitorInfoEx <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">internal</span> <span style="color: #2b91af; font-weight: bold;">int</span> cbSize <span style="color: #008000;">=</span> Marshal.<a href="http://www.google.com/search?q=sizeof+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">SizeOf</span></a><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=typeof+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">typeof</span></a><span style="color: #000000;">&#40;</span>MonitorInfoEx<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>; <span style="color: #0600FF; font-weight: bold;">internal</span> Rect rcMonitor <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> Rect<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; <span style="color: #0600FF; font-weight: bold;">internal</span> Rect rcWork <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> Rect<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; <span style="color: #0600FF; font-weight: bold;">internal</span> <span style="color: #2b91af; font-weight: bold;">int</span> dwFlags <span style="color: #008000;">=</span> 0; <span style="color: #000000;">&#91;</span>MarshalAs<span style="color: #000000;">&#40;</span>UnmanagedType.<span style="color: #0000FF;">ByValArray</span>, SizeConst <span style="color: #008000;">=</span> <span style="color: #FF0000;">32</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#93;</span> <span style="color: #0600FF; font-weight: bold;">internal</span> <span style="color: #2b91af; font-weight: bold;">char</span><span style="color: #000000;">&#91;</span><span style="color: #000000;">&#93;</span> szDevice <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> <span style="color: #2b91af; font-weight: bold;">char</span><span style="color: #000000;">&#91;</span><span style="color: #FF0000;">32</span><span style="color: #000000;">&#93;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #0600FF; font-weight: bold;">const</span> <span style="color: #2b91af; font-weight: bold;">int</span> MonitorinfofPrimary <span style="color: #008000;">=</span> 0x00000001; <span style="color: #008000;">#endregion</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">static</span> HandleRef NullHandleRef <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> HandleRef<span style="color: #000000;">&#40;</span><span style="color: #0600FF; font-weight: bold;">null</span>, IntPtr.<span style="color: #0000FF;">Zero</span><span style="color: #000000;">&#41;</span>; <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #000000;">System</span>.<span style="color: #0000FF;">Windows</span>.<span style="color: #0000FF;">Rect</span> Bounds <span style="color: #000000;">&#123;</span> get; <span style="color: #0600FF; font-weight: bold;">private</span> set; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #000000;">System</span>.<span style="color: #0000FF;">Windows</span>.<span style="color: #0000FF;">Rect</span> WorkingArea <span style="color: #000000;">&#123;</span> get; <span style="color: #0600FF; font-weight: bold;">private</span> set; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #2b91af; font-weight: bold;">string</span> Name <span style="color: #000000;">&#123;</span> get; <span style="color: #0600FF; font-weight: bold;">private</span> set; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #2b91af; font-weight: bold;">bool</span> IsPrimary <span style="color: #000000;">&#123;</span> get; <span style="color: #0600FF; font-weight: bold;">private</span> set; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">private</span> Monitor<span style="color: #000000;">&#40;</span>IntPtr monitor, IntPtr hdc<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> var info <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> MonitorInfoEx<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; GetMonitorInfo<span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> HandleRef<span style="color: #000000;">&#40;</span><span style="color: #0600FF; font-weight: bold;">null</span>, monitor<span style="color: #000000;">&#41;</span>, info<span style="color: #000000;">&#41;</span>; Bounds <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> <span style="color: #000000;">System</span>.<span style="color: #0000FF;">Windows</span>.<span style="color: #0000FF;">Rect</span><span style="color: #000000;">&#40;</span> info.<span style="color: #0000FF;">rcMonitor</span>.<span style="color: #0000FF;">left</span>, info.<span style="color: #0000FF;">rcMonitor</span>.<span style="color: #0000FF;">top</span>, info.<span style="color: #0000FF;">rcMonitor</span>.<span style="color: #0000FF;">right</span> <span style="color: #008000;">-</span> info.<span style="color: #0000FF;">rcMonitor</span>.<span style="color: #0000FF;">left</span>, info.<span style="color: #0000FF;">rcMonitor</span>.<span style="color: #0000FF;">bottom</span> <span style="color: #008000;">-</span> info.<span style="color: #0000FF;">rcMonitor</span>.<span style="color: #0000FF;">top</span><span style="color: #000000;">&#41;</span>; WorkingArea <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> <span style="color: #000000;">System</span>.<span style="color: #0000FF;">Windows</span>.<span style="color: #0000FF;">Rect</span><span style="color: #000000;">&#40;</span> info.<span style="color: #0000FF;">rcWork</span>.<span style="color: #0000FF;">left</span>, info.<span style="color: #0000FF;">rcWork</span>.<span style="color: #0000FF;">top</span>, info.<span style="color: #0000FF;">rcWork</span>.<span style="color: #0000FF;">right</span> <span style="color: #008000;">-</span> info.<span style="color: #0000FF;">rcWork</span>.<span style="color: #0000FF;">left</span>, info.<span style="color: #0000FF;">rcWork</span>.<span style="color: #0000FF;">bottom</span> <span style="color: #008000;">-</span> info.<span style="color: #0000FF;">rcWork</span>.<span style="color: #0000FF;">top</span><span style="color: #000000;">&#41;</span>; IsPrimary <span style="color: #008000;">=</span> <span style="color: #000000;">&#40;</span><span style="color: #000000;">&#40;</span>info.<span style="color: #0000FF;">dwFlags</span> <span style="color: #008000;">&amp;</span> MonitorinfofPrimary<span style="color: #000000;">&#41;</span> <span style="color: #008000;">!=</span> 0<span style="color: #000000;">&#41;</span>; Name <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> <span style="color: #2b91af; font-weight: bold;">string</span><span style="color: #000000;">&#40;</span>info.<span style="color: #0000FF;">szDevice</span><span style="color: #000000;">&#41;</span>.<span style="color: #0000FF;">TrimEnd</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#40;</span><span style="color: #2b91af; font-weight: bold;">char</span><span style="color: #000000;">&#41;</span>0<span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">static</span> IEnumerable<span style="color: #008000;">&lt;</span>Monitor<span style="color: #008000;">&gt;</span> AllMonitors <span style="color: #000000;">&#123;</span> get <span style="color: #000000;">&#123;</span> var closure <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> MonitorEnumCallback<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; var proc <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> MonitorEnumProc<span style="color: #000000;">&#40;</span>closure.<span style="color: #0000FF;">Callback</span><span style="color: #000000;">&#41;</span>; EnumDisplayMonitors<span style="color: #000000;">&#40;</span>NullHandleRef, IntPtr.<span style="color: #0000FF;">Zero</span>, proc, IntPtr.<span style="color: #0000FF;">Zero</span><span style="color: #000000;">&#41;</span>; <span style="color: #0600FF; font-weight: bold;">return</span> closure.<span style="color: #0000FF;">Monitors</span>.<span style="color: #0000FF;">Cast</span><span style="color: #008000;">&lt;</span>Monitor<span style="color: #008000;">&gt;</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #2b91af; font-weight: bold;">class</span> MonitorEnumCallback <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">public</span> ArrayList Monitors <span style="color: #000000;">&#123;</span> get; <span style="color: #0600FF; font-weight: bold;">private</span> set; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> MonitorEnumCallback<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> Monitors <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> ArrayList<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #2b91af; font-weight: bold;">bool</span> Callback<span style="color: #000000;">&#40;</span>IntPtr monitor, IntPtr hdc, IntPtr lprcMonitor, IntPtr lparam<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> Monitors.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> Monitor<span style="color: #000000;">&#40;</span>monitor, hdc<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>; <span style="color: #0600FF; font-weight: bold;">return</span> true; <span style="color: #000000;">&#125;</span> <span style="color: #000000;">&#125;</span> <span style="color: #000000;">&#125;</span> </pre></div> http://www.wpftutorial.net/ScreenResolutions.html Tue, 28 Feb 2017 04:29:25 +01002012-12-06 16:52:36 Books moc@zuehlke.com (Christian Moser) <h1>Books about WPF</h1> <table width="700"> <tr style="height: 200px;"> <td><a href="http://www.packtpub.com/windows-presentation-foundation-4-5-cookbook/book"><img src="images/book_cookbook45.jpg" style="width: 150px;"></a></td> <td style="vertical-align: top;"> <h3><a href="http://www.packtpub.com/windows-presentation-foundation-4-5-cookbook/book">Windows Presentation Foundation 4.5 Cookbook</a></h3> <p>The book contains over 80 recipes to effectively and efficiently develop rich Windows client applications on the Windows platform. It is full of illustrations, diagrams, and tips with clear step-by-step instructions and real world examples to gain a strong foundation of WPF features and patterns. It shows how to leverage the MVVM pattern to build decoupled, maintainable apps.</p> <p><table> <tr> <td style="width: 100px;"><b>Autor:</b></td> <td>Pavel Yosifovich</td> </tr> <tr> <td style="width: 100px;"><b>ISBN:</b></td> <td>978-1849686228</td> </tr> <tr> <td style="width: 100px;"><b>Published:</b></td> <td>Sept 2012</td> </tr> <tr> <td></td> <td><a href="http://www.packtpub.com/windows-presentation-foundation-4-5-cookbook/book" target="_blank">Find it at Packt publishing</td> </tr> </table> </p> </td> </tr> </table> <table width="700"> <tr style="height: 200px;"> <td><img src="images/book_wpf4unleashed.png" style="width: 150px;"></td> <td style="vertical-align: top;"> <h3>WPF 4 - Unleashed</h3> <p>In my opinion one of the best books about WPF - now updated to version 4.0. It's printed fully in color, so all code samples have syntax highlighting. It includes all the good explanations and samples of version 3 including new chapters about multitouch, XAML 2009, VSM, improved text rendering, windows 7 shell integration and more. </p> <p><table> <tr> <td style="width: 100px;"><b>Autor:</b></td> <td>Adam Nathan</td> </tr> <tr> <td style="width: 100px;"><b>ISBN:</b></td> <td>978-0672331190</td> </tr> <tr> <td style="width: 100px;"><b>Published:</b></td> <td>June 2010</td> </tr> <tr> <td></td> <td><a href="http://www.amazon.de/WPF-4-Unleashed-Adam-Nathan/dp/0672331195/ref=sr_1_1?ie=UTF8&s=books-intl-de&qid=1279693891&sr=8-1" target="_blank">Find it at Amazon</td> </tr> </table> </p> </td> </tr> </table> <table width="700"> <tr style="height: 200px;"> <td><img src="images/book_wpfcontroldev.png" style="width: 150px;"></td> <td style="vertical-align: top;"> <h3>WPF Control Development Unleashed</h3> <p>In this book, two leading Windows Presentation Foundation experts give developers everything they need to build next-generation WPF applications--software that is more robust, usable, and compelling. Drawing on their close ties with Microsoft's WPF development team, Pavan Podila and Kevin Hoffman give you a clear, robust, and practical understanding of WPF, its underpinnings, its overall architecture, and its design philosophy.</p> <p><table> <tr> <td style="width: 100px;"><b>Autor:</b></td> <td>Pavan Podila, Kevin Hoffman</td> </tr> <tr> <td style="width: 100px;"><b>ISBN:</b></td> <td>978-0672330339</td> </tr> <tr> <td style="width: 100px;"><b>Published:</b></td> <td>September 2009</td> </tr> <tr> <td></td> <td><a href="http://www.amazon.de/gp/product/0672330334/ref=sib_rdr_dp" target="_blank">Find it at Amazon</td> </tr> </table> </p> </td> </tr> <tr style="height: 200px;"> <td><img src="images/book_wpfunleashed.jpg" style="width: 150px;"></td> <td style="vertical-align: top;"> <h3>Windows Presentation Foundation - Unleashed (My favorite!)</h3> <p>In my opinion one of the best book about WPF. It covers all important themes including 3D programming. All code samples have syntax highlighting. Digging deeper sections with additional informations for advanced programmers.</p> <p><table> <tr> <td style="width: 100px;"><b>Autor:</b></td> <td>Adam Nathan</td> </tr> <tr> <td style="width: 100px;"><b>ISBN:</b></td> <td>978-0672328916</td> </tr> <tr> <td style="width: 100px;"><b>Published:</b></td> <td>January 2007</td> </tr> <tr> <td></td> <td><a href="http://www.amazon.de/Windows-Presentation-Foundation-Unleashed-Nathan/dp/0672328917/ref=pd_sim_eb_1" target="_blank">Find it at Amazon</td> </tr> </table> </p> </td> </tr> <tr style="height: 200px;"> <td><img src="images/book_appcodemarkup.jpg" style="width: 130px;"></td> <td style="vertical-align: top;"> <h3>Application = Code + Markup</h3> <p>"Get the definitive guide to the Windows Presentation Foundation (WPF), the new client programming interface for the Microsoft .NET Framework 3.0 and Windows Vista. Award-winning author Charles Petzold teaches you how to combine C# code and the Extensible Application Markup Language (XAML) to develop applications for the WPF.". I cannot unterstand how anyone can write a book about a UI technology without a single illustration. If you prefer gray text to colorful images, it might be the book for you. </p> <p><table> <tr> <td style="width: 100px;"><b>Autor:</b></td> <td>Charles Petzold</td> </tr> <tr> <td style="width: 100px;"><b>ISBN:</b></td> <td>978-0735619579</td> </tr> <tr> <td style="width: 100px;"><b>Published:</b></td> <td>August 2006</td> </tr> </table> </p> </td> </tr> <tr style="height: 200px;"> <td><img src="images/book_essentialwpf.jpg" style="width: 130px;"></td> <td style="vertical-align: top;"> <h3>Essential Windows Presentation Foundation</h3> <p>Chris Anderson was one of the chief architects of the next-generation GUI stack, the Windows Presentation Framework (WPF), which is the subject of this book. Chris's insights shine a light from the internals of WPF to those standing at the entrance, guiding you through the concepts that form the foundation of his creation.</p> <p><table> <tr> <td style="width: 100px;"><b>Autor:</b></td> <td>Chris Anderson</td> </tr> <tr> <td style="width: 100px;"><b>ISBN:</b></td> <td>978-0321374479</td> </tr> <tr> <td style="width: 100px;"><b>Published:</b></td> <td>April 2007</td> </tr> </table> </p> </td> </tr> <tr style="height: 200px;"> <td><img src="images/book_foundations.jpg" style="width: 130px;"></td> <td style="vertical-align: top;"> <h3>Foundations of WPF: An Introduction to Windows Presentation Foundation </h3> <p>Foundations of WPF: An Introduction to Windows Presentation Foundation teaches you everything you need to get started with the technology, and is broken into three parts. The first introduces and contextualizes the WPF technology; the second part dives deeper into the facets of the technology that are of immediate and valuable use in developing applications; the last part offers you the real-world perspective you need to be productive in the community and customer base.</p> <p><table> <tr> <td style="width: 100px;"><b>Autor:</b></td> <td>Laurence Moroney</td> </tr> <tr> <td style="width: 100px;"><b>ISBN:</b></td> <td>978-1590597606</td> </tr> <tr> <td style="width: 100px;"><b>Published:</b></td> <td>November 2006</td> </tr> </table> </p> </td> </tr> <tr style="height: 200px;"> <td><img src="images/book_prowpf.jpg" style="width: 130px;"></td> <td style="vertical-align: top;"> <h3>Pro WPF in C# 2008</h3> <p>This book explains how WPF works from the ground up. It follows on from the author s previous and highly successful books, covering Windows Forms (WPF's predecessor technology) and earlier versions of WPF. It is a one-stop shop in Apress proven Pro style that leaves readers with a deep understanding of the technology and able to take the concepts away and apply them for themselves.</p> <p><table> <tr> <td style="width: 100px;"><b>Autor:</b></td> <td>Matthew McDonald</td> </tr> <tr> <td style="width: 100px;"><b>ISBN:</b></td> <td>978-1590599556</td> </tr> <tr> <td style="width: 100px;"><b>Published:</b></td> <td>Februar 2008</td> </tr> </table> </p> </td> </tr> <tr style="height: 200px;"> <td><img src="images/book_programming_wpf.jpg" style="width: 130px;"></td> <td style="vertical-align: top;"> <h3>Foundations of WPF: An Introduction to Windows Presentation Foundation </h3> <p>If you want to build applications that take full advantage of Windows Vista's new user interface capabilities, you need to learn Microsoft's Windows Presentation Foundation (WPF). This new edition, fully updated for the official release of .NET 3.0, is designed to get you up to speed on this technology quickly.</p> <p><table> <tr> <td style="width: 100px;"><b>Autor:</b></td> <td>Chris Sells and Ian Griffiths</td> </tr> <tr> <td style="width: 100px;"><b>ISBN:</b></td> <td>978-0596510374</td> </tr> <tr> <td style="width: 100px;"><b>Published:</b></td> <td>September 2007</td> </tr> </table> </p> </td> </tr> </table> http://www.wpftutorial.net/WPFBools.html Tue, 28 Feb 2017 04:29:25 +01002012-10-24 09:40:51 Architecture of WPF moc@zuehlke.com (Christian Moser) <h1>Architecture of WPF</h1> <p>This article is still in constuction...</p> http://www.wpftutorial.net/WPFArchitecture.html Tue, 28 Feb 2017 04:29:25 +01002012-10-23 16:32:19 Undo/Redo moc@zuehlke.com (Christian Moser) <h1>How to implement undo/redo using MVVM</h1> <h3>Introduction</h3> <p>One feature that many users demand is a neatless undo/redo integration. This means that the application allows the user to revert any modification he made - one by one - back to the start of the application and than eventually reapply them again. This improves the usability a lot, because it allows the user to carelessly use an unclear command, because he is certain, that he can undo it if he was wrong. Today undo/redo has gotten almost standard for any modern data editing application.</p> <img style="padding-left: 150px;" src="images/undoredo.png" /> <h3>The MVVM-Pattern</h3> <p>Because of the strong databinding functionality in WPF, most applications are using the popular MVVM (Model-View-ViewModel) pattern. The idea of this pattern is basically to define a class that aggregates all data and commands for a certain view and provides them to the view as properties where it can bind to. Changes on properties are notified by an event on the <code>INotifyPropertyChanged</code> interface.</p> <h3>A concept of implementing undo/redo</h3> <p>A classical approach to implement undo/redo is to allow changes on the model only through commands. And every command should be invertible. The user than executes an action, the application creates a command, executes it and puts an inverted command on the undo-stack. When the user clicks on undo, the application executes the top-most (inverse) command on the undo-stack, inverts it again (to get the original command again) and puts it on the redo-stack. That's it.</p> <p><b>Scenario 1: Executing an action</b></p> <img style="padding-left: 50px;" src="images/undoredo1.png" /> <p><b>Scenario 2: Undoing an action</b></p> <img style="padding-left: 50px;" src="images/undoredo2.png" /> <h3>Adoption for WPF</h3> <p>We start with a base class that implements the <code>INotifyPropertyChanged</code> interface and provides a private method <code>Notify(string propertyName)</code>. <div class="codeblock"><pre class="csharp csharp" style="font-family: courier new,courier,monospace;"> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #2b91af; font-weight: bold;">class</span> NotifyableObject <span style="color: #008000;">:</span> INotifyPropertyChanged <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">event</span> PropertyChangedEventHandler PropertyChanged; <span style="color: #0600FF; font-weight: bold;">protected</span> <span style="color: #0600FF; font-weight: bold;">void</span> Notify<span style="color: #000000;">&#40;</span><span style="color: #2b91af; font-weight: bold;">string</span> propertyName<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>PropertyChanged <span style="color: #008000;">!=</span> <span style="color: #0600FF; font-weight: bold;">null</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> PropertyChanged<span style="color: #000000;">&#40;</span><span style="color: #0600FF; font-weight: bold;">this</span>, <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> PropertyChangedEventArgs<span style="color: #000000;">&#40;</span>propertyName<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #000000;">&#125;</span> <span style="color: #000000;">&#125;</span> </pre></div> <p>Then we build the base class <code>TrackableObject</code> where all model objects or view models that are directly bound to the view should inherit from. <div class="codeblock"><pre class="csharp csharp" style="font-family: courier new,courier,monospace;"> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #2b91af; font-weight: bold;">class</span> TrackableObject <span style="color: #008000;">:</span> NotifyableObject <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #0600FF; font-weight: bold;">readonly</span> List<span style="color: #008000;">&lt;</span>ITrackable<span style="color: #008000;">&gt;</span> _trackableItems <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> List<span style="color: #008000;">&lt;</span>ITrackable<span style="color: #008000;">&gt;</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #2b91af; font-weight: bold;">bool</span> HasChanges <span style="color: #000000;">&#123;</span> get <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">return</span> _trackableItems.<span style="color: #0000FF;">Any</span><span style="color: #000000;">&#40;</span>i <span style="color: #008000;">=&gt;</span> i.<span style="color: #0000FF;">HasChanges</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> IModificationTracker ModificationTracker <span style="color: #000000;">&#123;</span> get; set; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">protected</span> TrackableValue<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span> RegisterTrackableValue<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #000000;">&#40;</span><span style="color: #2b91af; font-weight: bold;">string</span> propertyName, T defaultValue <span style="color: #008000;">=</span> <span style="color: #0600FF; font-weight: bold;">default</span><span style="color: #000000;">&#40;</span>T<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> var property <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> TrackableValue<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #000000;">&#40;</span>propertyName, Modify, Notify, defaultValue<span style="color: #000000;">&#41;</span>; _trackableItems.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>property<span style="color: #000000;">&#41;</span>; <span style="color: #0600FF; font-weight: bold;">return</span> property; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">protected</span> TrackableCollection<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span> RegisterTrackableCollection<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> var collection <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> TrackableCollection<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #000000;">&#40;</span>Modify<span style="color: #000000;">&#41;</span>; _trackableItems.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>collection<span style="color: #000000;">&#41;</span>; <span style="color: #0600FF; font-weight: bold;">return</span> collection; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #0600FF; font-weight: bold;">void</span> Modify<span style="color: #000000;">&#40;</span>Action doAction, Action undoAction, Action notification<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> var modification <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> Modification<span style="color: #000000;">&#40;</span>doAction, undoAction, notification<span style="color: #000000;">&#41;</span>; modification.<span style="color: #0000FF;">Execute</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; ModificationTracker.<span style="color: #0000FF;">TrackModification</span><span style="color: #000000;">&#40;</span>modification<span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #000000;">&#125;</span> </pre></div> <p>To simplify the generation of modifactions when changing a property value, we build a generic wrapper for each property called <code>TrackableValue</code>. <div class="codeblock"><pre class="csharp csharp" style="font-family: courier new,courier,monospace;"> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #2b91af; font-weight: bold;">class</span> TrackableValue<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span> <span style="color: #008000;">:</span> ITrackable <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #0600FF; font-weight: bold;">readonly</span> <span style="color: #2b91af; font-weight: bold;">string</span> _propertyName; <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #0600FF; font-weight: bold;">readonly</span> Action<span style="color: #008000;">&lt;</span>Action, Action, Action<span style="color: #008000;">&gt;</span> _modifyCallback; <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #0600FF; font-weight: bold;">readonly</span> Action<span style="color: #008000;">&lt;</span><span style="color: #2b91af; font-weight: bold;">string</span><span style="color: #008000;">&gt;</span> _notifyAction; <span style="color: #0600FF; font-weight: bold;">private</span> T _value; <span style="color: #0600FF; font-weight: bold;">public</span> TrackableValue<span style="color: #000000;">&#40;</span><span style="color: #2b91af; font-weight: bold;">string</span> propertyName, Action<span style="color: #008000;">&lt;</span>Action, Action, Action<span style="color: #008000;">&gt;</span> modifyCallback, Action<span style="color: #008000;">&lt;</span><span style="color: #2b91af; font-weight: bold;">string</span><span style="color: #008000;">&gt;</span> notifyAction, T defaultValue<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> _propertyName <span style="color: #008000;">=</span> propertyName; _modifyCallback <span style="color: #008000;">=</span> modifyCallback; _notifyAction <span style="color: #008000;">=</span> notifyAction; _value <span style="color: #008000;">=</span> defaultValue; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #2b91af; font-weight: bold;">bool</span> HasChanges <span style="color: #000000;">&#123;</span> get <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">return</span> _originalValue.<span style="color: #0000FF;">Equals</span><span style="color: #000000;">&#40;</span>_value<span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> T Value <span style="color: #000000;">&#123;</span> get <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">return</span> _value; <span style="color: #000000;">&#125;</span> set <span style="color: #000000;">&#123;</span> var oldValue <span style="color: #008000;">=</span> _value; _modifyCallback<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">=&gt;</span> _value <span style="color: #008000;">=</span> value, <span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">=&gt;</span> _value <span style="color: #008000;">=</span> oldValue, <span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">=&gt;</span> _notifyAction<span style="color: #000000;">&#40;</span>_propertyName<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #000000;">&#125;</span> <span style="color: #000000;">&#125;</span> </pre></div> <p>To same thing we need to do for collections to track add/remove of items from a collection</p> <div class="codeblock"><pre class="csharp csharp" style="font-family: courier new,courier,monospace;"> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #2b91af; font-weight: bold;">class</span> TrackableCollection<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span> <span style="color: #008000;">:</span> IList<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span>, ITrackable <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #0600FF; font-weight: bold;">readonly</span> Action<span style="color: #008000;">&lt;</span>Action, Action, Action<span style="color: #008000;">&gt;</span> _modifyCallback; <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #0600FF; font-weight: bold;">readonly</span> List<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span> _list <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> List<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #0600FF; font-weight: bold;">readonly</span> List<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span> _originalList <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> List<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; <span style="color: #0600FF; font-weight: bold;">public</span> TrackableCollection<span style="color: #000000;">&#40;</span>Action<span style="color: #008000;">&lt;</span>Action, Action, Action<span style="color: #008000;">&gt;</span> modifyCallback<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> _modifyCallback <span style="color: #008000;">=</span> modifyCallback; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">event</span> EventHandler<span style="color: #008000;">&lt;</span>EventArgs<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;&gt;</span> ItemAdded; <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">event</span> EventHandler<span style="color: #008000;">&lt;</span>EventArgs<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;&gt;</span> ItemRemoved; <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">event</span> EventHandler CollectionChanged; <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #2b91af; font-weight: bold;">bool</span> HasChanges <span style="color: #000000;">&#123;</span> get <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">if</span><span style="color: #000000;">&#40;</span> _list.<span style="color: #0000FF;">Count</span> <span style="color: #008000;">==</span> _originalList.<span style="color: #0000FF;">Count</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">return</span> _list.<span style="color: #0000FF;">Where</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#40;</span>item, index<span style="color: #000000;">&#41;</span> <span style="color: #008000;">=&gt;</span> <span style="color: #008000;">!</span>item.<span style="color: #0000FF;">Equals</span><span style="color: #000000;">&#40;</span>_originalList<span style="color: #000000;">&#91;</span>index<span style="color: #000000;">&#93;</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>.<span style="color: #0000FF;">Any</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">return</span> true; <span style="color: #000000;">&#125;</span> <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">void</span> AcceptChanges<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> _originalList.<span style="color: #0000FF;">Clear</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; _originalList.<span style="color: #0000FF;">AddRange</span><span style="color: #000000;">&#40;</span>_list<span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> IEnumerator<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span> GetEnumerator<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">return</span> _list.<span style="color: #0000FF;">GetEnumerator</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> IEnumerator IEnumerable.<span style="color: #0000FF;">GetEnumerator</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">return</span> GetEnumerator<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">void</span> Add<span style="color: #000000;">&#40;</span>T item<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> _modifyCallback<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">=&gt;</span> <span style="color: #000000;">&#123;</span> _list.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>item<span style="color: #000000;">&#41;</span>; ItemAdded.<span style="color: #0000FF;">Notify</span><span style="color: #000000;">&#40;</span><span style="color: #0600FF; font-weight: bold;">this</span>, <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> EventArgs<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #000000;">&#40;</span>item<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span>, <span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">=&gt;</span> <span style="color: #000000;">&#123;</span> _list.<span style="color: #0000FF;">Remove</span><span style="color: #000000;">&#40;</span>item<span style="color: #000000;">&#41;</span>; ItemRemoved.<span style="color: #0000FF;">Notify</span><span style="color: #000000;">&#40;</span><span style="color: #0600FF; font-weight: bold;">this</span>, <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> EventArgs<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #000000;">&#40;</span>item<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span>, OnCollectionModified<span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">void</span> Clear<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> var items <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> T<span style="color: #000000;">&#91;</span>_list.<span style="color: #0000FF;">Count</span><span style="color: #000000;">&#93;</span>; _list.<span style="color: #0000FF;">CopyTo</span><span style="color: #000000;">&#40;</span>items<span style="color: #000000;">&#41;</span>; _modifyCallback<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">=&gt;</span> <span style="color: #000000;">&#123;</span> _list.<span style="color: #0600FF; font-weight: bold;">ForEach</span><span style="color: #000000;">&#40;</span>i <span style="color: #008000;">=&gt;</span> ItemRemoved.<span style="color: #0000FF;">Notify</span><span style="color: #000000;">&#40;</span><span style="color: #0600FF; font-weight: bold;">this</span>, <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> EventArgs<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #000000;">&#40;</span>i<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>; _list.<span style="color: #0000FF;">Clear</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span>, <span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">=&gt;</span> <span style="color: #000000;">&#123;</span> _list.<span style="color: #0000FF;">AddRange</span><span style="color: #000000;">&#40;</span>items<span style="color: #000000;">&#41;</span>; _list.<span style="color: #0600FF; font-weight: bold;">ForEach</span><span style="color: #000000;">&#40;</span>i <span style="color: #008000;">=&gt;</span> ItemAdded.<span style="color: #0000FF;">Notify</span><span style="color: #000000;">&#40;</span><span style="color: #0600FF; font-weight: bold;">this</span>, <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> EventArgs<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #000000;">&#40;</span>i<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span>, OnCollectionModified<span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #2b91af; font-weight: bold;">bool</span> Contains<span style="color: #000000;">&#40;</span>T item<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">return</span> _list.<span style="color: #0000FF;">Contains</span><span style="color: #000000;">&#40;</span>item<span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">void</span> CopyTo<span style="color: #000000;">&#40;</span>T<span style="color: #000000;">&#91;</span><span style="color: #000000;">&#93;</span> array, <span style="color: #2b91af; font-weight: bold;">int</span> arrayIndex<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> _list.<span style="color: #0000FF;">CopyTo</span><span style="color: #000000;">&#40;</span>array, arrayIndex<span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #2b91af; font-weight: bold;">bool</span> Remove<span style="color: #000000;">&#40;</span>T item<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> var result <span style="color: #008000;">=</span> _list.<span style="color: #0000FF;">Contains</span><span style="color: #000000;">&#40;</span>item<span style="color: #000000;">&#41;</span>; _modifyCallback<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">=&gt;</span> <span style="color: #000000;">&#123;</span> _list.<span style="color: #0000FF;">Remove</span><span style="color: #000000;">&#40;</span>item<span style="color: #000000;">&#41;</span>; ItemRemoved.<span style="color: #0000FF;">Notify</span><span style="color: #000000;">&#40;</span><span style="color: #0600FF; font-weight: bold;">this</span>, <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> EventArgs<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #000000;">&#40;</span>item<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span>, <span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">=&gt;</span> <span style="color: #000000;">&#123;</span> _list.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>item<span style="color: #000000;">&#41;</span>; ItemAdded.<span style="color: #0000FF;">Notify</span><span style="color: #000000;">&#40;</span><span style="color: #0600FF; font-weight: bold;">this</span>, <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> EventArgs<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #000000;">&#40;</span>item<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span>, OnCollectionModified<span style="color: #000000;">&#41;</span>; <span style="color: #0600FF; font-weight: bold;">return</span> result; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #2b91af; font-weight: bold;">int</span> Count <span style="color: #000000;">&#123;</span> get <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">return</span> _list.<span style="color: #0000FF;">Count</span>; <span style="color: #000000;">&#125;</span> <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #2b91af; font-weight: bold;">bool</span> IsReadOnly <span style="color: #000000;">&#123;</span> get <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">return</span> false; <span style="color: #000000;">&#125;</span> <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #2b91af; font-weight: bold;">int</span> IndexOf<span style="color: #000000;">&#40;</span>T item<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">return</span> _list.<span style="color: #0000FF;">IndexOf</span><span style="color: #000000;">&#40;</span>item<span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">void</span> Insert<span style="color: #000000;">&#40;</span><span style="color: #2b91af; font-weight: bold;">int</span> index, T item<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> _modifyCallback<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">=&gt;</span> <span style="color: #000000;">&#123;</span> _list.<span style="color: #0000FF;">Insert</span><span style="color: #000000;">&#40;</span>index, item<span style="color: #000000;">&#41;</span>; ItemAdded.<span style="color: #0000FF;">Notify</span><span style="color: #000000;">&#40;</span><span style="color: #0600FF; font-weight: bold;">this</span>, <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> EventArgs<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #000000;">&#40;</span>item<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span>, <span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">=&gt;</span> <span style="color: #000000;">&#123;</span> _list.<span style="color: #0000FF;">Remove</span><span style="color: #000000;">&#40;</span>item<span style="color: #000000;">&#41;</span>; ItemRemoved.<span style="color: #0000FF;">Notify</span><span style="color: #000000;">&#40;</span><span style="color: #0600FF; font-weight: bold;">this</span>, <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> EventArgs<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #000000;">&#40;</span>item<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span>, OnCollectionModified<span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">void</span> RemoveAt<span style="color: #000000;">&#40;</span><span style="color: #2b91af; font-weight: bold;">int</span> index<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> var item <span style="color: #008000;">=</span> _list<span style="color: #000000;">&#91;</span>index<span style="color: #000000;">&#93;</span>; _modifyCallback<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">=&gt;</span> <span style="color: #000000;">&#123;</span> _list.<span style="color: #0000FF;">Remove</span><span style="color: #000000;">&#40;</span>item<span style="color: #000000;">&#41;</span>; ItemRemoved.<span style="color: #0000FF;">Notify</span><span style="color: #000000;">&#40;</span><span style="color: #0600FF; font-weight: bold;">this</span>, <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> EventArgs<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #000000;">&#40;</span>item<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span>, <span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">=&gt;</span> <span style="color: #000000;">&#123;</span> _list.<span style="color: #0000FF;">Insert</span><span style="color: #000000;">&#40;</span>index, item<span style="color: #000000;">&#41;</span>; ItemAdded.<span style="color: #0000FF;">Notify</span><span style="color: #000000;">&#40;</span><span style="color: #0600FF; font-weight: bold;">this</span>, <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> EventArgs<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #000000;">&#40;</span>item<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span>, OnCollectionModified<span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">public</span> T <span style="color: #0600FF; font-weight: bold;">this</span><span style="color: #000000;">&#91;</span><span style="color: #2b91af; font-weight: bold;">int</span> index<span style="color: #000000;">&#93;</span> <span style="color: #000000;">&#123;</span> get <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">return</span> _list<span style="color: #000000;">&#91;</span>index<span style="color: #000000;">&#93;</span>; <span style="color: #000000;">&#125;</span> set <span style="color: #000000;">&#123;</span> var oldItem <span style="color: #008000;">=</span> _list<span style="color: #000000;">&#91;</span>index<span style="color: #000000;">&#93;</span>; _modifyCallback<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">=&gt;</span> <span style="color: #000000;">&#123;</span> _list<span style="color: #000000;">&#91;</span>index<span style="color: #000000;">&#93;</span> <span style="color: #008000;">=</span> value; ItemAdded.<span style="color: #0000FF;">Notify</span><span style="color: #000000;">&#40;</span><span style="color: #0600FF; font-weight: bold;">this</span>, <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> EventArgs<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #000000;">&#40;</span>value<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span>, <span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">=&gt;</span> <span style="color: #000000;">&#123;</span> _list<span style="color: #000000;">&#91;</span>index<span style="color: #000000;">&#93;</span> <span style="color: #008000;">=</span> oldItem; ItemRemoved.<span style="color: #0000FF;">Notify</span><span style="color: #000000;">&#40;</span><span style="color: #0600FF; font-weight: bold;">this</span>, <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> EventArgs<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #000000;">&#40;</span>oldItem<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span>, OnCollectionModified<span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #000000;">&#125;</span> <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #0600FF; font-weight: bold;">void</span> OnCollectionModified<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> CollectionChanged.<span style="color: #0000FF;">Notify</span><span style="color: #000000;">&#40;</span><span style="color: #0600FF; font-weight: bold;">this</span>, EventArgs.<span style="color: #0000FF;">Empty</span><span style="color: #000000;">&#41;</span>; <span style="color: #000000;">&#125;</span> <span style="color: #000000;">&#125;</span> </pre></div> http://www.wpftutorial.net/UndoRedo.html Tue, 28 Feb 2017 04:29:25 +01002011-12-23 09:14:09 Grid Panel moc@zuehlke.com (Christian Moser) <h1>Grid Panel</h1> <p><a href="#Intro">Introduction</a></p> <p><a href="#add">How to define rows and columns</a></p> <p><a href="#add">How to add controls to the grid</a></p> <p><a href="#resize">Resize columns or rows</a></p> <p><a href="#sharedsize">How to share the width of a column over multiple grids</a></p> <p><a href="#gridlength">Using GridLenghts from code</a></p> <a name="Intro"><h2>Introduction</h2></a> <img src="images/v2_gridlayout.png" style="margin-left: 200px;" /> <p>The grid is a layout panel that arranges its child controls in a tabular structure of rows and columns. Its functionality is similar to the HTML table but more flexible. A cell can contain multiple controls, they can span over multiple cells and even overlap themselves.</p> <p>The resize behaviour of the controls is defined by the <code>HorizontalAlignment</code> and <code>VerticalAlignment</code> properties who define the anchors. The distance between the anchor and the grid line is specified by the margin of the control</p> <a name="rowscols"><h2>Define Rows and Columns</h2></a> <p>The grid has one row and column by default. To create additional rows and columns, you have to add <code>RowDefinition</code> items to the <code>RowDefinitions</code> collection and <code>ColumnDefinition</code> items to the <code>ColumnDefinitions</code> collection. The following example shows a grid with three rows and two columns.</p> <p>The size can be specified as an absolute amount of logical units, as a percentage value or automatically.</p> <table style="margin-left: 40px; width: 600px;"> <tr> <td style="width: 50px;"><b>Fixed</b></td> <td> Fixed size of logical units (1/96 inch)</td> </tr> <tr> <td><b>Auto</b></td> <td> Takes as much space as needed by the contained control</td> </tr> <tr> <td style="vertical-align: top"><b>Star (*)</b></td> <td>Takes as much space as available (after filling all auto and fixed sized columns), proportionally divided over all star-sized columns. So 3*/5* means the same as 30*/50*. Remember that star-sizing does not work if the grid size is calculated based on its content. </td> </tr> </table> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span style="color: #800000;">&lt;Grid<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Grid</span>.RowDefinitions<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;RowDefinition</span> <span style="color: #ff0000;">Height</span>=<span style="color: #0000ff;">&quot;Auto&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;RowDefinition</span> <span style="color: #ff0000;">Height</span>=<span style="color: #0000ff;">&quot;Auto&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;RowDefinition</span> <span style="color: #ff0000;">Height</span>=<span style="color: #0000ff;">&quot;*&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;RowDefinition</span> <span style="color: #ff0000;">Height</span>=<span style="color: #0000ff;">&quot;28&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Grid</span>.RowDefinitions<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Grid</span>.ColumnDefinitions<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;ColumnDefinition</span> <span style="color: #ff0000;">Width</span>=<span style="color: #0000ff;">&quot;Auto&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;ColumnDefinition</span> <span style="color: #ff0000;">Width</span>=<span style="color: #0000ff;">&quot;200&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Grid</span>.ColumnDefinitions<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Grid<span style="color: #800000;">&gt;</span></span></span> </pre></div><a name="add"><h2>How to add controls to the grid</h2></a> <p>To add controls to the grid layout panel just put the declaration between the opening and closing tags of the <code>Grid</code>. Keep in mind that the row- and columndefinitions must precced any definition of child controls.</p> <p>The grid layout panel provides the two attached properties <code>Grid.Column</code> and <code>Grid.Row</code> to define the location of the control.</p> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"><span style="color: #800000;"><span style="color: #800000;">&lt;Grid<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Grid</span>.RowDefinitions<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;RowDefinition</span> <span style="color: #ff0000;">Height</span>=<span style="color: #0000ff;">&quot;Auto&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;RowDefinition</span> <span style="color: #ff0000;">Height</span>=<span style="color: #0000ff;">&quot;Auto&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;RowDefinition</span> <span style="color: #ff0000;">Height</span>=<span style="color: #0000ff;">&quot;*&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;RowDefinition</span> <span style="color: #ff0000;">Height</span>=<span style="color: #0000ff;">&quot;28&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Grid</span>.RowDefinitions<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Grid</span>.ColumnDefinitions<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;ColumnDefinition</span> <span style="color: #ff0000;">Width</span>=<span style="color: #0000ff;">&quot;Auto&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;ColumnDefinition</span> <span style="color: #ff0000;">Width</span>=<span style="color: #0000ff;">&quot;200&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Grid</span>.ColumnDefinitions<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Label</span> Grid.<span style="color: #ff0000;">Row</span>=<span style="color: #0000ff;">&quot;0&quot;</span> Grid.<span style="color: #ff0000;">Column</span>=<span style="color: #0000ff;">&quot;0&quot;</span> <span style="color: #ff0000;">Content</span>=<span style="color: #0000ff;">&quot;Name:&quot;</span><span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Label</span> Grid.<span style="color: #ff0000;">Row</span>=<span style="color: #0000ff;">&quot;1&quot;</span> Grid.<span style="color: #ff0000;">Column</span>=<span style="color: #0000ff;">&quot;0&quot;</span> <span style="color: #ff0000;">Content</span>=<span style="color: #0000ff;">&quot;E-Mail:&quot;</span><span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Label</span> Grid.<span style="color: #ff0000;">Row</span>=<span style="color: #0000ff;">&quot;2&quot;</span> Grid.<span style="color: #ff0000;">Column</span>=<span style="color: #0000ff;">&quot;0&quot;</span> <span style="color: #ff0000;">Content</span>=<span style="color: #0000ff;">&quot;Comment:&quot;</span><span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;TextBox</span> Grid.<span style="color: #ff0000;">Column</span>=<span style="color: #0000ff;">&quot;1&quot;</span> Grid.<span style="color: #ff0000;">Row</span>=<span style="color: #0000ff;">&quot;0&quot;</span> <span style="color: #ff0000;">Margin</span>=<span style="color: #0000ff;">&quot;3&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;TextBox</span> Grid.<span style="color: #ff0000;">Column</span>=<span style="color: #0000ff;">&quot;1&quot;</span> Grid.<span style="color: #ff0000;">Row</span>=<span style="color: #0000ff;">&quot;1&quot;</span> <span style="color: #ff0000;">Margin</span>=<span style="color: #0000ff;">&quot;3&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;TextBox</span> Grid.<span style="color: #ff0000;">Column</span>=<span style="color: #0000ff;">&quot;1&quot;</span> Grid.<span style="color: #ff0000;">Row</span>=<span style="color: #0000ff;">&quot;2&quot;</span> <span style="color: #ff0000;">Margin</span>=<span style="color: #0000ff;">&quot;3&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Button</span> Grid.<span style="color: #ff0000;">Column</span>=<span style="color: #0000ff;">&quot;1&quot;</span> Grid.<span style="color: #ff0000;">Row</span>=<span style="color: #0000ff;">&quot;3&quot;</span> <span style="color: #ff0000;">HorizontalAlignment</span>=<span style="color: #0000ff;">&quot;Right&quot;</span> </span> <span style="color: #800000;"> <span style="color: #ff0000;">MinWidth</span>=<span style="color: #0000ff;">&quot;80&quot;</span> <span style="color: #ff0000;">Margin</span>=<span style="color: #0000ff;">&quot;3&quot;</span> <span style="color: #ff0000;">Content</span>=<span style="color: #0000ff;">&quot;Send&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Grid<span style="color: #800000;">&gt;</span></span></span> </pre></div> <a name="resize"><h2>Resizable columns or rows</h2></a> <img src="images/v2_gridsplitter.png" style="padding-left: 180px;"> <p>WPF provides a control called the <code>GridSplitter</code>. This control is added like any other control to a cell of the grid. The special thing is that is grabs itself the nearest gridline to change its width or height when you drag this control around.</p> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"><span style="color: #800000;"><span style="color: #800000;">&lt;Grid<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Grid</span>.ColumnDefinitions<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;ColumnDefinition</span> <span style="color: #ff0000;">Width</span>=<span style="color: #0000ff;">&quot;*&quot;</span><span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;ColumnDefinition</span> <span style="color: #ff0000;">Width</span>=<span style="color: #0000ff;">&quot;Auto&quot;</span><span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;ColumnDefinition</span> <span style="color: #ff0000;">Width</span>=<span style="color: #0000ff;">&quot;*&quot;</span><span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Grid</span>.ColumnDefinitions<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Label</span> <span style="color: #ff0000;">Content</span>=<span style="color: #0000ff;">&quot;Left&quot;</span> Grid.<span style="color: #ff0000;">Column</span>=<span style="color: #0000ff;">&quot;0&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;GridSplitter</span> <span style="color: #ff0000;">HorizontalAlignment</span>=<span style="color: #0000ff;">&quot;Right&quot;</span> </span> <span style="color: #800000;"> <span style="color: #ff0000;">VerticalAlignment</span>=<span style="color: #0000ff;">&quot;Stretch&quot;</span> </span> <span style="color: #800000;"> Grid.<span style="color: #ff0000;">Column</span>=<span style="color: #0000ff;">&quot;1&quot;</span> <span style="color: #ff0000;">ResizeBehavior</span>=<span style="color: #0000ff;">&quot;PreviousAndNext&quot;</span></span> <span style="color: #800000;"> <span style="color: #ff0000;">Width</span>=<span style="color: #0000ff;">&quot;5&quot;</span> <span style="color: #ff0000;">Background</span>=<span style="color: #0000ff;">&quot;#FFBCBCBC&quot;</span><span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Label</span> <span style="color: #ff0000;">Content</span>=<span style="color: #0000ff;">&quot;Right&quot;</span> Grid.<span style="color: #ff0000;">Column</span>=<span style="color: #0000ff;">&quot;2&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Grid<span style="color: #800000;">&gt;</span></span></span> </pre></div> <p>The best way to align a grid splitter is to place it in its own auto-sized column. Doing it this way prevents overlapping to adjacent cells. To ensure that the grid splitter changes the size of the previous and next cell you have to set the <code>ResizeBehavior</code> to <code>PreviousAndNext</code>.</p> <p>The splitter normally recognizes the resize direction according to the ratio between its height and width. But if you like you can also manually set the <code> ResizeDirection</code> to <code>Columns</code> or <code>Rows</code>. <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"><span style="color: #800000;"><span style="color: #800000;">&lt;GridSplitter</span> <span style="color: #ff0000;">ResizeDirection</span>=<span style="color: #0000ff;">&quot;Columns&quot;</span><span style="color: #800000;">/&gt;</span></span> </pre></div> <a name="sharedsize"><h2>How to share the width of a column over multiple grids</h2></a> <p>The shared size feature of the grid layout allows it to synchronize the width of columns over multiple grids. The feature is very useful if you want to realize a multi-column listview by using a grid as layout panel within the data template. Because each item contains its own grid, the columns will not have the same width.</p> <p>By setting the attached property <code>Grid.IsSharedSizeScope</code> to <code>true</code> on a parent element you define a scope within the column-widths are shared.</p> <p>To synchronize the width of two columndefinitions, set the <code>SharedSizeGroup</code> to the same name.</p> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span style="color: #800000;">&lt;ItemsControl</span> Grid.<span style="color: #ff0000;">IsSharedSizeScope</span>=<span style="color: #0000ff;">&quot;True&quot;</span> <span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;ItemsControl</span>.ItemTemplate<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;DataTemplate<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Grid<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Grid</span>.ColumnDefinitions<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;ColumnDefinition</span> <span style="color: #ff0000;">SharedSizeGroup</span>=<span style="color: #0000ff;">&quot;FirstColumn&quot;</span> <span style="color: #ff0000;">Width</span>=<span style="color: #0000ff;">&quot;Auto&quot;</span><span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;ColumnDefinition</span> <span style="color: #ff0000;">Width</span>=<span style="color: #0000ff;">&quot;*&quot;</span><span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Grid</span>.ColumnDefinitions<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;TextBlock</span> <span style="color: #ff0000;">Text</span>=<span style="color: #0000ff;">&quot;{Binding Path=Key}&quot;</span> <span style="color: #ff0000;">TextWrapping</span>=<span style="color: #0000ff;">&quot;Wrap&quot;</span><span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;TextBlock</span> <span style="color: #ff0000;">Text</span>=<span style="color: #0000ff;">&quot;{Binding Path=Value}&quot;</span> Grid.<span style="color: #ff0000;">Column</span>=<span style="color: #0000ff;">&quot;1&quot;</span> <span style="color: #ff0000;">TextWrapping</span>=<span style="color: #0000ff;">&quot;Wrap&quot;</span><span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Grid<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/DataTemplate<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/ItemsControl</span>.ItemTemplate<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/ItemsControl<span style="color: #800000;">&gt;</span></span></span> </pre></div><h3>Useful Hints</h3> <p>Columns and rows that participate in size-sharing do not respect Star sizing. In the size-sharing scenario, Star sizing is treated as Auto. Since TextWrapping on TextBlocks within an SharedSize column does not work you can exclude your last column from the shared size. This often helps to resolve the problem.</p> <a name="gridlength"><h2>Using GridLenghts from code</h2></a> <p>If you want to add columns or rows by code, you can use the <code>GridLength</code> class to define the differenz types of sizes.</p> <br/> <table style="margin-left: 30px;"> <tr> <td style="width: 100px;"><b>Auto sized</b></td> <td><code>GridLength.Auto</code> </td> </tr> <tr> <td><b>Star sized</b></td> <td><code>new GridLength(1,GridUnitType.Star)</td> </tr> <tr> <td><b>Fixed size</b></td> <td><code>new GridLength(100,GridUnitType.Pixel)</td> </tr> </table> <div class="codeblock"><pre class="csharp csharp" style="font-family: courier new,courier,monospace;">Grid grid <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> Grid<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; ColumnDefinition col1 <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> ColumnDefinition<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; col1.<span style="color: #0000FF;">Width</span> <span style="color: #008000;">=</span> GridLength.<span style="color: #0000FF;">Auto</span>; ColumnDefinition col2 <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> ColumnDefinition<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>; col2.<span style="color: #0000FF;">Width</span> <span style="color: #008000;">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: #0000ff; font-weight: bold;">new</span></a> GridLength<span style="color: #000000;">&#40;</span><span style="color: #FF0000;">1</span>,GridUnitType.<span style="color: #0000FF;">Star</span><span style="color: #000000;">&#41;</span>; grid.<span style="color: #0000FF;">ColumnDefinitions</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>col1<span style="color: #000000;">&#41;</span>; grid.<span style="color: #0000FF;">ColumnDefinitions</span>.<span style="color: #0000FF;">Add</span><span style="color: #000000;">&#40;</span>col2<span style="color: #000000;">&#41;</span>; </pre></div> <h2>More on this topic</h2> <a href="GridSplitter.html">How to create a resizable column</a> http://www.wpftutorial.net/GridLayout.html Tue, 28 Feb 2017 04:29:25 +01002011-10-03 09:22:29 Introduction to WPF moc@zuehlke.com (Christian Moser) <h1>Introduction to Windows Presentation Foundation</h1> <h2>Overview</h2> <p>The Windows Presentation Foundation is Microsofts next generation UI framework to create applications with a rich user experience. It is part of the .NET framework 3.0 and higher.</p> <p>WPF combines application UIs, 2D graphics, 3D graphics, documents and multimedia into one single framework. Its vector based rendering engine uses hardware acceleration of modern graphic cards. This makes the UI faster, scalable and resolution independent.</p> <p>The followinig illustration gives you an overview of the main new features of WPF</p> <img src="images/wpfMainFeatures.png" style="padding: 10px; padding-left: 120px;" /> <h2>Separation of Appearance and Behavior</h2> <p>WPF separates the appearance of an user interface from its behavior. The appearance is generally specified in the <a href="XAML.html">Extensible Application Markup Language</a> (XAML), the behavior is implemented in a managed programming language like C# or Visual Basic. The two parts are tied together by databinding, events and commands. The separation of appearance and behavior brings the following benefits: <ul> <li>Appearance and behaviour are loosely coupled</li> <li>Designers and developers can work on separate models.</li> <li>Graphical design tools can work on simple XML documents instead of parsing code.</li> </ul> </p> <h2>Rich composition</h2> <p>Controls in WPF are extremely composable. You can define almost any type of controls as content of another. Although these flexibility sounds horrible to designers, its a very powerful feature if you use it appropriate. Put an image into a button to create an image button, or put a list of videos into a combobox to choose a video file.</p> <img style="padding-left: 150px;" src="images/playsound_button.png" /> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span style="color: #800000;">&lt;Button<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;StackPanel</span> <span style="color: #ff0000;">Orientation</span>=<span style="color: #0000ff;">&quot;Horizontal&quot;</span><span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Image</span> <span style="color: #ff0000;">Source</span>=<span style="color: #0000ff;">&quot;speaker.png&quot;</span> <span style="color: #ff0000;">Stretch</span>=<span style="color: #0000ff;">&quot;Uniform&quot;</span><span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;TextBlock</span> <span style="color: #ff0000;">Text</span>=<span style="color: #0000ff;">&quot;Play Sound&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/StackPanel<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Button<span style="color: #800000;">&gt;</span></span></span> </pre></div> <h2>Highly customizable</h2> <p>Because of the strict separation of appearance and behavior you can easily change the look of a control. The concept of <a href="Styles.html">styles</a> let you skin controls almost like CSS in HTML. <a href="Templates.html">Templates</a> let you replace the entire appearance of a control.</p> <p>The following example shows an default WPF button and a customized button.</p> <img style="padding-left: 100px;" src="images/introduction_buttons.png" /> <h2>Resolution independence</h2> <p>All measures in WPF are logical units - not pixels. A logical unit is a 1/96 of an inch. If you increase the resolution of your screen, the user interface stays the same size - it just gets crispier. Since WPF builds on a vector based rendering engine it's incredibly easy to build scaleable user interfaces.</p> <img style="padding-left: 120px;" src="images/wpf_scaling.png" /> http://www.wpftutorial.net/WPFIntroduction.html Tue, 28 Feb 2017 04:29:25 +01002011-08-15 18:49:42 ContextMenu moc@zuehlke.com (Christian Moser) <h1>Context Menus in WPF</h1> <p>Context Menus can be defined on any WPF controls by setting the <code>ContextMenu</code> property to an instance of a <code>ContextMenu</code>. The items of a context menu are normal <code>MenuItems</code>.</p> <img style="padding: 10px; padding-left: 120px;" src='images/contextmenu.jpg' /> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span style="color: #800000;">&lt;RichTextBox<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;RichTextBox</span>.ContextMenu<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;ContextMenu<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;MenuItem</span> <span style="color: #ff0000;">Command</span>=<span style="color: #0000ff;">&quot;Cut&quot;</span><span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;MenuItem</span>.Icon<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Image</span> <span style="color: #ff0000;">Source</span>=<span style="color: #0000ff;">&quot;Images/cut.png&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/MenuItem</span>.Icon<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/MenuItem<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;MenuItem</span> <span style="color: #ff0000;">Command</span>=<span style="color: #0000ff;">&quot;Copy&quot;</span><span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;MenuItem</span>.Icon<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Image</span> <span style="color: #ff0000;">Source</span>=<span style="color: #0000ff;">&quot;Images/copy.png&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/MenuItem</span>.Icon<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/MenuItem<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;MenuItem</span> <span style="color: #ff0000;">Command</span>=<span style="color: #0000ff;">&quot;Paste&quot;</span><span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;MenuItem</span>.Icon<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Image</span> <span style="color: #ff0000;">Source</span>=<span style="color: #0000ff;">&quot;Images/paste.png&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/MenuItem</span>.Icon<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/MenuItem<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/ContextMenu<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/RichTextBox</span>.ContextMenu<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/RichTextBox<span style="color: #800000;">&gt;</span></span></span> </pre></div> <h2>Show ContextMenus on a disabled controls</h2> <p>If you rightclick on a disabled control, no context menu is shown by default. To enable the context menu for disabled controls you can set the <code>ShowOnDisabled</code> attached property of the <code>ContextMenuService</code> to <code>True</code>.</p> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span style="color: #800000;">&lt;RichTextBox</span> <span style="color: #ff0000;">IsEnabled</span>=<span style="color: #0000ff;">&quot;False&quot;</span> ContextMenuService.<span style="color: #ff0000;">ShowOnDisabled</span>=<span style="color: #0000ff;">&quot;True&quot;</span><span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;RichTextBox</span>.ContextMenu<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;ContextMenu<span style="color: #800000;">&gt;</span></span></span> ... <span style="color: #800000;"><span style="color: #800000;">&lt;/ContextMenu<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/RichTextBox</span>.ContextMenu<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/RichTextBox<span style="color: #800000;">&gt;</span></span></span> </pre></div> <h2>Merge ContextMenus</h2> <p>If you want to fill a menu with items coming from multiple sources, you can use the <code>CompositeCollection</code> to merge multiple collection into one.</p> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span style="color: #800000;">&lt;Window</span> <span style="color: #ff0000;">xmlns</span>=<span style="color: #0000ff;">&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;</span></span> <span style="color: #800000;"> <span style="color: #ff0000;">xmlns:x</span>=<span style="color: #0000ff;">&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;</span></span> <span style="color: #800000;"> <span style="color: #ff0000;">xmlns:sys</span>=<span style="color: #0000ff;">&quot;clr-namespace:System;assembly=mscorlib&quot;</span><span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Grid</span> <span style="color: #ff0000;">Background</span>=<span style="color: #0000ff;">&quot;Transparent&quot;</span><span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Grid</span>.Resources<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;x:Array</span> <span style="color: #ff0000;">Type</span>=<span style="color: #0000ff;">&quot;{x:Type sys:Object}&quot;</span> <span style="color: #ff0000;">x:Key</span>=<span style="color: #0000ff;">&quot;extensions&quot;</span><span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Separator</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;MenuItem</span> <span style="color: #ff0000;">Header</span>=<span style="color: #0000ff;">&quot;Extension MenuItem 1&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;MenuItem</span> <span style="color: #ff0000;">Header</span>=<span style="color: #0000ff;">&quot;Extension MenuItem 2&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;MenuItem</span> <span style="color: #ff0000;">Header</span>=<span style="color: #0000ff;">&quot;Extension MenuItem 3&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/x:Array<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Grid</span>.Resources<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Grid</span>.ContextMenu<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;ContextMenu<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;ContextMenu</span>.ItemsSource<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;CompositeCollection<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;MenuItem</span> <span style="color: #ff0000;">Header</span>=<span style="color: #0000ff;">&quot;Standard MenuItem 1&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;MenuItem</span> <span style="color: #ff0000;">Header</span>=<span style="color: #0000ff;">&quot;Standard MenuItem 2&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;MenuItem</span> <span style="color: #ff0000;">Header</span>=<span style="color: #0000ff;">&quot;Standard MenuItem 3&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;CollectionContainer</span> <span style="color: #ff0000;">Collection</span>=<span style="color: #0000ff;">&quot;{StaticResource extensions}&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/CompositeCollection<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/ContextMenu</span>.ItemsSource<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/ContextMenu<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Grid</span>.ContextMenu<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Grid<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Window<span style="color: #800000;">&gt;</span></span></span> </pre></div> <h2 id="mvvm">How to bind a Command on a ContextMenu within a DataTemplate using MVVM</h2> <p>Since the <code>Popuup</code> control has it's separate visual tree, you cannot use find ancestor to find the <code>Grid</code>. The trick here is to use the <code>PlacementTarget</code> property, that contains the element, the ContextMenu is aligned to, what is the <code>Grid</code> in our case.</p> <p>But this is only half of the solution. Because of the data template, the <code>DataContext</code> is set to a dataitem, and not the view model. So you need another relative source lookup, to find the view model. Trick Nr. 2 is to use the <code>Tag</code> property to bind the view model from outside to the grid, which is the <code>PlacementTarget</code> used above. And there we are.</p> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span style="color: #800000;">&lt;DataTemplate<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Grid</span> <span style="color: #ff0000;">Tag</span>=<span style="color: #0000ff;">&quot;{Binding DataContext, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}&quot;</span><span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Grid</span>.ContextMenu<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;ContextMenu</span> <span style="color: #ff0000;">DataContext</span>=<span style="color: #0000ff;">&quot;{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource Self}}&quot;</span><span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;MenuItem</span> <span style="color: #ff0000;">Content</span>=<span style="color: #0000ff;">&quot;Cut&quot;</span> <span style="color: #ff0000;">Command</span>=<span style="color: #0000ff;">&quot;{Binding CutCommand}&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;MenuItem</span> <span style="color: #ff0000;">Content</span>=<span style="color: #0000ff;">&quot;Copy&quot;</span> <span style="color: #ff0000;">Command</span>=<span style="color: #0000ff;">&quot;{Binding CopyCommand}&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;MenuItem</span> <span style="color: #ff0000;">Content</span>=<span style="color: #0000ff;">&quot;Paste&quot;</span> <span style="color: #ff0000;">Command</span>=<span style="color: #0000ff;">&quot;{Binding PasteCommand}&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/ContextMenu<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Grid</span>.ContextMenu<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Grid<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/DataTemplate<span style="color: #800000;">&gt;</span></span></span> </pre></div> <h2>How to open a context menu from code</h2> <p>The following sample shows you how to open a context menu of a control programmatically:</p> <div class="codeblock"><pre class="csharp csharp" style="font-family: courier new,courier,monospace;"> <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #0600FF; font-weight: bold;">void</span> OpenContextMenu<span style="color: #000000;">&#40;</span>FrameworkElement element<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> <span style="color: #0600FF; font-weight: bold;">if</span><span style="color: #000000;">&#40;</span> element.<span style="color: #0000FF;">ContextMenu</span> <span style="color: #008000;">!=</span> <span style="color: #0600FF; font-weight: bold;">null</span> <span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span> element.<span style="color: #0000FF;">ContextMenu</span>.<span style="color: #0000FF;">PlacementTarget</span> <span style="color: #008000;">=</span> element; element.<span style="color: #0000FF;">ContextMenu</span>.<span style="color: #0000FF;">IsOpen</span> <span style="color: #008000;">=</span> true; <span style="color: #000000;">&#125;</span> <span style="color: #000000;">&#125;</span> </pre></div> http://www.wpftutorial.net/ContextMenu.html Tue, 28 Feb 2017 04:29:25 +01002011-05-23 08:36:43 ListBox moc@zuehlke.com (Christian Moser) <h1>WPF ListBox Control</h1> <img style="padding-left: 80px;" src="images/listbox1.png" /> <h2>Introduction</h2> <p>The ListBox control displays a list of items. The user can select one or multiple items depending on the selection mode. The typical usage of a listbox in WPF is to bind its items to a list of business objects and display them by applying a data template.</p> <br/> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span style="color: #800000;">&lt;ListBox</span> <span style="color: #ff0000;">Margin</span>=<span style="color: #0000ff;">&quot;20&quot;</span><span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;ListBoxItem<span style="color: #800000;">&gt;</span></span></span>New York<span style="color: #800000;"><span style="color: #800000;">&lt;/ListBoxItem<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;ListBoxItem<span style="color: #800000;">&gt;</span></span></span>Los Angeles<span style="color: #800000;"><span style="color: #800000;">&lt;/ListBoxItem<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;ListBoxItem<span style="color: #800000;">&gt;</span></span></span>Paris<span style="color: #800000;"><span style="color: #800000;">&lt;/ListBoxItem<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;ListBoxItem<span style="color: #800000;">&gt;</span></span></span>Zurich<span style="color: #800000;"><span style="color: #800000;">&lt;/ListBoxItem<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/ListBox<span style="color: #800000;">&gt;</span></span></span> </pre></div> <h2>How to define a Trigger for IsSelected in the DataTemplate</h2> <p>If you want to change the appearance of a ListBoxItem when it is selected, you have to bind the IsSelected property of the ListBoxItem. But this is a bit tricky, you have to use a relative source with FindAcestor to navigate up the visual tree until you reach the ListBoxItem.</p> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span style="color: #800000;">&lt;DataTemplate</span> <span style="color: #ff0000;">x:Key</span>=<span style="color: #0000ff;">&quot;myDataTemplate&quot;</span><span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Border</span> <span style="color: #ff0000;">x:Name</span>=<span style="color: #0000ff;">&quot;border&quot;</span> <span style="color: #ff0000;">Height</span>=<span style="color: #0000ff;">&quot;50&quot;</span><span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;TextBlock</span> <span style="color: #ff0000;">Text</span>=<span style="color: #0000ff;">&quot;{Binding Text}&quot;</span> <span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Border<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;DataTemplate</span>.Triggers<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;DataTrigger</span> <span style="color: #ff0000;">Binding</span>=<span style="color: #0000ff;">&quot;{Binding RelativeSource=</span> <span style="color: #800000;"> {RelativeSource Mode=FindAncestor, AncestorType=</span> <span style="color: #800000;"> {x:Type ListBoxItem}},Path=IsSelected}&quot;</span> <span style="color: #ff0000;">Value</span>=<span style="color: #0000ff;">&quot;True&quot;</span><span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;Setter</span> <span style="color: #ff0000;">TargetName</span>=<span style="color: #0000ff;">&quot;border&quot;</span> <span style="color: #ff0000;">Property</span>=<span style="color: #0000ff;">&quot;Height&quot;</span> <span style="color: #ff0000;">Value</span>=<span style="color: #0000ff;">&quot;100&quot;</span><span style="color: #800000;">/&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/DataTrigger<span style="color: #800000;">&gt;</span></span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/DataTemplate</span>.Triggers<span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/DataTemplate<span style="color: #800000;">&gt;</span></span></span> </pre></div> <h2>More articles about the ListBox</h2> [sublist] http://www.wpftutorial.net/ListBox.html Tue, 28 Feb 2017 04:29:25 +01002011-05-23 08:36:27 Designtime vs. Runtime moc@zuehlke.com (Christian Moser) <h1>Designtime vs. Runtime</h1> <h2>Introduction</h2> <p>An application often looks great at runtime, but when you open it in a designer like VisualStudio or Expression Blend, the experience is quite different. The rason is that at designtime: <ul> <li><b>UserControls are not embedded in a parent view</b> <ul> <li>Width and Height are not set</li> </ul> </li> <li><b>Constructor of the root-element is not called</b> <ul> <li>Root Element is replaced by the designer</li> <li>ViewModel is not created</li> </ul> <li><b>Controls behave different</b> <ul> <li>No mouse and keyboard events</li> <li>Design time extensions loaded</li> </ul> </li> </ul> This can be kind of annoying, especially if you want to edit data templates or layout controls.</p> <img src="images/designtimevsruntime.png" style="margin-left: 50px;" /> <h2>Designtime attributes</h2> <p>To improve the design experience, Microsoft provides special designtime attributes that can be added to any WPF element and serve as a hint for the design tool.</p> <p>The designtime attributes are defined in a special namespace, that is usually mapped to the <code>d:</code> prefix. To tell the XAML parser not to interprete these attributes at runtime, the markup compatibility namespace is mapped to <code>mc:</code> and with the <code>mc:Ignorable="d"</code> instruction, the <code>d:</code> namespace is excluded.</p> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span style="color: #800000;">&lt;Window</span> </span> <span style="color: #800000;"> xmlns:d =<span style="color: #0000ff;">&quot;http://schemas.microsoft.com/expression/blend/2008&quot;</span></span> <span style="color: #800000;"> <span style="color: #ff0000;">xmlns:mc</span>=<span style="color: #0000ff;">&quot;http://schemas.openxmlformats.org/markup-compatibility/2006&quot;</span></span> <span style="color: #800000;"> <span style="color: #ff0000;">mc:Ignorable</span>=<span style="color: #0000ff;">&quot;d&quot;</span> <span style="color: #800000;">/&gt;</span></span> </pre></div> <h2><code>d:DesignHeight</code> and <code>d:DesignWidth</code></h2> <p>The <code>d:DesignHeight</code> and <code>d:DesignWidth</code> sets a fixed height and width for the element at designtime</p> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span style="color: #800000;">&lt;UserControl</span></span> <span style="color: #800000;"> <span style="color: #ff0000;">xmlns</span>=<span style="color: #0000ff;">&quot;http://schemas.microsoft.com/...&quot;</span></span> <span style="color: #800000;"> <span style="color: #ff0000;">xmlns:x</span>=<span style="color: #0000ff;">&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;</span></span> <span style="color: #800000;"> <span style="color: #ff0000;">d:DesignWidth</span>=<span style="color: #0000ff;">&quot;640&quot;</span> <span style="color: #ff0000;">d:DesignHeight</span>=<span style="color: #0000ff;">&quot;480&quot;</span> <span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;UserControl</span> <span style="color: #800000;">/&gt;</span></span> </pre></div> <h2><code>d:LayoutOverrides</code></h2> <p>If a property is set to a fixed value at runtime, but you want to override it at designtime, you can use the <code>d:LayoutOverrides</code> attribute. All properties that should be ignored at designtime can be listed, separated by a semicolon.</p> <div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span style="color: #800000;">&lt;Border</span> <span style="color: #ff0000;">Height</span>=<span style="color: #0000ff;">&quot;250&quot;</span> <span style="color: #ff0000;">Width</span>=<span style="color: #0000ff;">&quot;160&quot;</span> <span style="color: #ff0000;">d:LayoutOverrides</span>=<span style="color: #0000ff;">&quot;Width, Height&quot;</span> <span style="color: #800000;">&gt;</span></span> <span style="color: #800000;"><span style="color: #800000;">&lt;/Border<span style="color: #800000;">&gt;</span></span></span> </pre></div> <h2>Additional Resources</h2> <a href="http://msdn.microsoft.com/en-us/library/ff602277(v=vs.95).aspx">MSDN Designtime-attributes</a> <p><b>This article is still under construction</b></p> http://www.wpftutorial.net/DesigntimeVsRuntime.html Tue, 28 Feb 2017 04:29:25 +01002011-05-04 15:22:02