Index of Locally Available Projects:: WPF Tutorials 2

List of available projects - HTTrack Website Copier
HTTrack Website Copier - Open Source offline browser
Index of locally available projects:

WPF TUTORIALS 2

· wpftutorial.net
Mirror and index made by HTTrack Website Copier [XR&CO'2008]
© 2008 Xavier Roche & other contributors - Web Design: Leto Kauler.
index.html[2/16/2014 2:22:30 PM]

WPF Tutorial
Home Share... Feed About Christian Moser

Home
WPF Inspector Welcome to the WPF Tutorial Tip of the Day
Getting started
Setting a local value on a
Fundamentals dependency property clears an
eventually set binding. Use
User Experience
SetCurrentValue() in .NET 4.0
Patterns to work around this issue.
Controls
Custom Controls Popular Articles

Layout
Learn WPF in two Weeks
Input
Introduction to WPF
Data Binding
DataGrid
Styling
Create a simple WPF
Localization application
Interaction XAML
Resources Grid Panel
2D Graphics Dependency Properties
Welcome to my website about the Windows Presentation Foundation. The tutorials will
3D Graphics Development Tools
show you how to create the next generation user experience. I hope you will get amazed
Animation by the possibilities of this fascinating technology.
Multimedia
Latest Articles
Documents
(2013/11/01)
XAML
Windows 7
WPF Inspector
Interoperability
List of 3rd-Party Controls
Performance
Query Screen Resolutions
Expression Blend
Books
Tools
XAML Inspector is the successor of WPF Inspector. It makes all the features you love from
Undo/Redo
UI Automation this tool available on all XAML platforms.
To learn more visit: www.xamlinspector.com Grid Panel
Introduction to WPF
index.html[2/16/2014 2:23:07 PM]

WPF Tutorial
Copyright (c) by Christian Moser, 2011.
index.html[2/16/2014 2:23:07 PM]

WPF Tutorial

Home
WPF Inspector Welcome to the WPF Tutorial Tip of the Day
Getting started
A shared Freezable inherits its
Fundamentals DataContext from the
resource dictionary its defined
User Experience
in, whereas a non-shared
Patterns Freezable inherits it from the
place in the VisualTree its
Controls inserted.
Custom Controls
Layout
Popular Articles
Input
Data Binding
Styling
Introduction to WPF
Localization
DataGrid
Interaction
Create a simple WPF
application
Resources
XAML
2D Graphics
Grid Panel
Welcome to my website about the Windows Presentation Foundation. The tutorials will
3D Graphics
show you how to create the next generation user experience. I hope you will get amazed Dependency Properties
Animation by the possibilities of this fascinating technology.
Development Tools
Multimedia
Documents
(2013/11/01)
Latest Articles
Windows 7
Interoperability XAML
Performance WPF Inspector
Expression Blend List of 3rd-Party Controls
Tools Query Screen Resolutions

XAML Inspector is the successor of WPF Inspector. It makes all the features you love from
UI Automation this tool available on all XAML platforms. Books
To learn more visit: www.xamlinspector.com Undo/Redo
Grid Panel
Home.html[2/16/2014 2:23:26 PM]

WPF Tutorial
Introduction to WPF
Home.html[2/16/2014 2:23:26 PM]

Christian Moser's WPF Tutorial.net

News and tutorials around the Windows Presentation Foundation
en
http://www.wpftutorial.net
Sun, 16 Feb 2014
08:23:05 +0100
moc@zuehlke.com (Christian Moser)
<h1>Introduction to XAML</h1>
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.

Today XAML is used to create user interfaces in WPF, Silverlight, declare workflows in WF and for electronic
paper in the XPS standard.
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.
<h2>Advantages of XAML</h2>

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:
<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>
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#.
<div class="codeblock"><pre class="xaml xaml" style="font-family:
courier new,courier,monospace;"> <StackPanel>
<TextBlock Margin=
"20">Welcome
to the World of XAML</TextBlock>
<Button Margin="10" HorizontalAlignment="Right">OK</Button>

</StackPanel>

</pre></div>The same expressed in C# will look like this:
<div class="codeblock">
<pre class="csharp csharp" style="font-family: courier new,courier,monospace;"> //
Create the StackPanel
StackPanel stackPanel = <a
href="http://www.google.com/search?q=new+msdn.microsoft.com">new</a> StackPanel();
this.Content = stackPanel;
//
Create the TextBlock
TextBlock textBlock = <a
bold;">new</a> TextBlock();
textBlock.Margin =
 <a href="http://www.google.com/search?q=new+msdn.microsoft.com">new</a> Thickness(10);
textBlock.Text = "Welcome to
the World of XAML";
stackPanel.Children.Add(textBlock)
;
// Create the Button
Button button =
weight: bold;">new</a> Button();
button.Margin=
weight: bold;">new</a> Thickness(20);
button.Content = "OK";
stackPanel.Children.Add(button)
;
</pre></div>As you can see is the XAML version much shorter and clearer to read. And that's the power
rss.html[2/16/2014 2:23:27 PM]

of XAMLs expressiveness.
<h2>Properties as Elements</h2>
Properties are normally written inline as known
from XML <code><Button Content="OK" /></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.
<div class="codeblock"><pre class="xaml
xaml" style="font-family: courier new,courier,monospace;"> <Button>

<Button.Content>
<Image Source="Images/OK.png" Width="50" Height="50" />
#800000;"></Button.Content>
</Button>
</pre></div>
<h2>Implicit Type conversion</h2>
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.

<div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <Border BorderBrush="Blue" BorderThickness="0,10">
</Border</div>
<h2>Markup Extensions</h2>
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>Binding
 To bind the values of two properties together.</li>
<li>StaticResource One time lookup of a resource
entry</li>
<li>DynamicResource Auto updating lookup of a resource entry</li>
<li>
TemplateBinding To bind a property of a control template to a dependency property of the control</li>
<li>x:Static Resolve the value of a static property.</li>
<li>x:Null 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.

<div
class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;"> <TextBox x:Name="textBox"/>
<Label Content="{Binding Text, ElementName=textBox}"
/>
</pre></div>
<h2>Namespaces</h2>
At the
beginning of every XAML file you need to include two namespaces. 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>. 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. 
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.
<div
#800000;"><Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">


</Window>
</pre></div>
http://www.wpftutorial.net/XAML.html
Sun, 16 Feb 2014
08:23:05 +01002013-12-13 09:08:46
<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;" />
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.
 
[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
Sun, 16 Feb 2014 08:23:05 +01002013-11-01 12:06:36
moc@zuehlke.com
(Christian Moser)
<h1>WPF Inspector</h1>
<h2>NEW: XAML Inspector - cross platform visual Debugging</h2>

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).
Visit project page: <a
href="http://www.xamlinspector.com" target="_blank">www.xamlinspector.com</a>
<img
src="images/inspector_ad.jpg" />
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.
<a
href="http://wpfinspector.codeplex.com/">Download WPF Inspector from CodePlex</a>
 

http://www.wpftutorial.net/Inspector.html
Sun, 16 Feb 2014 08:23:05 +01002013-10-17 13:47:17
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.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
rss.html[2/16/2014 2:23:27 PM]

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&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
rss.html[2/16/2014 2:23:27 PM]

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 & 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
rss.html[2/16/2014 2:23:27 PM]

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
Sun, 16 Feb 2014 08:23:05 +01002013-03-08 21:43:42
<h1>WPF replacemenet for <code>Screen.AllScreens()</code></h1> 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.). 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. <div
class="codeblock"><pre class="csharp csharp" style="font-family: courier new,courier,monospace;"> public class Monitor { #region
Dll imports [DllImport(
"user32.dll", CharSet =
 CharSet.Auto)
] [
ResourceExposure(ResourceScope.None)]
private static extern bool GetMonitorInfo (HandleRef hmonitor,
[In, Out]MonitorInfoEx
info); [DllImport("user32.dll", ExactSpelling
= true)] [ResourceExposure(ResourceScope.None)] private static extern bool EnumDisplayMonitors (
HandleRef hdc, IntPtr rcClip, MonitorEnumProc lpfnEnum, IntPtr dwData); private delegate bool
MonitorEnumProc (IntPtr monitor, IntPtr hdc, IntPtr lprcMonitor, IntPtr
lParam); [
StructLayout(LayoutKind.Sequential)]
rss.html[2/16/2014 2:23:27 PM]

 private struct Rect { public int left; public int top; public int right; public int bottom; } [StructLayout(LayoutKind.Sequential, CharSet = CharSet.Auto, Pack = 4)]
private class MonitorInfoEx { internal int cbSize = Marshal.<a href="http://www.google.com/search?q=sizeof+msdn.microsoft.com">
SizeOf</a>(<a
href="http://www.google.com/search?q=typeof+msdn.microsoft.com">typeof</a>(MonitorInfoEx)); internal Rect rcMonitor = <a
bold;">new</a> Rect()
;
internal Rect rcWork = <a href="http://www.google.com/search?q=new+msdn.microsoft.com">new</a> Rect();
internal int dwFlags = 0;
[MarshalAs(UnmanagedType.ByValArray, SizeConst = 32)]
internal char[]
szDevice = <a href="http://www.google.com/search?
q=new+msdn.microsoft.com">new</a> char[32];
}
bold;">const int MonitorinfofPrimary = 0x00000001;
#endregion
public static HandleRef NullHandleRef = <a
bold;">new</a> HandleRef(null, IntPtr.Zero)
;
public System.Windows.Rect Bounds { get; private set; }
public System.Windows.Rect WorkingArea { get; private set; }
public string Name { get;
private set; }
rss.html[2/16/2014 2:23:27 PM]

public bool IsPrimary { get; private set; }
private Monitor(IntPtr monitor, IntPtr hdc)
{
var info new</a> MonitorInfoEx();
GetMonitorInfo(<a
bold;">new</a> HandleRef(null, monitor), info);
Bounds = <a href="http://www.google.com/search?
#000000;">System.Windows.Rect(
info.rcMonitor.left, info.rcMonitor.top, info.rcMonitor.right -
info.rcMonitor.left, info.rcMonitor.bottom - info.rcMonitor.top);
WorkingArea =
weight: bold;">new</a> System.Windows.Rect(

info.rcWork.left, info.rcWork.top, info.rcWork.right -
info.rcWork.left, info.rcWork.bottom - info.rcWork.top
);
IsPrimary = ((info.dwFlags & MonitorinfofPrimary) != 0);
Name = <a href="http://www.google.com/search?
#2b91af; font-weight: bold;">string(info.szDevice).TrimEnd((
char)
0);
static IEnumerable<Monitor> AllMonitors
get
{
var closure = <a
bold;">new</a> MonitorEnumCallback();
var proc = <a
bold;">new</a> MonitorEnumProc(closure.Callback);
EnumDisplayMonitors(NullHandleRef, IntPtr.Zero, proc, IntPtr.Zero);
rss.html[2/16/2014 2:23:27 PM]

font-weight: bold;">return closure.Monitors.Cast<Monitor>
();
private class
MonitorEnumCallback
public ArrayList Monitors { get; private set; }
public MonitorEnumCallback(
)
Monitors = <a href="http://www.google.com/search?q=new+msdn.microsoft.com">new</a> ArrayList(
public bool
Callback(IntPtr monitor, IntPtr hdc, IntPtr lprcMonitor, IntPtr
lparam)
Monitors.Add(<a
bold;">new</a> Monitor(monitor, hdc));
bold;">return true;
}

</pre></div>
http://www.wpftutorial.net/ScreenResolutions.html
Sun, 16 Feb 2014 08:23:05 +01002012-12-06 16:52:36
<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> 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.
<table>
<tr>
<td style="width: 100px;">
Autor:</td>
<td>Pavel Yosifovich</td>
</tr>
<tr>
<td style="width: 100px;">ISBN:</td>
<td>978-
1849686228</td>
</tr>
<tr>
<td style="width: 100px;">Published:</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>

</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> 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. 
<table>
<tr>
<td style="width: 100px;">Autor:
</td>
<td>Adam Nathan</td>
</tr>
<tr>
<td>978-0672331190</td>
</tr>
<tr>
<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>

</td>
</tr>
</table>
<table
width="700">
<td><img src="images/book_wpfcontroldev.png" style="width: 150px;">
</td>
<h3>WPF Control Development Unleashed</h3> 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.
<table>
<tr>
Autor:</td>
<td>Pavan Podila, Kevin Hoffman</td>
</tr>
<tr>
<td style="width: 100px;">ISBN:
</td>
<td>978-0672330339</td>
</tr>
<tr>
<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>

</td>
</tr>
<td><img
rss.html[2/16/2014 2:23:27 PM]

src="images/book_wpfunleashed.jpg" style="width: 150px;"></td>

<h3>Windows
Presentation Foundation - Unleashed (My favorite!)</h3> 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.
<table>
<tr>
<td style="width: 100px;">Autor:
</td>
<td>Adam Nathan</td>
</tr>
<tr>
<td>978-
0672328916</td>
</tr>
<tr>
<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>

</td>
</tr>
<tr
<td><img src="images/book_appcodemarkup.jpg" style="width: 130px;"></td>
<td
<h3>Application = Code + Markup</h3> "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. 
<table>
<tr>
<td style="width: 100px;">Autor:</td>
<td>Charles Petzold</td>
</tr>
<tr>
<td>978-0735619579</td>
</tr>
<tr>
<td style="width:
100px;">Published:</td>
<td>August 2006</td>
</tr>
</table>

</td>
</tr>
<td><img src="images/book_essentialwpf.jpg" style="width: 130px;"></td>

<h3>Essential Windows Presentation Foundation</h3> 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.
<table>
<tr>
<td>Chris
Anderson</td>
</tr>
<tr>
<td>978-0321374479</td>
</tr>
<tr>
<td
style="width: 100px;">Published:</td>
<td>April 2007</td>
</tr>
</table>

</td>
</tr>
<tr
<td><img src="images/book_foundations.jpg" style="width: 130px;"></td>
<td
<h3>Foundations of WPF: An Introduction to Windows Presentation Foundation </h3>
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.
<table>
<tr>
<td>Laurence Moroney</td>
</tr>
<tr>
<td>978-1590597606</td>
</tr>
<tr>
<td style="width:
100px;">Published:</td>
<td>November 2006</td>
</tr>
</table>

</td>
</tr>
<tr style="height:
200px;">
<td><img src="images/book_prowpf.jpg" style="width: 130px;"></td>

<h3>Pro WPF in C# 2008</h3> 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.
<table>
<tr>
<td style="width:
100px;">Autor:</td>
<td>Matthew McDonald</td>
</tr>
<tr>
<td style="width: 100px;">ISBN:
</td>
<td>978-1590599556</td>
</tr>
<tr>
<td>Februar
2008</td>
</tr>
</table>

</td>
</tr>
<td><img
src="images/book_programming_wpf.jpg" style="width: 130px;"></td>

<h3>Foundations of WPF: An Introduction to Windows Presentation Foundation </h3> 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.
<table>
<tr>
Autor:</td>
<td>Chris Sells and Ian Griffiths</td>
</tr>
<tr>
<td>978-0596510374</td>
</tr>
<tr>
<td>September 2007</td>
</tr>
</table>

</td>
</tr>
</table>
http://www.wpftutorial.net/WPFBools.html
Sun, 16 Feb 2014 08:23:05
+01002012-10-24 09:40:51
<h1>Architecture of WPF</h1>
This article is
still in constuction...
http://www.wpftutorial.net/WPFArchitecture.html
Sun, 16 Feb 2014 08:23:05 +01002012-10-
23 16:32:19
<h1>How to implement undo/redo using MVVM</h1>
<h3>Introduction</h3> 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
rss.html[2/16/2014 2:23:27 PM]

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. <img style="padding-left: 150px;" src="images/undoredo.png"
/> <h3>The MVVM-Pattern</h3> 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. <h3>A
concept of implementing undo/redo</h3> 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. Scenario 1: Executing an action <img
style="padding-left: 50px;" src="images/undoredo1.png" /> Scenario 2: Undoing an action <img
style="padding-left: 50px;" src="images/undoredo2.png" /> <h3>Adoption for WPF</h3> 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;"> public class NotifyableObject :
INotifyPropertyChanged
bold;">public event PropertyChangedEventHandler
PropertyChanged;
protected void Notify(string propertyName)
{
if (PropertyChanged != null)
{

PropertyChanged(this, <a href="http://www.google.com/search?q=new+msdn.microsoft.com">new</a> PropertyChangedEventArgs(
propertyName));
}
</pre></div>
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;"> public class TrackableObject : NotifyableObject
private readonly List<ITrackable> _trackableItems = <a
bold;">new</a> List<ITrackable>();
bold;">bool HasChanges
get { return _trackableItems.Any(i => i.HasChanges)
; }
public IModificationTracker ModificationTracker { get; set; }
protected TrackableValue<T> RegisterTrackableValue<T>(string propertyName, T defaultValue = default(T))
{
var property = <a
bold;">new</a> TrackableValue<T>(propertyName, Modify, Notify,
defaultValue);
_trackableItems.Add(property)
;
return property;
}
protected
TrackableCollection<T>
RegisterTrackableCollection<T>
()
{
var collection = <a
bold;">new</a> TrackableCollection<T>(Modify)
;
_trackableItems.Add(
collection);
bold;">return collection;
private void Modify(Action doAction, Action undoAction, Action notification)
var modification new</a> Modification(doAction,
undoAction, notification);
modification.Execute()
;
ModificationTracker.TrackModification(modification);
}
</pre></div>
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;"> public class TrackableValue<T> : ITrackable
{
private readonly string
_propertyName;
private readonly Action<Action, Action, Action> _modifyCallback;
bold;">private readonly Action<string> _notifyAction;
private T _value;
public TrackableValue(string propertyName, Action<Action, Action, Action>
modifyCallback,
Action<string> notifyAction, T defaultValue)
_propertyName = propertyName;
_modifyCallback = modifyCallback;
_notifyAction = notifyAction;
_value =
defaultValue;
bold;">public bool HasChanges
{
get { return _originalValue.Equals(_value); }
bold;">public T Value
#000000;">{ return _value; = _value;
_modifyCallback(() => _value = value, () =>
_value = oldValue,
() => _notifyAction(_propertyName)}
</pre></div>
To same thing we need
to do for collections to track add/remove of items from a collection
<div class="codeblock"><pre class="csharp
csharp" style="font-family: courier new,courier,monospace;"> public class TrackableCollection<T> :
 IList<T>, ITrackable

private
readonly Action<
Action, Action, Action> _modifyCallback;
private readonly
List<T> _list new</a> List<T>();
bold;">readonly List<T>
_originalList = <a href="http://www.google.com/search?
q=new+msdn.microsoft.com">new</a> List<T>();
bold;">public TrackableCollection(Action<Action, Action, Action> modifyCallback= modifyCallback;
event EventHandler<EventArgs<T>> ItemAdded;
font-weight: bold;">public event
EventHandler<EventArgs<
T>> ItemRemoved;
bold;">public event EventHandler
CollectionChanged;
public bool HasChanges
get
{
if( _list.Count ==
 _originalList.Count)
return _list.
Where((item, index) => !item.Equals
rss.html[2/16/2014 2:23:27 PM]

(_originalList[index])).Any(
return true;
}
#0600FF; font-weight: bold;">void AcceptChanges(Clear();
_originalList.AddRange(_list);

public IEnumerator<T> GetEnumerator()
 return _list.GetEnumerator(); }
IEnumerator IEnumerable.GetEnumerator()
bold;">return GetEnumerator();
bold;">public void Add(T item)

_modifyCallback((
) =>
{
_list.Add(
item); ItemAdded.Notify
(this, <a
bold;">new</a> EventArgs<T>
(item)}, Remove(item);
ItemRemoved.Notify(this, <a href="http://www.google.com/search?q=new+msdn.microsoft.com">new</a> EventArgs<
T>(item));
}, OnCollectionModified);
}
#0600FF; font-weight: bold;">void Clear()
var items =
weight: bold;">new</a> T[_list.Count];
_list.CopyTo(items)
;
_modifyCallback((
) =>
{
_list.ForEach(i => ItemRemoved.T>(i)));
_list.Clear(
);
}, () =>
#0000FF;">AddRange(items);
_list.ForEach(i => ItemAdded.Notify(new</a> EventArgs<T>(i)))
;
}, OnCollectionModified)
;
bold;">public bool Contains
return _list.Contains(item)
;
bold;">public void CopyTo(T[]
 array, int arrayIndex)
#0000FF;">CopyTo(array, arrayIndex);
bold;">public bool Remove
var result = _list.Contains
(item);
_modifyCallback(() =>
{
_list.Remove(item);
ItemRemoved.>(item, () =>
#0000FF;">Add(item)
;
ItemAdded.Notify(
this, <a href="http://www.google.com/search?
q=new+msdn.microsoft.com">new</a> EventArgs(item))
;
}, OnCollectionModified)
;
return result;
}
#2b91af; font-weight: bold;">int Count
#000000;">{ return _list.Count; }


bold;">bool IsReadOnly
#000000;">{ return false; }
bold;">public int IndexOf
return _list.IndexOf(item)
;
bold;">public void Insert(int index, T item(() =>

_list.Insert(index,
item);
ItemAdded.Notify(this, <a
(item)}, Remove(item);
ItemRemoved.T>(item}, OnCollectionModified);
}
#0600FF; font-weight: bold;">void RemoveAt(int index)
{
var item = _list[index];
_modifyCallback(()
=>
#0000FF;">Remove(item)
;
ItemRemoved.Notify(
this, <a href="http://www.google.com/search?
q=new+msdn.microsoft.com">new</a> EventArgs(item))
;
}, () =>
{
_list.Insert(
index, item);
ItemAdded.>(item, OnCollectionModified);
rss.html[2/16/2014 2:23:27 PM]


public T this[int index]

get { return
_list[index]; = _list[index];
_modifyCallback([index] = value;
ItemAdded.T>(value}, ()
 =>
_list[index] = oldItem;
ItemRemoved.Notify(this, <a
(oldItem)}, OnCollectionModified}
private void OnCollectionModified(this, EventArgs.Empty); }

</pre></div>
http://www.wpftutorial.net/UndoRedo.html
Sun, 16 Feb 2014 08:23:05 +01002011-12-23
09:14:09
<h1>Grid Panel</h1> <a href="#Intro">Introduction</a> 
<a href="#add">How to define rows and columns</a> <a href="#add">How to add controls to the grid</a>
 <a href="#resize">Resize columns or rows</a> <a href="#sharedsize">How to share the width of a
column over multiple grids</a> <a href="#gridlength">Using GridLenghts from code</a> <a
name="Intro"><h2>Introduction</h2></a> <img src="images/v2_gridlayout.png" style="margin-left: 200px;" />
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. 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 <a name="rowscols">
<h2>Define Rows and Columns</h2></a> 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. The size can be specified as an absolute amount of
logical units, as a percentage value or automatically. <table style="margin-left: 40px; width: 600px;"> <tr> <td
style="width: 50px;">Fixed</td> <td> Fixed size of logical units (1/96 inch)</td> </tr> <tr> <td>
Auto</td> <td> Takes as much space as needed by the contained control</td> </tr> <tr> <td style="vertical-
align: top">Star (*)</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;"> <Grid> <Grid.RowDefinitions>
 <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height=
"*" /> <RowDefinition </Grid.RowDefinitions> <Grid.ColumnDefinitions>
 <ColumnDefinition Width="Auto" <ColumnDefinition Width="200" /> </Grid.ColumnDefinitions>
 </Grid> </pre></div><a name="add"><h2>How to add controls to the grid</h2></a>
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.
 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. <div class="codeblock"><pre class="xaml xaml"
style="font-family: courier new,courier,monospace;"><Grid> 
<Grid.RowDefinitions>
<RowDefinition Height="Auto" <RowDefinition Height="Auto" /> <RowDefinition Height=
"*" /> <RowDefinition </Grid.RowDefinitions> <Grid.ColumnDefinitions>
 <ColumnDefinition Width="Auto" "200" /> <Label Grid.Row="0" Grid.Column="0" Content="Name:"/> <Label
Grid.Row="1" Grid.Column="0" Content="E-Mail:"/>
<Label
Grid.Row="2" Grid.Content="Comment:"/>
<TextBox
Grid.Column="1" Grid.
Row="0" Margin="3" />
#800000;">/>
#800000;">/>
<Button
#ff0000;">HorizontalAlignment="Right" 
 MinWidth="80" Margin="3" Content="Send" />
</Grid>
</pre></div>
<a name="resize"><h2>Resizable columns or rows</h2></a>
<img src="images/v2_gridsplitter.png"
style="padding-left: 180px;">
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.
courier new,courier,monospace;"><Grid<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>
#0000ff;">"*"/>

<Label Content="Left" Grid.Column="0" />
#800000;"><GridSplitter HorizontalAlignment="Right" 
 VerticalAlignment="Stretch" 
 Grid.Column="1" ResizeBehavior="PreviousAndNext"
#ff0000;">Width="5" Background="#FFBCBCBC"/>
<Label
rss.html[2/16/2014 2:23:27 PM]

Content="Right" Grid./>
</Grid</div>
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>.
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>.
courier new,courier,monospace;"><GridSplitter ResizeDirection="Columns"/>
</pre></div>
<a
name="sharedsize"><h2>How to share the width of a column over multiple grids</h2></a>
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.
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.
To synchronize the width of two columndefinitions, set the
<code>SharedSizeGroup</code> to the same name.
<div class="codeblock"><pre class="xaml xaml" style="font-
family: courier new,courier,monospace;"> <ItemsControl Grid.IsSharedSizeScope="True" >
<ItemsControl.ItemTemplate> <DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
#800000;"><ColumnDefinition SharedSizeGroup="FirstColumn" Width="Auto"/>
<ColumnDefinition Width="*"/>

#800000;"></Grid.ColumnDefinitions>
<TextBlock Text="{Binding Path=Key}" TextWrapping="Wrap"/>
#800000;"><TextBlock Text="
{Binding Path=Value}" Grid.Column="1" TextWrapping="Wrap"/>
</DataTemplate>
#800000;"></ItemsControl.ItemTemplate>
</ItemsControl>
</pre></div><h3>Useful Hints</h3>
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.
<a name="gridlength"><h2>Using GridLenghts from code</h2></a>
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.

 
<table style="margin-left: 30px;">
<tr>
<td style="width: 100px;">Auto sized</td> <td>
rss.html[2/16/2014 2:23:27 PM]

<code>GridLength.Auto</code>
</td>
</tr>
<tr>
<td>Star sized</td>
<td><code>new
GridLength(1,GridUnitType.Star)</td> </tr>
<tr>
<td>Fixed size</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 = <a
bold;">new</a> Grid()
;
ColumnDefinition col1 = <a href="http://www.google.com/search?
q=new+msdn.microsoft.com">new</a>
ColumnDefinition();
col1.
Width = GridLength.Auto;
ColumnDefinition col2 = <a
bold;">new</a> ColumnDefinition();
col2.Width =
weight: bold;">new</a> GridLength(1,GridUnitType.Star)
;
grid.ColumnDefinitions.Add
(col1);
grid.ColumnDefinitions.Add(col2);
</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
Sun, 16 Feb 2014 08:23:05 +01002011-10-03 09:22:29
<h1>Introduction to Windows Presentation Foundation</h1>

<h2>Overview</h2>
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.
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.
The followinig illustration gives you an overview of the main new features of WPF
<img
src="images/wpfMainFeatures.png" style="padding: 10px; padding-left: 120px;" />
<h2>Separation of Appearance and
Behavior</h2>
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>


<h2>Rich composition</h2>
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.
<img style="padding-left: 150px;" src="images/playsound_button.png" />
<div
#800000;"><Button>
<StackPanel Orientation="Horizontal">
<Image
Source="speaker.png" Stretch="Uniform"/>
#800000;"><TextBlock Text="Play Sound" />
</StackPanel>

</Button>
</pre></div>
<h2>Highly customizable</h2>
Because of the strict
separation of appearance and behavior you can easily change the look of a control. The concept of <a
rss.html[2/16/2014 2:23:27 PM]

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.
The following
example shows an default WPF button and a customized button.
<img style="padding-left: 100px;"
src="images/introduction_buttons.png" />
<h2>Resolution independence</h2>
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.
<img style="padding-left: 120px;" src="images/wpf_scaling.png" />
http://www.wpftutorial.net/WPFIntroduction.html
Sun, 16 Feb 2014 08:23:05 +01002011-08-15 18:49:42
<h1>Context Menus in WPF</h1> 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>. <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;"> <RichTextBox> <RichTextBox.ContextMenu> <ContextMenu>
 <MenuItem Command="Cut"> <MenuItem.Icon> <Image Source="Images/cut.png" />
</MenuItem.Icon> </MenuItem<MenuItem Command="Copy"> <MenuItem.Icon>
 <Image Source="Images/copy.png" </MenuItem.Icon> </MenuItem>
<MenuItem Command="Paste"<MenuItem.Icon> <Image Source="Images/paste.png" />
</MenuItem.Icon> </MenuItem</ContextMenu> </RichTextBox.ContextMenu</RichTextBox> </pre></div> <h2>Show
ContextMenus on a disabled controls</h2> 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>. <div class="codeblock"><pre
style="color: #800000;"><RichTextBox IsEnabled="False" ContextMenuService.ShowOnDisabled="True"<RichTextBox.ContextMenu>

<ContextMenu>

...
</ContextMenu</RichTextBox.ContextMenu>
</RichTextBox>
</pre></div>
<h2>Merge ContextMenus</h2>
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.
<div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;">

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:sys="clr-
namespace:System;assembly=mscorlib">
<Grid Background="Transparent">
#800000;"><Grid.Resources>
<x:Array Type="{x:Type sys:Object}" x:Key=
"extensions">
<Separator />
#800000;"><MenuItem Header="Extension MenuItem 1" />
<MenuItem Header="Extension MenuItem 2" "Extension MenuItem 3" />
</x:Array>

</Grid.Resources<Grid.ContextMenu>
<ContextMenu>

<ContextMenu.ItemsSource<CompositeCollection>
<MenuItem Header=
"Standard MenuItem 1" />

<MenuItem Header="Standard MenuItem 2"
/>
#0000ff;">"Standard MenuItem 3" />
<CollectionContainer Collection="{StaticResource extensions}" </CompositeCollection>
</ContextMenu.ItemsSource>
#800000;"></ContextMenu>
</Grid.ContextMenu>


</Grid>
#800000;"></Window>
</pre></div>
<h2
id="mvvm">How to bind a Command on a ContextMenu within a DataTemplate using MVVM</h2>
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.
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.
<div class="codeblock"><pre class="xaml xaml" style="font-family: courier new,courier,monospace;">

<DataTemplate>
<Grid Tag="{Binding DataContext, RelativeSource=
{RelativeSource AncestorType={x:Type ListBox}}}">

<Grid.ContextMenu<ContextMenu DataContext="{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource Self}}"<MenuItem Content="Cut" Command="{Binding CutCommand}" />
<MenuItem Content="Copy" Command="{Binding CopyCommand}" <MenuItem Content="Paste" Command="{Binding PasteCommand}" />
</ContextMenu>
#800000;"></Grid.ContextMenu>
</DataTemplate>
</pre></div>
<h2>How to open a context menu from code</h2>
The following sample
shows you how to open a context menu of a control programmatically:
<div class="codeblock"><pre
weight: bold;">private void
OpenContextMenu(FrameworkElement element)
bold;">if( element.ContextMenu != null )

element.ContextMenu.PlacementTarget = element;
element.ContextMenu.IsOpen =
 true;
</pre>
</div>
http://www.wpftutorial.net/ContextMenu.html
Sun, 16 Feb 2014 08:23:05 +01002011-05-23 08:36:43
<h1>WPF ListBox Control</h1> <img style="padding-left: 80px;"
src="images/listbox1.png" /> <h2>Introduction</h2> 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.
 
rss.html[2/16/2014 2:23:27 PM]


style="color: #800000;"><ListBox Margin="20">
<ListBoxItem>
New York</ListBoxItem>
#800000;"><ListBoxItem>Los Angeles</ListBoxItem>

<ListBoxItem>Paris</ListBoxItem>
<ListBoxItem>
Zurich</ListBoxItem>
#800000;"></ListBox>
</pre></div>
<h2>How to define
a Trigger for IsSelected in the DataTemplate</h2>
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.
<div
#800000;"><DataTemplate x:Key=
"myDataTemplate">

<Border x:Name="border" Height="50">

<TextBlock Text="{Binding Text}" </Border>

<DataTemplate.Triggers>

<DataTrigger Binding="{Binding RelativeSource=
 {RelativeSource Mode=FindAncestor, AncestorType=
 {x:Type ListBoxItem}},Path=IsSelected}" Value=
"True">
<Setter TargetName="border" Property="Height" Value="100"/>
#800000;"></DataTrigger>
</DataTemplate.Triggers>

</DataTemplate>
</pre></div>
<h2>More articles about the ListBox</h2>
[sublist]

http://www.wpftutorial.net/ListBox.html
Sun, 16 Feb 2014 08:23:05 +01002011-05-23 08:36:27
moc@zuehlke.com
(Christian Moser)
<h1>Designtime vs. Runtime</h1>
<h2>Introduction</h2>
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>UserControls are not embedded in a parent view
<ul>
<li>Width and
Height are not set</li>
</ul>
</li>
<li>Constructor of the root-element is not called
<ul>
<li>Root Element is
replaced by the designer</li>
<li>ViewModel is not created</li>
</ul>
<li>Controls behave different
<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.
<img
src="images/designtimevsruntime.png" style="margin-left: 50px;" />
<h2>Designtime attributes</h2>
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.
The designtime attributes are defined in a special namespace, that is usually
rss.html[2/16/2014 2:23:27 PM]

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.
<div class="codeblock"><pre class="xaml xaml"
style="font-family: courier new,courier,monospace;"> <Window 
 xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d" />
</pre></div>
<h2>
<code>d:DesignHeight</code> and <code>d:DesignWidth</code></h2>
The <code>d:DesignHeight</code> and
<code>d:DesignWidth</code> sets a fixed height and width for the element at designtime
<div
#800000;"><UserControl
 xmlns="http://schemas.microsoft.com/..."

 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 d:DesignWidth="640"
 d:DesignHeight="480"
 >
#800000;"><UserControl />
</pre></div>
<h2>
<code>d:LayoutOverrides</code></h2>
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.
<div class="codeblock"><pre class="xaml xaml" style="font-
family: courier new,courier,monospace;"> <Border Height="250" Width="160" d:LayoutOverrides="Width, Height" >
</Border>

</pre></div>
<h2>Additional Resources</h2>
<a href="http://msdn.microsoft.com/en-
us/library/ff602277(v=vs.95).aspx">MSDN Designtime-attributes</a>
This article is still under
construction
http://www.wpftutorial.net/DesigntimeVsRuntime.html
Sun, 16 Feb 2014 08:23:05 +01002011-
05-04 15:22:02
<h1>Templates and Styles</h1>
One of WPF's most
powerful feature is the ability to completely replace the look and feel of user interface elements.
<h2>Styles</h2>

The concept of styles let you remove all properties values from the individual user interface elements and combine
them into a style. A style consists of a list of property setters. If you apply a style it sets the properties on the
user interface element to the styles' values. The idea is quite similar to Cascading Styles Sheets (CSS) in web
development. 
Using styles gives you the following advantages:
<ul>
<li>Removes redundancy from your
code</li>
<li>Let you change the appearance of a set of controls from a single point</li>
<li>Gives you the possibility
to swap the style at runtime</li>
</ul>

<a class="articleref" href="Styles.html">Learn more about Styles</a>

<h2>Templates</h2>
An element like a button consists of multpiple composed parts: A border, a chrome and a
content presenter. With styles you can only change the appearance from "outside" by setting public properties. With a
template you can replace parts inside a user interface element.. 
Using templates gives you the following
advantages:
<ul>
<li>Change the parts inside a user interface element</li>
<li>Reduce the numbers custom
controls</li>
</ul>

<a class="articleref" href="Templates.html">Learn more about Templates</a>

http://www.wpftutorial.net/TemplatesStyles.html
Sun, 16 Feb 2014 08:23:05 +01002011-05-03 10:40:49
<h1>Drag and Drop in WPF</h1> <h2>Introduction</h2> Drag&Drop can
drasticly improve the productiviy and user experience of a software. But only a few programmers provide drag and
drop functionality in their applications, because they think its much more dificult than it really is. This article shows
how simple drag and drop can be implemented in WPF. <h2>Drag&Drop in 6 Steps</h2> <ol> <li>Detect a drag
as a combinatination of MouseMove and MouseLeftButtonDown</li> <li>Find the data you want to
drag and create a DataObject that contains the format, the data and the allowed effects.</li>
<li>Initiate the
dragging by calling DoDragDrop()</li>
<li>Set the AllowDrop property to True on the
rss.html[2/16/2014 2:23:27 PM]

elements you want to allow dropping.</li>

<li>Register a handler to the DragEnter event to detect a dragging
over the drop location. Check the format and the data by calling GetDataPresent() on the event args. If the data
can be dropped, set the Effect property on the event args to display the appropriate mouse cursor.</li>
<li>When the user releases the mouse button the DragDrop event is called. Get the data by calling the
GetData() method on the Data object provided in the event args. </ol>
...and that's all the
magic.
<h2>Drag</h2>
To start the drag operation, we have to detect a mouse move while the left mouse
button is pressed. To do this we have to hook up handlers on the <code>PreviewMouseMove</code> and
<code>PreviewMouseLeftButtonDown</code> events.
To prevent occasionally drags, its a good design to not
start the drag operation until the user has moved the mouse cursor by a couple of pixels. WPF provides a constant that
contains the amount of pixel that Windows uses.
When the drag is initiated, we need to specify the data we
want to drag. In our case its the data of the <code>ListViewItem</code> we dragged. We find the
<code>ListViewItem</code> in the <code>OriginalSource</code> of the mouse event args. By calling
<code>ItemContainerGenerator.ItemFromContainer</code> we get the data behind the <code>ListViewItem</code>.

Create a <code>DataObject</code> to transport the data to the drop location. The constructor takes two
arguments. A string that describes the format and the data we want to drag.
 
style="color: #800000;"><ListView x:Name="DragList" 
#ff0000;">PreviewMouseLeftButtonDown="List_PreviewMouseLeftButtonDown" 
style="color: #ff0000;">PreviewMouseMove="List_MouseMove"
/>
</pre></div>
<div class="codeblock"><pre class="csharp
csharp" style="font-family: courier new,courier,monospace;"> private void
List_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
// Store the mouse position
startPoint
= e.GetPosition(null);
</pre></div>
weight: bold;">private void List_MouseMove(object sender,
MouseEventArgs e)
// Get the current mouse position
Point mousePos = e.GetPosition(
null);
Vector diff = startPoint - mousePos;
if (e.LeftButton == MouseButtonState.Pressed &&
Math.Abs(diff.X) >
SystemParameters.MinimumHorizontalDragDistance ||
Math.Abs(diff.Y) >
SystemParameters.MinimumVerticalDragDistance )
// Get the
dragged ListViewItem
ListView listView = sender as ListView;
ListViewItem listViewItem =
 FindAnchestor<ListViewItem>
((
DependencyObject)e.OriginalSource);
//
rss.html[2/16/2014 2:23:27 PM]

Find the data behind the ListViewItem

Contact contact = (Contact)listView.ItemContainerGenerator.
ItemFromContainer
(listViewItem);
// Initialize the drag & drop operation
DataObject dragData new</a> DataObject("myFormat", contact );
DragDrop.DoDragDrop(
listViewItem, dragData, DragDropEffects.Move);
} }

</pre></div>
<div class="codeblock"><pre class="csharp csharp" style="font-family: courier
new,courier,monospace;"> // Helper to search up the VisualTree
private static T FindAnchestor<T>(DependencyObject current)
where T : DependencyObject
{
do
{
if( current <a href="http://www.google.com/search?q=is+msdn.microsoft.com">is</a> T )
return (T)current;
}
current = VisualTreeHelper.GetParent(current);
bold;">while (current !=
null);
return null;
</pre>
</div>
<h2>Drop</h2>
To make an element be a drop location, set the AllowDrop property to true. When
the user drags an item over the element, the DragEnter event is called. In this event you can analyze the data
and decide if a drop is allowed or not.
When the user releases the mouse button the Drop event is
called. The data is available in the DataObject provided in the DragEventArgs.
 
<div
#800000;"><ListView x:Name=
"DropList" 
style="color: #ff0000;">Drop="DropList_Drop" 

 DragEnter="DropList_DragEnter" 
#ff0000;">AllowDrop="True" />
</pre></div>
<div class="codeblock"><pre class="csharp csharp" style="font-
family: courier new,courier,monospace;"> private void DropList_DragEnter(
object sender, DragEventArgs e)
bold;">if (!e.Data.GetDataPresent("myFormat") ||
sender == e.Source)

e.Effects = DragDropEffects.
None;
}
</pre></div>
<div class="codeblock"><pre class="csharp csharp" style="font-family:
courier new,courier,monospace;"> private void DropList_Drop(

object sender, DragEventArgs e)
bold;">if (e.Data.GetDataPresent("myFormat"))
Contact contact = e.Data.GetData
("myFormat") as Contact;
ListView listView = sender as ListView;
listView.Items.Add(contact)
;
</pre></div>
http://www.wpftutorial.net/DragAndDrop.html
Sun, 16 Feb 2014 08:23:05 +01002011-04-19 16:59:14
rss.html[2/16/2014 2:23:27 PM]

WPF Tutorial | Christian Moser
Christian Moser Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
About Christian Moser
Fundamentals
Christian Moser is working as a software architect and user experience designer
User Experience
at Zühlke Engineering in Zürich, Switzerland. He has gathered his experience in
Patterns several successful projects with Microsoft .NET technologies.
Controls
His passion is the design of graphical user interfaces and the simplification of
complex tasks to provide a rich experience to the user.
Custom Controls
He started developing application with WPF in early 2005. The power and
Layout flexibility of WPF fascinated him from the first second. The technology enables
you to build next generation user experiences.
Input
Do you like WPF Tutorial?
Data Binding
You can now suppport my work with a donation:
Styling
Localization
Interaction
Resources License
2D Graphics All samples of this web site are free for use in non-commercial and commercial
projects. They are all licensed unter the Microsoft Public License (MS-PL)
3D Graphics
Animation
Contact Christian Moser
Multimedia

Zühlke Engineering AG
Documents
Wiesenstrasse 10a

CH-8952 Schlieren
Windows 7
Switzerland
Interoperability
Phone: +41 44 733 66 17
Performance Mail: moc@zuehlke.com
Twitter: @christian_moser
Expression Blend
Tools
UI Automation
christian.html[2/16/2014 2:24:07 PM]

WPF Tutorial | Learn WPF in two Weeks
Home
Getting started
Learn WPF in two Weeks Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Learn WPF in one Week
Custom Controls
I started to build a one week training course to learn WPF. Starting with the basics and going through the important concepts of
Layout the framework up to more complex topics. I hope you like it.
Input
Data Binding Day 1 - Getting started

Styling
Install the development tools
Localization Learn the basic concepts of WPF
Create your first WPF application
Interaction
Learn how WPF changed the development workflow
Resources
2D Graphics
Day 2 - Concepts of WPF
3D Graphics
Get an introduction to XAML
Animation Learn about the hierarchical relation of elements in WPF
Multimedia Find out about the magic behind DependencyProperties
Get familiar with routed events.
Documents
Windows 7
Day 3 - Layout and Controls
Interoperability
Learn the layout basics
Performance
See the grid layout panel in action
Expression Blend Stack elements with the stackpanel
Get an overview about the variety of included controls.
Tools
Have a look at 3rd-party libraries
UI Automation
Day 4 - DataBinding and UI Architecture

Introduction to WPF DataBinding
LearnWPFin14Days.html[2/16/2014 2:24:24 PM]

How to display, sort and filter data
Using the Model-View-ViewModel Pattern
Learn how to validate user input
Create your own ValueConverter
Enhance the MVVM pattern by using Behaviors and Actions
Day 5 - Templates and Styles

Learn how to build rich user experience with WPF
Style the appearance of your controls
Completely replace the look of a control
How to display complex data in lists by using DataTemplates.
Some of the articles are not yet finished. The content for the subsequent days will follow soon... :-)
► Tutorial ► Java Web Tutorial ► Learn Quick Books ► Coding Learning

Last modified: 2010-12-12 13:33:36

Comments on this article
Show all comments
Commented on 30.May 2011
so where are the last 9 days?

me
Commented on 2.June 2011
its a very good material .............give me examples also

sathya
very good Stuff.
Hi
Thank U :)
Just to let you know that even when the title says learn in one week the link at the menu says learn in
Ignacio
two weeks.
Last modified: 2010-01-05 12:01:58

Camila
Last modified: 2010-01-05 12:01:58
Camila
he forgot

pls change ur shirt. jeezus.

dood
thank you sir.................thanks
syed farooq...
hi.. i m new i want to learn wpf and wcf with in 2 week ... is it possible
mukund
it exist in pdf format ? I want to learn WPF but the best time to learn for me is when I commute by train.
sybe30
This training course seems to be very interresting.
Commented on 7.July 2011
very nice,Can you give me an example??

young
hi,sir namaste,i want to know detail abt WPF,WCF and Silverlight
soumya
plz sir help me.thnx
from...
Awesome Chris! Within an hour, I learnt all the fundas of WPF. Your diagrams are really very helpful in
Maharajan...
understanding the many abstract and vague concepts clearly.
Earlier I read some other articles and books but could not get a basic gripon WPF.
But after reading your whole article, I am really impressed and have a lot of confidence in working in
WPF project. Expecting more articled from you.
nice
vipin
hummmmm usefull 4 me & my frnds

nency
Commented on 1.August 2011
very easy to understand and implement the WPF application.

krishna
very easy to understand and implement the WPF application.

krishna
Very Nice article.

Lalit
hi bro.. thnx for the great work :)

Hasan...
and i'm waiting for the rest..
Great Job man !!
Zhang Zhi very cool... this article is useful.. thank you for sharing... hope to see next article soon.
Ren
Great job!!
walter
Good article.. where is the rest ???????

Lavi
Commented on 2.September 2011
:)
kata
it's really useful! but hopefully you can finish the remaining days we really appreciate your help! God
chao
bless you!
Ankita its really good training.. i want to learn wcf also sir..
Johnson
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Introduction to WPF
Home
Getting started
Introduction to WPF Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Introduction to Windows Presentation Foundation
Custom Controls
Layout
Overview
Input
The Windows Presentation Foundation is Microsofts next generation UI framework to create applications with a rich user experience. It
Data Binding is part of the .NET framework 3.0 and higher.
Styling 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.
Localization
The followinig illustration gives you an overview of the main new features of WPF
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents
Windows 7
Interoperability
Performance
Expression Blend
Tools
UI Automation
Separation of Appearance and Behavior
WPF separates the appearance of an user interface from its behavior. The appearance is generally specified in the Extensible
Application Markup Language (XAML), the behavior is implemented in a managed programming language like C# or Visual Basic.
WPFIntroduction.html[2/16/2014 2:25:14 PM]

The two parts are tied together by databinding, events and commands. The separation of appearance and behavior brings the
following benefits:
Appearance and behaviour are loosely coupled

Designers and developers can work on separate models.
Graphical design tools can work on simple XML documents instead of parsing code.
Rich composition
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.

<Button>
<StackPanel Orientation="Horizontal">
<Image Source="speaker.png" Stretch="Uniform"/>
<TextBlock Text="Play Sound" />
</StackPanel>
</Button>

Highly customizable
Because of the strict separation of appearance and behavior you can easily change the look of a control. The concept of styles let you
skin controls almost like CSS in HTML. Templates let you replace the entire appearance of a control.
The following example shows an default WPF button and a customized button.
Resolution independence
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.
Last modified: 2011-08-15 18:49:42


Show all comments
Very useful for beginner in just 5 min .

Pham Kien
Thanks a lot.
Quoc
very good...
pragati
It really gud :)
Haritha
Good one
bhanu
Thank you..I think its more helpful for the beginners in WPF
sreejith
very helpful and easy to understand

Amit Verma
Similar to MSDN documentation but looks nicer & richer

Abu Hanin
there is an sql error on the tutorials like user desing process...please fix it out asap...thankyou
kartik
Thanks Sir, thank you so much for all notes and example of WPF.........
Sweta Pandey
It is so beautifully explained that any one can understand.
Dhruvangini
Thanks
that is wonderful
BoYu Gao
You really need a spellchecker and a proofreader. Crispier??

Mark

one word. AWESOME!

awesome
Very nice article for WPF Beginners...

Garima
Pushing the beginners to mine more !!! .... Good

sakthi
Very nice article for WPF Beginners...

Garima
Cool.. been looking for a nice WPF intro and this is by far the best and coolest... thanks
RobertS
This is very helpful to learn

anjali
This article has given nice introduction to the wpf beginners.

chaitanya
Mobashir Good Explaination

Ahmad
really...good one
Roshan
Good one
Nithya
What a intro?????
Mukesh
very useful
pradeep
thnxx sir nice intro

deepak
Name
E-Mail (optional)

Comment
Post Comment

WPF Tutorial | DataGrid
Home
Controls
DataGrid Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
WPF DataGrid Control
Custom Controls
Layout
Input
Data Binding
Introduction
Styling
Localization Since .NET 4.0, Microsoft is shipping a DataGrid control that provides all the basic functionality needed, like:
Interaction Auto generation of columns

Manual definition of columns
Resources
Selection
2D Graphics Grouping
Column sorting, reordering and resizing
3D Graphics
Row Details
Animation Alternating BackgroundBrush
Multimedia
Frozen columns
Headers Visibility
Documents How to template autogenerated columns
Windows 7
Interoperability
Performance Basic usage: Auto generate columns

Expression Blend
To show a basic data grid , just drop a DataGrid control to your view and bind the ItemsSource to a collection of data objects
Tools and you're done. The DataGrid provides a feature called AutoGenerateColumns that automatically generates column according
to the public properties of your data objects. It generates the following types of columns:
UI Automation
TextBox columns for string values
CheckBox columns for boolean values
ComboBox columns for enumerable values
DataGrid.html[2/16/2014 2:25:31 PM]

Hyperlink columns for Uri values

<DataGrid ItemsSource="{Binding Customers}" />

Manually define columns

Alternatively you can define your columns manually by setting the AutoGenerateColumns property to False. In this case you
have to define the columns in the Columns collection of the data grid. You have the following types of columns available:
DataGridCheckBoxColumn for boolean values

DataGridComboBoxColumn for enumerable values
DataGridHyperlinkColumn for Uri values
DataGridTemplateColumn to show any types of data by defining your own cell template
DataGridTextColumn to show text values

<DataGrid ItemsSource="{Binding Customers}" AutoGenerateColumns="False" >
<DataGrid.Columns>
<DataGridTemplateColumn Header="Image" Width="SizeToCells" IsReadOnly="True">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image Source="{Binding Image}" />

</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>

Selection
The data grid includes a variety of selection modes. They are configured by the SelectionMode and SelectionUnit property.
The SelectionMode can be set to Single or Extended to define if one or multiple units can be selected simultaneously.
The SelectionUnit defines the scope of one selection unit. It can be set to Cell, CellAndRowHeader and FullRow.

<DataGrid ItemsSource="{Binding Customers}"
SelectionMode="Extended" SelectionUnit="Cell" />

Column sorting, reordering and resizing

The data grid provides features to sort, reorder and resize columns. They can be enabled or disabled by the following properties:
CanUserReorderColumns enables or disables column re-ordering

CanUserResizeColumns enables or disables column resizing
CanUserResizeRows enables or disables row resizing
CanUserSortColumns enables or disables column sorting

CanUserReorderColumns="True" CanUserResizeColumns="True"

CanUserResizeRows="False" CanUserSortColumns="True"/>

Grouping
The data grid also supports grouping. To enable grouping you have to define a CollectionView that contains to least one
GroupDescription that defines the criterias how to group.

Customers = new ListCollectionView(_customers);
Customers.GroupDescriptions.Add(new PropertyGroupDescription("Gender"));

Second thing you need to do is defining a template how the groups should look like. You can do this by setting the GroupStyle to
something like the following snippet.

<DataGrid ItemsSource="{Binding GroupedCustomers}">
<DataGrid.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Name}" />
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander>
<Expander.Header>
<TextBlock Text="{Binding Path=Name}" />
<TextBlock Text="{Binding Path=ItemCount}"/>
<TextBlock Text="Items"/>
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>

</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</DataGrid.GroupStyle>
</DataGrid>

Row Details
The data grid provides a feature that shows a detail panel for a selected row. It can be enabled by setting a DataTemplate to the
RowDetailsTemplate property. The data template gets the object that is bound to this row passed by the DataContext and can
bind to it.

<DataGrid ItemsSource="{Binding Customers}">
<DataGrid.Columns>
<DataGridTextColumn Header="First Name" Binding="{Binding FirstName}" />
</DataGrid.Columns>
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<Image Height="100" Source="{Binding Image}" />
</DataTemplate>
</DataGrid.RowDetailsTemplate>
</DataGrid>

Row Details depending on the type of data
You can specify a RowDetailsTemplateSelector that selects a data template according to the type or data that this row
contains. To do this, create a type that derives from DataTemplateSelector and override the SelectTemplate method. In
the items argument you get the data and you can determine which data template to display. Return an instance of that data
template as return value.


public class GenderTemplateSelector : DataTemplateSelector
{
public DataTemplate MaleTemplate { get; set; }
public DataTemplate FemaleTemplate { get; set; }

public override DataTemplate SelectTemplate(object item,
DependencyObject container)
{
var customer = item as Customer;
if (customer == null)
return base.SelectTemplate(item, container);

if( customer.Gender == Gender.Male)
{
return MaleTemplate;
}
return FemaleTemplate;
}
}

<l:GenderTemplateSelector x:Key="genderTemplateSelector">
<l:GenderTemplateSelector.MaleTemplate>
<DataTemplate>
<Grid Background="LightBlue">
<Image Source="{Binding Image}" Width="50" />
</Grid>
</DataTemplate>
</l:GenderTemplateSelector.MaleTemplate>
<l:GenderTemplateSelector.FemaleTemplate>
<DataTemplate>
<Grid Background="Salmon">
<Image Source="{Binding Image}" Width="50" />
</Grid>
</DataTemplate>
</l:GenderTemplateSelector.FemaleTemplate>
</l:GenderTemplateSelector>


RowDetailsTemplateSelector="{StaticResource genderTemplateSelector}" />

Alternating BackgroundBrush
You can define a an AlternatingRowBackground that is applied every even row. You can additionally specify an
AlternationCount if you only want to ink every every n-th data row.

AlternatingRowBackground="Gainsboro" AlternationCount="2"/>

Frozen Columns
The data grid also supports the feature to freeze columns. That means they stay visible while you scoll horizontally through all
columns. This is a useful feature to keep a referencing column like an ID or a name always visible to keep your orientation while
scrolling.
To freeze a numer of columns just set the FrozenColumnCount property to the number of columns you want to freeze.

<DataGrid ItemsSource="{Binding Customers}" FrozenColumnCount="2" />

Headers visbility
You can control the visibility of row and column headers by setting the HeadersVisibility property to either
None,Row,Column or All


<DataGrid ItemsSource="{Binding Customers}" HeadersVisibility="None" />

How to template autogenerated columns

If you want to autogenerate columns using AutoGenerateColumns="True", you cannot use CellTemplates, because the
DataGrid autogenerates either a text, combo, hyperlink or checkbox column, but none of these are templateable. A simple
workaround is to hook into the autogeneration, cancel it and always create a DataGridTemplateColumn. The following snippet
shows the idea (the code is just a draft):

public class MyDataGrid : DataGrid
{

public DataTemplateSelector CellTemplateSelector
{
get { return (DataTemplateSelector)GetValue(CellTemplateSelectorProperty); }
set { SetValue(CellTemplateSelectorProperty, value); }
}

public static readonly DependencyProperty CellTemplateSelectorProperty =
DependencyProperty.Register("Selector", typeof(DataTemplateSelector),
typeof(MyDataGrid),
new FrameworkPropertyMetadata(null));

protected override void
OnAutoGeneratingColumn(DataGridAutoGeneratingColumnEventArgs e)
{
e.Cancel = true;
Columns.Add(new DataGridTemplateColumn
{
Header = e.Column.Header,
CellTemplateSelector = CellTemplateSelector
});
}
}

<l:MyDataGrid ItemsSource="{Binding}"
AutoGenerateColumns="True"
CellTemplateSelector="{StaticResource templateSelector}" />

► Tutorial ► ActionScript ► Flash CS3 ► Flash 9

Last modified: 2011-04-19 08:55:41


Show all comments
Good tutorial...
Sreekumar
I need to create DataGrid dynamically in special way.
Shail
Letâ��s say I have two columns for grid 1) FieldName and 2) FieldValue which comes from
database table.
Now one row data could have drop down, and other row could have text, and other row could have
check box in Field Value. How do I create this kind of dataGrid dynamically? My biggest challenge is
interacting with ColumnTemplate in individual cell level.
FieldName | Field Value
Sex | Radio Button to select Male or Female
Age | Drop Down Combo box to select age from 1 to 100
Name | Text box

is Employed | Check box to indicate whether employed or not
And another biggest challenge is I need to have Event on each FieldValue cell.
Event could be click, double click, Right mouse click, Enter etc.
Thank you
Shail
Very very nice article explaining every aspect of the grid with a Good Code example. Eager to see some
Anil Kumar...
more articles on various controls..
please help i bind complete datagrid but how 2 work same as datagridview in window appllication
patel...
like dg.Rows.column.cell is not in datagrid and how 2 count totalrows like dg.rows.counthow 2 do in
datagrid
which control equel datagridview in window app to wpf vs2010 reason i new in wpf vs 2010
patel...
awesome..i think its a knowledge of ocean

bhagavan
The datagrid in net4.0 is not good supported for mvvm.
eshao
THe datagrid don't have the "command" property like button,
if u use the datagrid wirh mvvm, u must do lot extra work that will hit u out off earth.
eshao

Superb, very Nice Article. It helped me a Lot. Thank U.

Srinivas
There is a great problem using grouping - when you call .Refresh() method of ListCollectionView, to
Dan
update layout, it redraws all the datagrid and close all your groups.
May anybody answer how to refresh the data without those problems?
There is a great problem using grouping - when you call .Refresh() method of ListCollectionView, to
Dan
update layout, it redraws all the datagrid and close all your groups.
May anybody answer how to refresh the data without those problems?
How did you made the View Source option disable on this page?
Dev
What should I do if I want another node directioned from the costumers class?
Luis
e.g.
public class Customer : INotifyPropertyChanged
private string _firstName;
private string _lastName;
private Gender _gender;
private Uri _webSite;
private bool _newsletter;
private string _image;
private Phone _phones;// <-------- this one
.
}
//where:
public class Phone:INotifyPropertyChanged
private int _homeNumber;
private int _celNumber;
private int _workNumber;
private int _faxNumber;
I want to display "Phone" values on a dataGrid, preferibly in a comboboxCell, I just want to

display them, not edit them
thanks

What should I do if I want another node directioned from the costumers class?
Luis
e.g.
public class Customer : INotifyPropertyChanged
private string _firstName;
private string _lastName;
private Gender _gender;
private Uri _webSite;
private bool _newsletter;
private string _image;
private Phone _phones;// <-------- this one
.
}
//where:
public class Phone:INotifyPropertyChanged
private int _homeNumber;
private int _celNumber;
private int _workNumber;
private int _faxNumber;
I want to display "Phone" values on a dataGrid, preferibly in a comboboxCell, I just want to

display them, not edit them
thanks
Is there anyway to get those check boxes to work with one click? The currently require two clicks to use.
Derek
One to select the cell and one to click the check box.
I have a problem on paging,in which i want to show google type paging like 1 2 3 4...400 please suggest
Prabhat
me,
khare
Hari Kumar (and others) you are missing the point of the WPF datagrid, you don't access the rows/cells
Steve
directly, the datagrid should be bound to a data set, changes made on the screen are reflected back to
the data set and if you change the data set these changes are reflected on the screen.
It takes a bit of getting used to, but it's very powerfull once you understand how to use it.
Would anyone know, how to make the grids look a bit more stylish as opposed to the normal windows

Chirag
'blue' selection. I would like to add a bit more touch and feel
tanks alot.very good

zahra
I have a question about grouping. Let's say, I have a group style in resource dictionary, and I want to set
Ruslan
datagrid group style to the group style from xaml. How can this be achieved?
Thank you in advance,
Ruslan
I have a question about grouping. Let's say, I have a group style in resource dictionary, and I want to set
Ruslan
datagrid group style to the group style from xaml. How can this be achieved?
Thank you in advance,
Ruslan
Soby very Nice Article.

Mathew
can u help me out?
Bhavneet
actually problem is that i'm doing a project in WPF but when i drag grid on it then there is no property
for autocolomn property or add colomn property.is the problem is of studio problem?
i'm using visual studio 2008..
detective Nice Article. Thanks for such a nice article.

jeera
Superb article.
Harikrishnan
How can I generate column dynamically from user preference column number values?
Ex: If I have 3 columns C1,C2,C3 and user chenges the order to C3,C1,C2 - I have to load the same way
the user changed it the next time...
Can anyone Help!!!!
Name
E-Mail (optional)
Comment
Post Comment


WPF Tutorial | Create a simple WPF application
Home
Getting started
Create a simple WPF application Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to create a simple WPF application
Custom Controls
Layout
In Visual Studio 2008
Input
Open Visual Studio 2008 and choose "File", "New", "Project..." in the main menu. Choose "WPF Application" as project type.
Data Binding
Choose a folder for your project and give it a name. Then press "OK"
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents
Windows 7
Interoperability
Performance
Expression Blend
Tools
UI Automation
Visual Studio creates the project and automatically adds some files to the solution. A Window1.xaml and an App.xaml. The structure
looks quite similar to WinForms, except that the Window1.designer.cs file is no longer code but it's now declared in XAML as
Window1.xaml
HelloWPF.html[2/16/2014 2:26:07 PM]

Open the Window1.xaml file in the WPF designer and drag a Button and a TextBox from the toolbox to the Window
Select the Button and switch to the event view in the properties window (click on the little yellow lightning icon). Doubleclick on the
"Click" event to create a method in the codebehind that is called, when the user clicks on the button.
Note: If you do not find a yellow lightning icon, you need to install the Service Pack 1 for VisualStudio on your machine.
Alternatively you can doubleclick on the button in the designer to achieve the same result.
Visual Studio automatically creates a method in the code-behind file that gets called when the button is clicked.


private void button1_Click(object sender, RoutedEventArgs e)
{
textBox1.Text = "Hello WPF!";
}

The textbox has automatically become assigned the name textBox1 by the WPF designer. Set text Text to "Hello WPF!" when the
button gets clicked and we are done! Start the application by hit [F5] on your keyboard.
Isn't this cool!
► Tutorial ► Photoshop CS4 ► Photoshop Action ► Adobe Photoshop

Last modified: 2010-02-08 17:51:47

Show all comments
The Great Website For WPF Learn Thanks Sir.

Faisal H...
Begginer Examples Good

Sudarshan
hi, i have already started doing the wpf application, but now im facing the problem that for different
ROHITH
resolutions my application is not visible properly and some of part of the applications r getting
cropped,,,, i have used the grid control to place the buttons, but for other resolutions the buttons r
getting displaced, so pls any help me out how to resolve it,,,,,,,,,,

thanks ...
Anjum
Its too esy to understand
Thanks !
Anjum
Its too easy to understand .
Very useful. Thanks

Jalindar
Its good,but what's new with WPF! It can simply be done with winforms.Please give some example which
Sree
describe the WPF specialty.
oooooo
grege
you Are very smart
good demo
ankit
worst example i didn't find need to demonstrate here. we can do in windows form only...
siva
worst example i didn't find need to demonstrate here. we can do in windows form only...
siva
Superb for beginners
mahesh
Thanks for providing
Thank you very much. It was my 1st WPF sample.... Thanks again..... :)
Vinay
Very useful tutorial... thanks :) I just wanna give 1 suggestion; if you could add a link @ Bottom for next
Vinay
page then it will be better..
WPF is for desktop application or web application???????

abc
super very much useful for beginers
kishore

NICE VERY MUCH USEFUL
KISHORE
After creating an application I am not getting any control on toolbox to add on .xaml page.I need help.
Sumantra
Good Example for beginner...

Roshni Shah
very useful........ Thanks
kalaivanan
very useful!:-)
Lokesh...
It is Very useful for Beginners

Shivu
Really nice. I am the beginner for learning Dot net but like to learn more
MMS
Nice article for beginners.

Ashok
Mahesh It's cool

Mane
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | XAML
Home
Fundamentals
XAML Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Introduction to XAML
Custom Controls
XAML stands for Extensible Application Markup Language. Its a simple language based on XML to create and initialize .NET objects
Layout with hierarchical relations. Altough it was originally invented for WPF it can by used to create any kind of object trees.
Input Today XAML is used to create user interfaces in WPF, Silverlight, declare workflows in WF and for electronic paper in the XPS standard.
Data Binding 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.
Styling
Localization
Advantages of XAML
Interaction
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
Resources
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:
2D Graphics
XAML code is short and clear to read
3D Graphics Separation of designer code and logic
Animation Graphical design tools like Expression Blend require XAML as source.
The separation of XAML and UI logic allows it to clearly separate the roles of designer and developer.
Multimedia
Documents
XAML vs. Code
Windows 7
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#.
Interoperability

Performance <StackPanel>
Expression Blend
<TextBlock Margin="20">Welcome to the World of XAML</TextBlock>
<Button Margin="10" HorizontalAlignment="Right">OK</Button>
Tools </StackPanel>

UI Automation

The same expressed in C# will look like this:

// Create the StackPanel
XAML.html[2/16/2014 2:26:24 PM]

WPF Tutorial | XAML
StackPanel stackPanel = new StackPanel();
this.Content = stackPanel;

// Create the TextBlock
TextBlock textBlock = new TextBlock();
textBlock.Margin = new Thickness(10);
textBlock.Text = "Welcome to the World of XAML";
stackPanel.Children.Add(textBlock);

// Create the Button
Button button = new Button();
button.Margin= new Thickness(20);
button.Content = "OK";
stackPanel.Children.Add(button);

As you can see is the XAML version much shorter and clearer to read. And that's the power of XAMLs expressiveness.
Properties as Elements
Properties are normally written inline as known from XML <Button Content="OK" />. 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.

<Button>
<Button.Content>
<Image Source="Images/OK.png" Width="50" Height="50" />
</Button.Content>
</Button>

Implicit Type conversion

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 BrushConverter makes a
System.Windows.Media.Brushes.Blue out of it. The same regards to the border thickness that is beeing converted implicit
into a Thickness object. WPF includes a lot of type converters for built-in classes, but you can also write type converters for your
own classses.

<Border BorderBrush="Blue" BorderThickness="0,10">
</Border>

Markup Extensions
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: Background="{StaticResource NormalBackgroundBrush}"). WPF
has some built-in markup extensions, but you can write your own, by deriving from MarkupExtension. These are the built-in
markup extensions:
Binding
To bind the values of two properties together.
StaticResource
XAML.html[2/16/2014 2:26:24 PM]
WPF Tutorial | XAML
One time lookup of a resource entry

DynamicResource
Auto updating lookup of a resource entry
TemplateBinding
To bind a property of a control template to a dependency property of the control
x:Static
Resolve the value of a static property.
x:Null
Return null

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 Content is bound to the Text 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.

<TextBox x:Name="textBox"/>
<Label Content="{Binding Text, ElementName=textBox}"/>

Namespaces
At the beginning of every XAML file you need to include two namespaces.
The first is http://schemas.microsoft.com/winfx/2006/xaml/presentation. It is mapped to all wpf controls in
System.Windows.Controls.
The second is http://schemas.microsoft.com/winfx/2006/xaml it is mapped to System.Windows.Markup that
defines the XAML keywords.

The mapping between an XML namespace and a CLR namespace is done by the XmlnsDefinition attribute at assembly level.
You can also directly include a CLR namespace in XAML by using the clr-namespace: prefix.

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
</Window>


Last modified: 2013-12-13 09:08:46

Show all comments
Nice...
Ganesh
good content for beginners.

batham
XAML.html[2/16/2014 2:26:24 PM]

WPF Tutorial | XAML
its very comprehensive . thanks alot

Safoura
good content for beginners.

batham
nice
AT
Very Helpful!! I liked it!!
Rahul
Thanks!
Very Good, thank you

Ali
When I can understand a new subject in a few minutes that means that it is "clear and
Jack Shasha
concise" as I like it. I am a technical writer and always striving to achieve a similar effect. Thanks.
Thanks a lot..!!! It is really very easy to understand

sai
Screw the WPF chapt in my C#2010 for dummies, this is how a proper tutorial should be.
OSK
The code above is only longer because of the parameterless constructors. XAML allows a line to initialise
Ian
an object. You need a line for each parameter in code because of the lack of constructors.
Ramya Thanks alot good one
krishna
Thank you for this short n precise tutorial..!

Girish
Good one and easily understandable.
Mahesh
Thank U
Good one and easily understandable.
XAML.html[2/16/2014 2:26:24 PM]

WPF Tutorial | XAML
Mahesh
Thank U
Very cool tutorial. Is there a way though that you could put forward and next buttons? Thanks.
Jason
bibin tv
And i was thinking i would never learn XAML

Darpok
Hello! kfedfaa interesting kfedfaa site! I'm really like it! Very, very kfedfaa good!
Pharme195
Hello! fdkcgae interesting fdkcgae site! I'm really like it! Very, very fdkcgae good!
Pharmg537
very well said!!

dk
Thanks. A very good and succint read. Waiting for more articles.
Atif Hussain
Fantastic Notes
LampGlow...
Thanks A Lot......
Baljinder
great ..
innocent...
Name
E-Mail (optional)
Comment
XAML.html[2/16/2014 2:26:24 PM]

WPF Tutorial | XAML
Post Comment
XAML.html[2/16/2014 2:26:24 PM]

WPF Tutorial | Grid Panel
Home
Layout
Grid Panel Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Grid Panel
Custom Controls
Introduction
Layout
How to define rows and columns
Input
How to add controls to the grid
Data Binding
Resize columns or rows
Styling
How to share the width of a column over multiple grids
Localization
Using GridLenghts from code
Interaction
Resources
Introduction
2D Graphics

3D Graphics
Animation
Multimedia
Documents
Windows 7
Interoperability
Performance
Expression Blend
Tools 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.
UI Automation
The resize behaviour of the controls is defined by the HorizontalAlignment and VerticalAlignment properties who define
the anchors. The distance between the anchor and the grid line is specified by the margin of the control
GridLayout.html[2/16/2014 2:27:02 PM]

Define Rows and Columns

The grid has one row and column by default. To create additional rows and columns, you have to add RowDefinition items to the
RowDefinitions collection and ColumnDefinition items to the ColumnDefinitions collection. The following example
shows a grid with three rows and two columns.
The size can be specified as an absolute amount of logical units, as a percentage value or automatically.
Fixed Fixed size of logical units (1/96 inch)

Auto Takes as much space as needed by the contained control
Star (*) 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.

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="28" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
</Grid>

How to add controls to the grid

To add controls to the grid layout panel just put the declaration between the opening and closing tags of the Grid. Keep in mind
that the row- and columndefinitions must precced any definition of child controls.
The grid layout panel provides the two attached properties Grid.Column and Grid.Row to define the location of the control.
<Grid>
<RowDefinition Height="*" />
<RowDefinition Height="28" />
<ColumnDefinition Width="200" />
<Label Grid.Row="0" Grid.Column="0" Content="Name:"/>
<Label Grid.Row="1" Grid.Column="0" Content="E-Mail:"/>
<Label Grid.Row="2" Grid.Column="0" Content="Comment:"/>
<TextBox Grid.Column="1" Grid.Row="0" Margin="3" />
<Button Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right"
MinWidth="80" Margin="3" Content="Send" />
</Grid>


Resizable columns or rows

WPF provides a control called the GridSplitter. 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.
<Grid>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<Label Content="Left" Grid.Column="0" />
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext"
Width="5" Background="#FFBCBCBC"/>
<Label Content="Right" Grid.Column="2" />
</Grid>

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 ResizeBehavior to
PreviousAndNext.
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 ResizeDirection to Columns or Rows.
<GridSplitter ResizeDirection="Columns"/>

How to share the width of a column over multiple grids

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.
By setting the attached property Grid.IsSharedSizeScope to true on a parent element you define a scope within the column-
widths are shared.
To synchronize the width of two columndefinitions, set the SharedSizeGroup to the same name.

<ItemsControl Grid.IsSharedSizeScope="True" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>

<ColumnDefinition SharedSizeGroup="FirstColumn" Width="Auto"/>
<TextBlock Text="{Binding Path=Key}" TextWrapping="Wrap"/>
<TextBlock Text="{Binding Path=Value}" Grid.Column="1" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Useful Hints
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.
Using GridLenghts from code

If you want to add columns or rows by code, you can use the GridLength class to define the differenz types of sizes.
Auto sized GridLength.Auto

Star sized new GridLength(1,GridUnitType.Star)
Fixed size new GridLength(100,GridUnitType.Pixel)
Grid grid = new Grid();

ColumnDefinition col1 = new ColumnDefinition();
col1.Width = GridLength.Auto;
ColumnDefinition col2 = new ColumnDefinition();
col2.Width = new GridLength(1,GridUnitType.Star);

grid.ColumnDefinitions.Add(col1);
grid.ColumnDefinitions.Add(col2);

More on this topic

How to create a resizable column
► Tutorial ► Adobe InDesign ► InDesign CS3 ► Adobe Print

Last modified: 2011-10-03 09:22:29

Show all comments
Commented on 30.March 2011
Nice one Bro...

Antony Nadan

I have a problem with Grid inside ItemsControl. The Grid as DataTemplate with 1 row and 3 columns
Ričardas
(each must have Width = Auto). When I populate buttons, they are shown with different widths
(according to text lengths) - HorizontalAlignment="Stretch" does not work. It fails to
preserve same column width in each populated grid. Setting Column width to * is not an option to
me, because sometimes I have one or two not visible columnns, and I want remaining visible columns
(e.g. buttons) take whole width. The Grid.IsSharedSizeScope="True" also does not help...
differenz types => different types
Paul
Great article. Thanks! You have some more typos in your tutorails, especially some if insted of it. I'll try
to add it in comments in respectfull pages.
Commented on 21.April 2011
Superb.........,
Om Prakash
I Heart fully,
Thank you for your nice Material
Om Prakash Bishnoi
Software Engineer ,
DotSquare, Jaipur(RAj.)
This is my firts time to use WPF, It is a great help. Keep it up man! Thanks
Dennis
its very easy to learn as beginner

Arun
sandeep Fantastic Article...Well explained..

sharma
We need more details.
Ray Akkanson
Ra Akkanson
Hi,
Simi
that my first time to using grid layout.
So can u tell me d proper way that how can i run any program.
Good One...........:-)
Manoj

thanks for the good explanation.

ray akkanson
Thanks it was very helpfull, it is my first time using Grid

forogh
Nice one
J
btf..nice article
Ashu
its a very nice....

Rakhi
Thanks for this. I keep finding myself getting back to your web (which is both well organized and
Tomer Avni
presented) and your topics are great !
B.T.W the part of GridLength(1,GridUnitType.Star) gave me the solution I was looking for the past 2
hours! (I couldn't help but creating element in code rather the XAML)
G2One thank for sharing your great think.....

Network
How we can retrieve values of each column by iterating ?????

kisalay
Thanks,this definition is very useful

periyasamy
Nice
Vijay
kya hai ye sab Ha ?????????????????????????????

yeda anna
how sexy is this documents

yeda anna
Good to learn
sreenivas

Hi,
Gagan M
I just found a typo. Will be better if you can get it rectified since it might be confusing for others.
In 'Define Rows and Columns' section,
'The following example shows a grid with three rows and two columns.' (Instead there are four rows
and two columns in the example)
Thanks.
Thanks~ It is easy to understand for me !
Randy
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Dependency Properties
Home
Fundamentals
Dependency Properties Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Dependency Properties
Custom Controls
Introduction
Layout
Value resolution strategy
Input
The magic behind it
Data Binding
How to create a DepdencyProperty
Styling
Readonly DependencyProperties
Localization
Attached DependencyProperties
Interaction
Listen to dependency property changes
Resources
How to clear a local value
2D Graphics
3D Graphics Introduction
Animation
When you begin to develop appliations with WPF, you will soon stumble across DependencyProperties. They look quite similar to
Multimedia normal .NET properties, but the concept behind is much more complex and powerful.
Documents
The main difference is, that the value of a normal .NET property is read directly from a private member in your class, whereas the
Windows 7 value of a DependencyProperty is resolved dynamically when calling the GetValue() method that is inherited from
Interoperability
DependencyObject.
When you set a value of a dependency property it is not stored in a field of your object, but in a dictionary of keys and values
Performance
provided by the base class DependencyObject. The key of an entry is the name of the property and the value is the value you
Expression Blend want to set.
Tools The advantages of dependency properties are
UI Automation Reduced memory footprint

It's a huge dissipation to store a field for each property when you think that over 90% of the properties of a UI control typically
stay at its initial values. Dependency properties solve these problems by only store modified properties in the instance. The
default values are stored once within the dependency property.
DependencyProperties.html[2/16/2014 2:27:23 PM]

Value inheritance

When you access a dependency property the value is resolved by using a value resolution strategy. If no local value is set, the
dependency property navigates up the logical tree until it finds a value. When you set the FontSize on the root element it
applies to all textblocks below except you override the value.
Change notification

Dependency properties have a built-in change notification mechanism. By registering a callback in the property metadata you
get notified, when the value of the property has been changed. This is also used by the databinding.
Value resolution strategy

Every time you access a dependency property, it internally resolves the value by following the precedence from high to low. It checks
if a local value is available, if not if a custom style trigger is active,... and continues until it founds a value. At last the default value is
always available.
The magic behind it

Each WPF control registers a set of DependencyProperties to the static DependencyProperty class. Each of them consists of
a key - that must be unique per type - and a metadata that contain callbacks and a default value.
All types that want to use DependencyProperties must derive from DependencyObject. This baseclass defines a key, value
dictionary that contains local values of dependency properties. The key of an entry is the key defined with the dependency property.

When you access a dependency property over its .NET property wrapper, it internally calls GetValue(DependencyProperty) to
access the value. This method resolves the value by using a value resolution strategy that is explained in detail below. If a local value
is available, it reads it directly from the dictionary. If no value is set if goes up the logical tree and searches for an inherited value. If no
value is found it takes the default value defined in the property metadata. This sequence is a bit simplified, but it shows the main
concept.

How to create a DependencyProperty

To create a DependencyProperty, add a static field of type DepdencyProperty to your type and call
DependencyProperty.Register() to create an instance of a dependency property. The name of the DependendyProperty
must always end with ...Property. This is a naming convention in WPF.
To make it accessable as a normal .NET property you need to add a property wrapper. This wrapper does nothing else than internally
getting and setting the value by using the GetValue() and SetValue() Methods inherited from DependencyObject and passing the
DependencyProperty as key.
Important: Do not add any logic to these properties, because they are only called when you set the property from code. If
you set the property from XAML the SetValue() method is called directly.
If you are using Visual Studio, you can type propdp and hit 2x tab to create a dependency property.

// Dependency Property
public static readonly DependencyProperty CurrentTimeProperty =
DependencyProperty.Register( "CurrentTime", typeof(DateTime),
typeof(MyClockControl), new FrameworkPropertyMetadata(DateTime.Now));

// .NET Property wrapper
public DateTime CurrentTime
{
get { return (DateTime)GetValue(CurrentTimeProperty); }
set { SetValue(CurrentTimeProperty, value); }
}

Each DependencyProperty provides callbacks for change notification, value coercion and validation. These callbacks are registered on
the dependency property.


new FrameworkPropertyMetadata( DateTime.Now,
OnCurrentTimePropertyChanged,
OnCoerceCurrentTimeProperty ),
OnValidateCurrentTimeProperty );

Value Changed Callback
The change notification callback is a static method, that is called everytime when the value of the TimeProperty changes. The new
value is passed in the EventArgs, the object on which the value changed is passed as the source.

private static void OnCurrentTimePropertyChanged(DependencyObject source,
DependencyPropertyChangedEventArgs e)
{
MyClockControl control = source as MyClockControl;
DateTime time = (DateTime)e.NewValue;
// Put some update logic here...
}

Coerce Value Callback
The coerce callback allows you to adjust the value if its outside the boundaries without throwing an exception. A good example is a
progress bar with a Value set below the Minimum or above the Maximum. In this case we can coerce the value within the allowed
boundaries. In the following example we limit the time to be in the past.

private static object OnCoerceTimeProperty( DependencyObject sender, object data )
{
if ((DateTime)data > DateTime.Now )
{
data = DateTime.Now;
}
return data;
}

Validation Callback
In the validate callback you check if the set value is valid. If you return false, an ArgumentException will be thrown. In our example
demand, that the data is an instance of a DateTime.

private static bool OnValidateTimeProperty(object data)
{
return data is DateTime;
}

Readonly DependencyProperties
Some dependency property of WPF controls are readonly. They are often used to report the state of a control, like the
IsMouseOver property. Is does not make sense to provide a setter for this value.
Maybe you ask yourself, why not just use a normal .NET property? One important reason is that you cannot set triggers on normal
.NET propeties.
Creating a read only property is similar to creating a regular DependencyProperty. Instead of calling
DependencyProperty.Register() you call DependencyProperty.RegisterReadonly(). This returns you a
DependencyPropertyKey. This key should be stored in a private or protected static readonly field of your class. The key gives
you access to set the value from within your class and use it like a normal dependency property.
Second thing to do is registering a public dependency property that is assigned to

DependencyPropertyKey.DependencyProperty. This property is the readonly property that can be accessed from external.

// Register the private key to set the value
private static readonly DependencyPropertyKey IsMouseOverPropertyKey =
DependencyProperty.RegisterReadOnly("IsMouseOver",
typeof(bool), typeof(MyClass),
new FrameworkPropertyMetadata(false));

// Register the public property to get the value
public static readonly DependencyProperty IsMouseoverProperty =
IsMouseOverPropertyKey.DependencyProperty;

// .NET Property wrapper
public int IsMouseOver
{
get { return (bool)GetValue(IsMouseoverProperty); }
private set { SetValue(IsMouseOverPropertyKey, value); }
}

Attached Properties
Attached properties are a special kind of DependencyProperties. They allow you to attach a value to an object that does not know
anything about this value.
A good example for this concept are layout panels. Each layout panel needs different data to align its child elements. The Canvas
needs Top and Left, The DockPanel needs Dock, etc. Since you can write your own layout panel, the list is infinite. So you see, it's
not possible to have all those properties on all WPF controls.
The solution are attached properties. They are defined by the control that needs the data from another control in a specific context.
For example an element that is aligned by a parent layout panel.
To set the value of an attached property, add an attribute in XAML with a prefix of the element that provides the attached property.
To set the the Canvas.Top and Canvas.Left property of a button aligned within a Canvas panel, you write it like this:
<Canvas>
<Button Canvas.Top="20" Canvas.Left="20" Content="Click me!"/>
</Canvas>

public static readonly DependencyProperty TopProperty =
DependencyProperty.RegisterAttached("Top",
typeof(double), typeof(Canvas),
new FrameworkPropertyMetadata(0d,
FrameworkPropertyMetadataOptions.Inherits));

public static void SetTop(UIElement element, double value)
{

element.SetValue(TopProperty, value);
}

public static double GetTop(UIElement element)
{
return (double)element.GetValue(TopProperty);
}

Listen to dependency property changes

If you want to listen to changes of a dependency property, you can subclass the type that defines the property and override the
property metadata and pass an PropertyChangedCallback. But an much easier way is to get the
DependencyPropertyDescriptor and hookup a callback by calling AddValueChanged()

DependencyPropertyDescriptor textDescr = DependencyPropertyDescriptor.
FromProperty(TextBox.TextProperty, typeof(TextBox));

if (textDescr!= null)
{
textDescr.AddValueChanged(myTextBox, delegate
{
// Add your propery changed logic here...
});
}

How to clear a local value

Because null is also a valid local value, there is the constant DependencyProperty.UnsetValue that describes an unset value.
button1.ClearValue( Button.ContentProperty );

► Tutorial ► Learn Quick Books ► Basics ► Coding Learning

Last modified: 2010-02-08 17:52:30

Show all comments
Very Goooddddd !!
Ali
Thanks.
Very good explanation of DependencyProperty

Fadi Raheel

Could you please put a XAML sample of the binding to the property developed in the code? Thanks.
Adriano
The only article that does not confuse readers on Dependency Properties
Jay
Nice attempt at an explanation of DependencyProperty. It could be better organized.

Hal
YES !
Rene
Good, very nice article. Thanks

Satyabrata
Thank you for spending the time to prepare this article. I have already read the MSDN articles on
Stefan
dependency properties as well as Pro WPF and Silverlight MVVM: Effective Application Development
with Model-View-ViewModel (Apress 2010), so understanding your article was easy for me. What is
omitted from all of these is a lowest common denominator fully working example that is useful (or at
least can be extended to be useful). MSDN uses a silly fish tank example. Provide a second example
that builds on the first in order to illustrate the advanced concepts like callbacks.
Thanks thanks for this wonderful tutorial it really helped me a lot to understand DependencyProperties
Aymen
, I just still have a question , I don't understand the fact that the dependency property is declared as
static so how comes that every instance has its own value this is the only misundestanding I still have I
need your help , thanks in advance .
Thank you very much.i was looking like this type of article
mahanth
Very useful for me. Thanks

Tronel
very nice and useful

balaji
You will need to read this about 10 times to Understand what is going on. I understand a little bit now
daanyaal
about DP, much better than msnd
Awesome! Very well explained.

Xus

Very nice explanation on dependency properties............finally understood the concept ! Thanks for
Maya
posting this.
Good.. Nice Article

Ankush Gupta
I m the beginner of WPF. wow! thts really great to have site like this. Thanks. its helping me a lot.
Cryptic
why is the dependency property declared as readonly if you are also using the SetValue method
blah!!!blah!!!
Rithuu Content is Precise and well defined. Thanks for writing this article.
Mangala
Thanks! much clearer than many articles.

Nahum
Thank you a lot :)
seyed
There is an miistake on Readonly DependencyProperties section. Wrapper method is defined as 'int'
but DependencyProperty is already as 'bool'.
Also, i couldn't use 'Listen to dependency property changes' section.
Can you explain some more info about it? Where i must insert these codes?
Thank's again :)
Mayank Very Nice Post man

Gupta
Hi Christian
Ohad
Thanks for your detailed explanation!
I have few questions :
1. At the begining when you expalnied about the advantages one of them was "Reduced
memory footprint" u wrote that when using DP it reduces memory storage compare to Normal
Properties because it "only stores modified properties in the instance & The default values
are stored once within the dependency property".
I understand that when storring only changes it reduces memory storage but what does it mean that
the default values are "stored within the dependency property"? i mean they must be
stored somewhere when application runs, so where would that be?
so why DP takes less memory than Normal Property?

2.You wrote that DP are stored in Dictionary instaed of Field like Normal properties.
i wanted to know how is this fact empowers DP compared to normal Prop'. why is it
better?
3.I understood that there are "Readonly DP" but i have noticed that when using the
shortcutin Visual Studio for creating regular DP (propdp) a
" public static readonly DependencyProperty MyProperty" is added.
so what is the difference when adding "readonly" statement in regular DP and ReadOnly
DP?
4. Maybe a silly question but what is the meaning of "Dependency" in Dependency

Properties?
5. Why is the dependency property must be defined as static?
Hi Christian
ohad
Thanks for your detailed explanation!
I have few questions :
1. At the begining when you expalnied about the advantages one of them was "Reduced
memory footprint" u wrote that when using DP it reduces memory storage compare to Normal
Properties because it "only stores modified properties in the instance & The default values
are stored once within the dependency property".
I understand that when storring only changes it reduces memory storage but what does it mean that
the default values are "stored within the dependency property"? i mean they must be
stored somewhere when application runs, so where would that be?
so why DP takes less memory than Normal Property?
2.You wrote that DP are stored in Dictionary instaed of Field like Normal properties.
i wanted to know how is this fact empowers DP compared to normal Prop'. why is it
better?
3.I understood that there are "Readonly DP" but i have noticed that when using the
shortcutin Visual Studio for creating regular DP (propdp) a
" public static readonly DependencyProperty MyProperty" is added.
so what is the difference when adding "readonly" statement in regular DP and ReadOnly
DP?
4. Maybe a silly question but what is the meaning of "Dependency" in Dependency

Properties?
5. Why DP are always declared as Static?
6. why when updating data from Model to View we have to use DP or NotiftyPropertyChange instead
of normal property,
and when updating data from View to Model we have to use Normal Property?
hello
dsd

Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Development Tools
Home
Getting started
Development Tools Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
WPF Development Tools
Custom Controls
Microsoft provides two development tools for WPF applications. One is Visual Studio, made for developers and the other is
Layout Expression Blend 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
Input
graphical part very well but it has (still) rare support for code and XAML editing.
Data Binding
So the conclusion is that you will need both of them.
Styling
Localization
Microsoft Visual Studio 2010
Interaction
Visual Studio is the tool for developers to develop WPF applications. It includes a graphical designer for WPF since version 2008. If
Resources you're using Visual Studio 2005 you can install an add-on that enables you to develop WPF applications.
2D Graphics Microsoft provides a free Express Edition of Visual Studio that also includes the WPF designer. You can download it from the following
URL
3D Graphics
Download Microsoft Visual C# 2010 - Express Edition
Animation
Multimedia
Documents
Windows 7
Interoperability
Performance
Expression Blend
Tools
UI Automation
Microsoft Expression Blend 3 + Sketch Flow

wpfdevtools.html[2/16/2014 2:28:07 PM]
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.
In the latest Version it also includes a powerful prototyping tool called SketchFlow. Expression Blend can open solution files created by
visual studio.
Download Microsoft Expression Blend 3
Other useful tools

WPF Inspector
Snoop (Inspect the Visual Tree of running WPF applications)
Mole (Data Visualizer for Visual Studio
XAML Power Toys
WPF Performance Suite
Last modified: 2010-06-25 18:11:31

Show all comments
Tank you!
ali
Wow nice! I want to learn wpf.

Wow
its nice information its very very easy to understand that you presented
balaraman

sooooooo thank full to you
Very Nice Articles for beginners

sekhar
good one...
sarath
Very good website for giving initial and advance knowledge of WPF and how to implement in any
Jamil Akhtar
Application.
Really nice info,
Datla
why dont you add next page/previous page button.
Coole Website:
Sedat
Werde jetzt mal den Inhalt checken.
FÃ¼r Studierende oder Recherchierend wÃ¤ren "Next" und

"Previous"-Buttons 'ne coole Sache.
thanks a lot
alireza
Thanks!!!
Siva
good one...
satyawan
User-friendly and interesting site indeed! ZELJKO legendo

Ivan
Nice work. I want more :-)

Andrew
thanks..i m trying to learn WPF and this is so helpfull
Sagar
.......
it is realy good
Zeeda

Hi moser, your site looks awesome.Iam new to the wpf ..i have one query in my mind can we develop
Sanjay
both offline and web application by using wpf???
Indeed a Good Site To Start Off With WPF..Thanks :)

Akshatha
Neelam Great Job!!! Kindly post some tutorials for learning .net framework 3.5
Sharma
Looking forward to it. Thanks for putting this together!

Jonathan
Nice Tutorial...Thank you..

Saroj
Nice Article.Easy to understand...

Rushyendra
Mai Vĩnh Thanks! I'll enjoy!
Sang
Good article for beginners.

Ramya
Thank you:)
thank you ,it is good for beginners,it makes me to complete the following
Hanan
Awesome tutorial
Santosh
Name
E-Mail (optional)
Comment
Post Comment


WPF Tutorial | WPF Inspector
Home
WPF Inspector Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
WPF Inspector
Custom Controls
Layout
NEW: XAML Inspector - cross platform visual Debugging
Input
Have a look at XAML inspector. The successor of WPF Inspector. It brings all the features of WPF Inspector to all XAML platofrms
Data Binding (WPF, Silveright, WinRT and Windows Phone).
Styling Visit project page: www.xamlinspector.com
Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents
Windows 7
Interoperability
Performance
Expression Blend 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,
Tools
watch the data context, debug triggers, trace styles and much more. Since March 2011, WPF Inspector is open source and available
UI Automation on CodePlex.
Download WPF Inspector from CodePlex
Inspector.html[2/16/2014 2:28:53 PM]

► Tutorial ► Photoshop CS4 ► Photoshop Action ► Photoshop Brushes

Last modified: 2013-10-17 13:47:17

Show all comments
Commented on 3.January 2011
Christian,
Vins
I can't get it to work.. Version 0.9.5 gives me error "Object Reference Not Set" when I click Inspect
after selecting my wpf application.
Any clue?
Thanks!
Would be very appreciated to see it working on WPF 4.0 coz we haven't been using 3.5 for a long
xusan
and may be would not work on that version soon, any ways thank you for sharing this wonderfull tool
same as the one above me. i get this error.

shemesh
Very usefull tool I used under Windows 7 x64 and Visual Studio 2008
Tony
since I work with Visual Studio 2010, it's no longer working
if you release the source code, we could help you improve this great tool
(note : Snoop is also a good tool but it doesn't work too)
Agree with the above. We could really help you improve this great tool (and probably make it work
Mel
for a wider audience).
I've been trying to use it in my win7 VS2010 box to no avail. it works on my winxp VS2008 though.
Commented on 10.February 2011
@Tony:
Cory Plotts
Snoop does work for WPF 3.5/4.0 and x86/x64 ... just make sure that you have the latest version at
http://snoopwpf.codeplex.com.
If you have grabbed the version from Pete Blois' site ... that one ONLY works for WPF 3.5 and x86.
@Cory Plotts
Tony
The latest version works... sometimes... (many times I can't snoop into the application, the "Snoop this
application" button doesn't do anything, the "Magnify" button is working)
and when I successfully Snoop the application, Snoop is stuck at the ContentPresenter of the main

window, I can't "snoop" into my injected view (my project use CAB/SCSF)
hallo,,,,i jhon IT student, can u pls help me to develop my thesis,
jhon
using wpf, pls view me some sample or give me some sites that can
help me in developing may programm..thanks..
nice work
Rohatash
Great work with this new release!
Borislav Ivanov
I hit a small problem:
I have two running 2 WPF applicaions and choose to attach to one of them, but WPF Inspector
attaches to the other one:
- .NET 4.0 64-bit (this is Metro Twit)
- .NET 3.0 32-bit (this is my app, that I cannot attach to)
If I stop the Metro Twit, I can succesfully attach to my app.
I just realized that if I put a disabled button to register the application unless you enter a valid serial,
edgar
you can enable that button easy. 0_o
Great application!
It is very usefull for me..
suresh
I learn wpf basic easily..this is great.
ramasamy
Hi Borislav,
Christian
the problem has been fixed in version 0.9.8. You can download it directly from codeplex.
Moser
Really a gud site for WPF learners..

Aly
It's great site who are working on WPF for the first time .
Debashish...
It's good site for Beginner who are working on WPF

Girish K
Mole is another great way to visualize WPF apps, they just put out Mole 2010 and it's really awesome
Jane
for what I'm doing with WPF at work.

www.molosoft.com
Very handy tool ,,, more features than snoop....

tauqir
One Suggestion : The Main Inspector should not exit when we close the application we are inspecting.
We have to rerun inspector every time we want to inspect.
Hope to see this in future release.
Hello Christian.
Tobias
your Tool is very nice.
But, it is not possible to read complete Text of Errors, if they are very long. It is not possible to scroll,
or rightclick to copy text to clipboard.
It would be very nice and good to have this feature.
Greets
Tobi
Hi,
Rohit
WPF Inspector is an awesome stuff for a wpf developer. But i'm facing an issue with it.
can you provide any work around for this - http://stackoverflow.com/questions/5831354/cannot-add-

geometrydrawing-to-drawinggroup
Thanks,
Sir please give demo video how to work on this? i am not able to know this one.Its showing empty.
shankar
Very promissins concept, I've been looking for something like this for some time.
Thomaz
But I'm having trouble attaching it to my application. Seems like no matter which application I select in
the Attach box WPF inspector always attaches to itself.
Good
Sai Govind.N.K
... Show de Bola!!

Rodrigo
Really helpful resource

Tamas

Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | List of 3rd-Party Controls
Home
Controls
List of 3rd-Party Controls Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
WPF - Third Party Controls
Custom Controls
Layout
WPF Component Vendors
Input
Mindscape
Data Binding Component Art
Styling DevExpress
SyncFusion
Localization
Infragistics
Interaction Xceed
Telerik
Resources
Actipro
2D Graphics divelements
Binary Mission
3D Graphics
Ice Blue
Animation
Multimedia
Documents Bar Code Misc

Windows 7
Neodynamics BarCode WPF Toolkit
Interoperability Actipro BarCode Infragistics Tab Control
Mindscape Flow Diagrams
Performance
Expression Blend Data Grids

Office Components
Tools Infragistics Data Grid
UI Automation Xceed Data Grid Spire.DOC for WPF
Component One Data Grid Spire.XLS for WPF
Syncfusion Essential Grid
Telerik RadGridView for WPF
ComponentArt DataGrid Outlook Bar
3rdPartyLibs.html[2/16/2014 2:29:10 PM]
Mindscape Datagrid
Infragistics Outlook Bar
Actipro Outlook Bar
CAD DevComponents Outlook Bar
Odyssey Outlook Bar
Topology Framework .NET Odyssey Explorer Bar
Eyeshot Telerik RadOutlookBar for WPF
Mono GtkSharp Mindscape Outlook Bar
CadLib 3.5 DWG DXF .NET Library Component One Outlook Bar
sgCode
SeeDraw
Panels
Charts Infragistics Carousel Panel

Telerik WPF Carousel Control
Infragistics xamChart Telerik RadTileView for WPF
Swordfish Charts Mindscape Coverflow Control
Component One Chart Telerik Virtualizing Wrap Panel
Visifire Chart for WPF and Silverlight Component One HyperPanel
WPF Graph on Code Project
Free 3D Chart
Free High Performance 3D Chart Progress Bars
D3 Dynamic Data Display
Mindscape Progress Bar
Syncfusion Essential Chart
Syncfusion Gauge
Telerik RadGauge for WPF Property Grids
Telerik RadChart for WPF
ComponentArt Chart Actipro Property Grid
Mindscape Chart Mindscape Property Grid
ChartFX for WPF Component One Property Grid
NextWave Chart for WPF
NextWave Gauge for WPF
PDF & Reporting
Color Picker Infragistics Reporting for WPF
Component One Reports
Mindscape Color Picker Component One PDF Viewer
Telerik Color Picker IceBlue PDF Viewer
Free Color Picker (CodePlex) IceBlue PDF for WPF
Component One Color Picker o2sol PDFView4NET
Diagram Editors Ribbon

Orbifold Visualizers Fluent Ribbon Control Suite
Syncfusion Essential Diagram Editor Infragistics Ribbon
Actipro Ribbon
DevComponents Ribbon
Dialogs and Windows Odyssey Ribbon
Telerik WPF UI RibbonBar
Pure WPF FileOpen, FileSave and
Free Microsoft WPF Ribbon Control
FolderBrowser Dialogs
divelements Ribbon
divelements Shell

BinaryMisson Ribbon
Dock
Schedule
Infragistics Dock Manager
DevComponents Schedule Control
Actipro Dock Panel
DevComponents DateTime Picker
DevComponents Dock Panel
Component One Schedule
WPF Docking Library (Open Source)
Timeline Control
Avalon Dock (Open Source)
Telerik RadScheduler for WPF
Telerik RadDocking for WPF
Free WPF Schedule Control
divelements Dock
Mindscape Schedule Control
Mindscape Time Explorer
Editors Infragistics MonthCalendar
Infragistics xamEditors
Xceed Editors Slider
DevComponents Numeric Editor
Mindscape Dual-Slider
Telerik RadNumericUpDown for WPF
Component One Dual-Slider
Syncfusion Essential Edit (with Syntax
Highlighting)
WPF Calendar Control Toolbar
Mindscape Rich Text Editor
Telerik Image Editor DevExpress ToolBar
Odyssey Breadcrumb Bar
ComponentArt Toolbar
Effects
Transitionals - Framework to transition between Theming
screens.
WPF Shader and Transition FX WPF Theme Selector
Windows Presentation Foundation Pixel Shader
Effects Library
DotWay WPF - Color Picker, Panels and several Tree
Shader Effects
Telerik RadTree View for WPF
Telerik Drag&Drop for WPF
Mindscape Multicolumn Tree
GIS and Maps

Web Browser
ESRI ArcGIS Controls for WPF
Chromium Web Browser
Microsoft Virual Earth Control
Sharp Map Control
Wizard
Multimedia divelements Wizard
Actipro Wizard
DirectShowLib - .NET Wrapper for DirectShow
VideoRenderElement
Webcam Control
3D
WPF Media Kit - DVD Player, DirectShow,
WebCam Xceed 3D Views


Last modified: 2013-03-08 21:43:42

Show all comments
Also, check out... http://www.telerik.com

Pete
Theo VERY NICE. THANK YOU!!!!

Zographos
Current version/replacement for "WPF Docking Library (Open Source)":
Mani
http://avalondock.codeplex.com
Please update.
FluidKit
pcdny
http://www.codeplex.com/fluidkit
FluidKit
pcdny
http://www.codeplex.com/fluidkit
You can try with Syncfusion WPF controls.
Bala
http://www.syncfusion.com/
can nebody telme wer i can get the freeware software for datagrid in wpf
pooja
please add timeline control from http://timeline.codeplex.com

asyrov
Here my FolderBrowseDialog http://wpfdialogs.codeplex.com/
TKundNobody

The lost WPF Dialogs^^
very informative
Abirami
Please, add "Fluent Ribbon Control Suite" fluent.codeplex.com (to Toolbar section).
daVinci
Fluent Ribbon Control Suite is a library that implements an Office-like (MicrosoftÂ® Office Fluentâ�¢
user interface) for the Windows Presentation Foundation (WPF). It provides well-customized controls
such as RubbonTabControl, Gallery, QuickAccessToolbar, ScreenTip, StatusBar and so on. It is
bundled with the most up-to-date Office 2010 styles
Can you please add a www.componentart.com they're big players too.

John W.
Is WPF Window forms have Help Button(?) ?. pls let me know.Its very urgent.
Ranjan
I've used the Telerik WPF controls in previous work and I can confirm they're very easy to use and
David Cummins
pretty sexy.
I've used the Telerik WPF controls in previous work and I can confirm they're very easy to use and
David Cummins
pretty sexy.
Is there anyone test performance of grids that contains blinking, changing layout, painting (like real
yunus
time feed) with large data?
Is there anyone test performance of grids that contains blinking, changing layout, painting (like real
yunus
time feed) with large data?
componenArt.. componentone, and syncfusion which one is most good.. i want to purchase one
AFtab
anyone guide me
I am wondering how to create one!!!
Qualitatserz...
1) Creat the variable to store the value (include scale, range of the dial, etc etc) 2)draw the
background,and the form of the line, needle or hand 3) HOW TO CREATE THE NEEDLE ROTATION
EFFECT ???? animation??? somebody know how do the third party does???? thanks
Commented on 3.October 2010

mlm.mylpsindia.com LivePath SOftwares Pvt. Ltd.
mlm.mylpsind...
MLM : Multi Level Marketing Softwares : Live Path softwares pvt. ... Contact us at
info@mylpsindia.com or contact at +91- 9549533331,9649433331 for all contacts
Commented on 30.November 2010
Sofa (Open Source), A wrapper for previously mentioned AvalonDock (Open Source) in the docking
WPF Sofa
libraries category, http://sofawpf.codeplex.com
TEAM
Commented on 22.December 2010
FYI,I have used AM Chart component to display the large data in charts.Its having zooming features in
Ravi P
linecharts,bar charts.
Here are some other helpful Links:
Pascal Szorath
- Multimedia: http://directcanvas.codeplex.com/ (A hardware accelerated, 2D drawing API that
supports vector graphics, multimedia files, extensible pixel shaders, blending modes and more!)
- Misc: http://j832.com/bagotricks/ (A collection of libraries and demos for WPF, Silverlight, and
Windows Phone 7)
- Effects : http://blog.pixelingene.com/?p=12 (Transitioncontainer)
- Injection: http://ninject.org/ Injection Toolkit
- MVVM: http://sachabarber.net/?page_id=523 (Chinch)
- MVVM: http://www.galasoft.ch/mvvm/getstarted/ (MVVM Light Toolkit)
GOOD ONE
James
Die ESRI WPF/Silverlight controls kÃ¶nnte man noch als GIS-Controls aufnehmen.
Jay
http://help.arcgis.com/en/webapi/silverlight/index.html
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Query Screen Resolutions
Home
Interoperability
Query Screen Resolutions Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
WPF replacemenet for Screen.AllScreens()
Custom Controls
Many WPF applications want to check the available screen resolution to adjust window placements of sizes. In WinForms was a nice
Layout helper called Screen.AllScreens that returned a list of screens with their corresponding resolution. To use it from WPF you have
to reference System.Windows.Forms and System.Windows.Drawing which is not always what you want (because of
Input
application load time, dependencies, ambigue class names, etc.).
Data Binding
To get around this limitation I created a helper called Monitor which is a simple port of the Screen functionality from WinForms.
Styling

Localization public class Monitor
{
Interaction #region Dll imports

Resources
[DllImport("user32.dll", CharSet = CharSet.Auto)]
2D Graphics [ResourceExposure(ResourceScope.None)]
private static extern bool GetMonitorInfo
3D Graphics
(HandleRef hmonitor, [In, Out]MonitorInfoEx info);
Animation
[DllImport("user32.dll", ExactSpelling = true)]
Multimedia
[ResourceExposure(ResourceScope.None)]
Documents private static extern bool EnumDisplayMonitors
(HandleRef hdc, IntPtr rcClip, MonitorEnumProc lpfnEnum, IntPtr dwData);
Windows 7
private delegate bool MonitorEnumProc
Interoperability
(IntPtr monitor, IntPtr hdc, IntPtr lprcMonitor, IntPtr lParam);
Performance
[StructLayout(LayoutKind.Sequential)]
Expression Blend
private struct Rect
Tools {
public int left;
UI Automation
public int top;
public int right;
public int bottom;
}
ScreenResolutions.html[2/16/2014 2:29:47 PM]


[StructLayout(LayoutKind.Sequential, CharSet = CharSet.Auto, Pack = 4)]
private class MonitorInfoEx
{
internal int cbSize = Marshal.SizeOf(typeof(MonitorInfoEx));
internal Rect rcMonitor = new Rect();
internal Rect rcWork = new Rect();
internal int dwFlags = 0;
[MarshalAs(UnmanagedType.ByValArray, SizeConst = 32)]
internal char[] szDevice = new char[32];
}

private const int MonitorinfofPrimary = 0x00000001;

#endregion

public static HandleRef NullHandleRef = new HandleRef(null, IntPtr.Zero);

public System.Windows.Rect Bounds { get; private set; }
public System.Windows.Rect WorkingArea { get; private set; }
public string Name { get; private set; }

public bool IsPrimary { get; private set; }

private Monitor(IntPtr monitor, IntPtr hdc)
{
var info = new MonitorInfoEx();
GetMonitorInfo(new HandleRef(null, monitor), info);
Bounds = new System.Windows.Rect(
info.rcMonitor.left, info.rcMonitor.top,
info.rcMonitor.right - info.rcMonitor.left,
info.rcMonitor.bottom - info.rcMonitor.top);
WorkingArea = new System.Windows.Rect(
info.rcWork.left, info.rcWork.top,
info.rcWork.right - info.rcWork.left,
info.rcWork.bottom - info.rcWork.top);
IsPrimary = ((info.dwFlags & MonitorinfofPrimary) != 0);
Name = new string(info.szDevice).TrimEnd((char)0);
}

public static IEnumerable<Monitor> AllMonitors
{
get
{
var closure = new MonitorEnumCallback();
var proc = new MonitorEnumProc(closure.Callback);
EnumDisplayMonitors(NullHandleRef, IntPtr.Zero, proc, IntPtr.Zero);
return closure.Monitors.Cast<Monitor>();
}
}

private class MonitorEnumCallback
{
public ArrayList Monitors { get; private set; }


public MonitorEnumCallback()
{
Monitors = new ArrayList();
}

public bool Callback(IntPtr monitor, IntPtr hdc,
IntPtr lprcMonitor, IntPtr lparam)
{
Monitors.Add(new Monitor(monitor, hdc));
return true;
}
}
}

► Tutorial ► Dreamweaver CS4 ► WebPage Templates ► Web Design Books

Last modified: 2012-12-06 16:52:36

Show all comments

No comments for this article
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Books
Home
Getting started
Books Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Books about WPF
Custom Controls
Layout
Windows Presentation Foundation 4.5 Cookbook
Input
The book contains over 80 recipes to effectively and efficiently develop rich Windows client
Data Binding
applications on the Windows platform. It is full of illustrations, diagrams, and tips with clear step-
Styling 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.
Localization
Autor: Pavel Yosifovich
Interaction
ISBN: 978-1849686228
Resources Published: Sept 2012
2D Graphics Find it at Packt publishing
3D Graphics
Animation WPF 4 - Unleashed

Multimedia 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
Documents
samples of version 3 including new chapters about multitouch, XAML 2009, VSM, improved text
Windows 7 rendering, windows 7 shell integration and more.
Interoperability Autor: Adam Nathan
Performance
ISBN: 978-0672331190
Published: June 2010
Expression Blend
Find it at Amazon
Tools
UI Automation
WPF Control Development Unleashed
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
WPFBools.html[2/16/2014 2:30:02 PM]

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.
Autor: Pavan Podila, Kevin Hoffman

ISBN: 978-0672330339
Published: September 2009
Find it at Amazon
Windows Presentation Foundation - Unleashed (My favorite!)
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.
Autor: Adam Nathan

ISBN: 978-0672328916
Published: January 2007
Find it at Amazon
Application = Code + Markup
"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.
Autor: Charles Petzold

ISBN: 978-0735619579
Published: August 2006
Essential Windows Presentation Foundation
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.
Autor: Chris Anderson

ISBN: 978-0321374479
Published: April 2007
Foundations of WPF: An Introduction to Windows Presentation Foundation
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.
Autor: Laurence Moroney

ISBN: 978-1590597606
Published: November 2006
Pro WPF in C# 2008
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.
Autor: Matthew McDonald

ISBN: 978-1590599556
Published: Februar 2008
Foundations of WPF: An Introduction to Windows Presentation Foundation
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.
Autor: Chris Sells and Ian Griffiths

ISBN: 978-0596510374
Published: September 2007

Last modified: 2012-10-24 09:40:51

Show all comments
i like ur tutorials.pls provide and free pdf books

Muthu

i like ur tutorials.pls provide and free pdf books
Muthu
UjJEVY http://cgE8hcmk9Vvqlosr5wcBa6nk.com
melony
hi,
neo
can any one send above mentioned books links plzzz
Hi could any one send me the free ebooks which can be downloaded
sirisha Gundala
Hey sajan, varsha and sirisha..!! Download the books free of costs..!!
Mohanish
Can some one let me know, where i can found the freeversion of above books.. thanks
Praveen
Hi.. i need calculator program in c# .net wpf, with oops concepts.. i.e with class methods operator
arunkalis
overloading...pls help me and drop ur mail to: arunkalis@gmail.com
Hi everyone....
jehanzeb afridi
Nice article..
You can download many of those mentioned books from wwww.4shared.com
Regards
Jehanzeb afridi
Wow !!!
suvo
er.... all those people asking for free versions of the books. The authors didn't write them for free you
author
know!
Try in torrents..
Arka...
you are the best moser

sanjin...
This is Excellent.....
Abhishek

I want a link from which I can download a free book....
Good work. How about a -next page - so I don't have to keep going back to the menu to proceed
akalan
http://www.mediafire.com/?vyjzln0mnjj (Windows.Presentation.Foundation.Unleashed)
BAd
wow,thx Bad :)
Not Bad
really !Very nice tutorial

Sudhakar
good material thanks <a href=" http://gs124.photobucket.com/groups/p2/PLJLLS8GT2

Ldeenpgk
">loli bbs board
</a> =-PPP
you can download from google. just type the title of book and &pdf in keyword search
whiteTry
Do you know some books for C# or VB .NET ... but I mean good books like WPF 4 - Unleashed? And
Faith
what about ASP .NET? The internet is full of them but I want something really good and updated :D
I want to know more in depth about WPF like how itemscontrol,datatemplet,trigger,Icommand,routed

John
event work in WPF...any book or blog,video,,please suggest
Pls send me everything for free. I hope to develop software and sell it to get rich. Sure hope nobody
GiveMeAllImLaZ
downloads my software 4 free!
hhgh
hg
I started with Wrox, it is not really good no really action. Like the tutorial all ready :)
bole
Name
E-Mail (optional)
Comment

Post Comment

WPF Tutorial | Undo/Redo
Home
Patterns
Undo/Redo Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to implement undo/redo using MVVM
Custom Controls
Layout
Introduction
Input 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
Data Binding
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
Styling was wrong. Today undo/redo has gotten almost standard for any modern data editing application.
Localization
Interaction
Resources
2D Graphics
3D Graphics The MVVM-Pattern

Animation
Because of the strong databinding functionality in WPF, most applications are using the popular MVVM (Model-View-ViewModel)
Multimedia 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
Documents
INotifyPropertyChanged interface.
Windows 7
A concept of implementing undo/redo
Interoperability
Performance 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
Expression Blend 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.
Tools
Scenario 1: Executing an action
UI Automation
UndoRedo.html[2/16/2014 2:30:40 PM]

Scenario 2: Undoing an action
Adoption for WPF
We start with a base class that implements the INotifyPropertyChanged interface and provides a private method
Notify(string propertyName).

public class NotifyableObject : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;


protected void Notify(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}

Then we build the base class TrackableObject where all model objects or view models that are directly bound to the view should
inherit from.

public class TrackableObject : NotifyableObject
{
private readonly List<ITrackable> _trackableItems = new List<ITrackable>();

public bool HasChanges
{
get { return _trackableItems.Any(i => i.HasChanges); }
}

public IModificationTracker ModificationTracker { get; set; }

protected TrackableValue<T> RegisterTrackableValue<T>(string propertyName,
T defaultValue = default(T))
{
var property = new TrackableValue<T>(propertyName, Modify, Notify,
defaultValue);
_trackableItems.Add(property);
return property;
}

protected TrackableCollection<T> RegisterTrackableCollection<T>()
{
var collection = new TrackableCollection<T>(Modify);
_trackableItems.Add(collection);
return collection;
}

private void Modify(Action doAction, Action undoAction, Action notification)
{
var modification = new Modification(doAction, undoAction, notification);
modification.Execute();
ModificationTracker.TrackModification(modification);
}
}

To simplify the generation of modifactions when changing a property value, we build a generic wrapper for each property called
TrackableValue.

public class TrackableValue<T> : ITrackable
{
private readonly string _propertyName;

private readonly Action<Action, Action, Action> _modifyCallback;
private readonly Action<string> _notifyAction;
private T _value;

public TrackableValue(string propertyName,
Action<Action, Action, Action> modifyCallback,
Action<string> notifyAction, T defaultValue)
{
_propertyName = propertyName;
_modifyCallback = modifyCallback;
_notifyAction = notifyAction;
_value = defaultValue;
}

{
get { return _originalValue.Equals(_value); }
}

public T Value
{
get { return _value; }
set
{
var oldValue = _value;
_modifyCallback(() => _value = value,
() => _value = oldValue,
() => _notifyAction(_propertyName));
}
}
}

To same thing we need to do for collections to track add/remove of items from a collection

public class TrackableCollection<T> : IList<T>, ITrackable
{
private readonly Action<Action, Action, Action> _modifyCallback;
private readonly List<T> _list = new List<T>();
private readonly List<T> _originalList = new List<T>();

public TrackableCollection(Action<Action, Action, Action> modifyCallback)
{
_modifyCallback = modifyCallback;
}

public event EventHandler<EventArgs<T>> ItemAdded;
public event EventHandler<EventArgs<T>> ItemRemoved;
public event EventHandler CollectionChanged;

{
get
{
if( _list.Count == _originalList.Count)

{
return _list.Where((item, index) =>
!item.Equals(_originalList[index])).Any();
}
return true;
}
}

public void AcceptChanges()
{
_originalList.Clear();
_originalList.AddRange(_list);
}

public IEnumerator<T> GetEnumerator()
{
return _list.GetEnumerator();
}

IEnumerator IEnumerable.GetEnumerator()
{
return GetEnumerator();
}

public void Add(T item)
{
_modifyCallback(() =>
{
_list.Add(item);
ItemAdded.Notify(this, new EventArgs<T>(item));
},
() =>
{
_list.Remove(item);
ItemRemoved.Notify(this, new EventArgs<T>(item));
},
OnCollectionModified);
}

public void Clear()
{
var items = new T[_list.Count];
_list.CopyTo(items);
{
_list.ForEach(i => ItemRemoved.Notify(this, new EventArgs<T>(i)));
_list.Clear();
},
() =>
{
_list.AddRange(items);
_list.ForEach(i => ItemAdded.Notify(this, new EventArgs<T>(i)));
},
}

public bool Contains(T item)

{
return _list.Contains(item);
}

public void CopyTo(T[] array, int arrayIndex)
{
_list.CopyTo(array, arrayIndex);
}

public bool Remove(T item)
{
var result = _list.Contains(item);
{
_list.Remove(item);
},
() =>
{
_list.Add(item);
},
return result;
}

public int Count
{
get { return _list.Count; }
}

public bool IsReadOnly
{
get { return false; }
}

public int IndexOf(T item)
{
return _list.IndexOf(item);
}

public void Insert(int index, T item)
{
{
_list.Insert(index, item);
},
() =>
{
_list.Remove(item);
},

}

public void RemoveAt(int index)
{
var item = _list[index];
{
_list.Remove(item);
},
() =>
{
_list.Insert(index, item);
},
}

public T this[int index]
{
get { return _list[index]; }
set
{
var oldItem = _list[index];
{
_list[index] = value;
ItemAdded.Notify(this, new EventArgs<T>(value));
},
() =>
{
_list[index] = oldItem;
ItemRemoved.Notify(this, new EventArgs<T>(oldItem));
},
}
}

private void OnCollectionModified()
{
CollectionChanged.Notify(this, EventArgs.Empty);
}
}


Last modified: 2011-12-23 09:14:09


Show all comments

Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Getting started
Home
Getting started Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Getting Started
Custom Controls
Welcome to the world of Windows Presentation Foundation. I'm sure you will be amazed by the possibilities of creating stunning user
Layout interfaces with a minimal effort. In these chapter you will gather the basic knowledge and setup your enviroment to immediately start
developing WPF applications.
Input
Data Binding
Next Steps
Styling
Localization Introduction to WPF

Development Tools
Interaction
Books
Resources
Create a simple WPF application
2D Graphics Instruction Videos
3D Graphics
Animation
Multimedia

Documents
Last modified: 2009-05-19 01:31:37
Windows 7 Copyright (c) by Christian Moser, 2011.
Interoperability
Performance
Expression Blend
Tools
UI Automation
GettingStarted.html[2/16/2014 2:30:56 PM]

WPF Tutorial | Fundamentals
Home
Fundamentals Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
WPF Fundamentals
Custom Controls
WPF has some important new concepts that are beyond of what most .NET developers know from WinForms. But its very useful to
Layout understand these concepts before you start developing WPF applications.
Input
What's new in XAML in .NET 4.0
Data Binding XAML
Dependency Properties
Styling
Routed Events
Localization
Logical- and Visual Tree
Interaction Hard- and Softwarerequirements
WPF Troubleshooting
Resources
2D Graphics
3D Graphics

Animation
Last modified: 2009-05-19 01:31:13
Multimedia
Documents
Windows 7
Interoperability
Show all comments
Performance
Expression Blend Commented on 12.September 2011
Tools prashant what is WPF? could be explain me briefly ???
Kumar
UI Automation
Name
E-Mail (optional)
WPFFundamentals.html[2/16/2014 2:31:41 PM]

WPF Tutorial | Fundamentals
Comment
Post Comment
WPFFundamentals.html[2/16/2014 2:31:41 PM]

WPF Tutorial | User Experience
Home
User Experience Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Designing the User Experience
Custom Controls
UX Design Process
Layout
Input
Data Binding

Styling
Last modified: 2009-11-01 11:41:09
Localization Copyright (c) by Christian Moser, 2011.
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents
Windows 7
Interoperability
Performance
Expression Blend
Tools
UI Automation
UX.html[2/16/2014 2:31:56 PM]

WPF Tutorial | Patterns
Home
Patterns Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Patterns to design a good WPF architecture
Custom Controls
Model-View-ViewModel Pattern
Layout
Dependency Injection
Input Undo/Redo
Data Binding DelegateCommand
Styling
Localization ► Tutorial ► Learn Quick Books ► Basics ► Coding Learning

Interaction
Last modified: 2010-02-10 10:33:22
Resources
2D Graphics
3D Graphics
Animation
Show all comments
Multimedia
Documents
Windows 7 Name
Interoperability E-Mail (optional)
Performance
Comment
Expression Blend
Tools Post Comment
UI Automation
ArchitecturePattern.html[2/16/2014 2:32:10 PM]

WPF Tutorial | Controls
Home
Controls Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Built-in Controls of WPF
Custom Controls
The WPF framework provides a rich set of built-in controls. The controls can be devided in the following categories.
Layout
List of 3rd-Party Controls
Input
DataGrid
Data Binding Calendar
Styling ItemsControl
LivePreview ComboBox
Localization
Dialogs
Interaction Slider
Resources Popup
RadioButton
2D Graphics
ToolTips
3D Graphics TextBox
Animation Menus
Expander
Multimedia
PasswordBox
Documents
ContextMenu
Windows 7 ListBox
ListView
Interoperability
TextBlock
Performance
Window
Expression Blend
Tools ► Tutorial ► C Sharp Tutorial ► ASP Net Tutorial ► Tutorial VB 2005
UI Automation
Last modified: 2008-10-18 01:05:14

Controls.html[2/16/2014 2:32:45 PM]

Show all comments
can you make a mailing list, so everyone can subscribe and get a message in our mail evry time you
anonimo
public a new article?
Yeah, I agree with anonimo.
Farooq
Azam
Would love to subscribe to this site.
Yeah, i too agree with anonimo..it will helpfull

sathya
Yeah,I also agree with this idea

AlexG
Subscribe to the RSS feed. Mailing lists are old school.

Valamas
How to use combobox control in WPF?

Siju
great site. been here for two weeks. thank you for the wonderful tutorial!
UandI
Nice Website.
vinay
and i want to learn WPF and WCF Plz help me.
kasera
feeling good to learn this .... :)

sachin
Very Nice!. Why he never answer questions???

dch
Name
E-Mail (optional)
Comment

Post Comment

WPF Tutorial | Custom Controls
Home
Custom Controls Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Custom Controls
Custom Controls
UserControls vs. CustomControls
Layout
How to Create a Custom Control
Input
Data Binding
Styling
Localization
Last modified: 2009-06-16 02:05:43
Interaction Copyright (c) by Christian Moser, 2011.
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents
Windows 7
Interoperability
Performance
Expression Blend
Tools
UI Automation
CustomControls.html[2/16/2014 2:33:10 PM]

WPF Tutorial | Layout
Home
Layout Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Layout
Custom Controls
Introduction to WPF Layout
Layout
StackPanel
Input Grid Panel
Data Binding Dock Panel
Canvas Panel
Styling
Wrap Panel
Localization ViewBox
Interaction Create a Custom Layout Panel
Resources
2D Graphics ► Tutorial ► Adobe InDesign ► InDesign CS3 ► Photoshop CS4

3D Graphics
Last modified: 2008-10-18 01:05:14

Animation
Multimedia
Documents
Windows 7
Interoperability
Performance
Expression Blend
Tools
UI Automation
Layout.html[2/16/2014 2:33:46 PM]

WPF Tutorial | Input
Home
Input Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Input
Custom Controls
Keyboard
Layout
RoutedCommands in a ContextMenu
Input Mouse
Data Binding Mutli Touch
Styling
Localization

Interaction
Last modified: 2009-05-19 01:32:02
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents
Windows 7
Interoperability
Performance
Expression Blend
Tools
UI Automation
Input.html[2/16/2014 2:34:15 PM]

WPF Tutorial | Data Binding
Home
Data Binding Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Data Binding
Custom Controls
Data Binding Overview
Layout
Debug DataBinding Issues
Input Data Validation
Data Binding Value Converters
Data Viewing, Sorting and Filtering
Styling
Popular Data Binding Expressions
Localization How to Bind EnumValues
Interaction Elegant way for INotifyPropertyChanged
Resources
2D Graphics

3D Graphics
Last modified: 2008-10-18 01:07:42

Animation
Multimedia
Documents
Windows 7
Show all comments
Interoperability
Performance Commented on 28.September 2010
Hi. what about data binding whne you want a particular column in the grid to be able to accept drops from a
Expression Blend PVA
treeview? I mean I want to drag a node from RadTreeView into a column of a RadGridView? Is that possible?
Tools If yes then what do I bind the column to? If not bind then which event handlers should I be using in the code
behind to make the column accept the string data from the treenode? And if this is not possible then should I
UI Automation
be using a DataGrid instead of a RadGridView?? Any reply/help/ would be appreciated.
Name
Databinding.html[2/16/2014 2:34:59 PM]

WPF Tutorial | Data Binding
E-Mail (optional)
Comment
Post Comment
Databinding.html[2/16/2014 2:34:59 PM]

WPF Tutorial | Styling
Home
Styling Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Templates and Styles
Custom Controls
One of WPF's most powerful feature is the ability to completely replace the look and feel of user interface elements.
Layout
Input
Styles
Data Binding
The concept of styles let you remove all properties values from the individual user interface elements and combine them into a style.
Styling
A style consists of a list of property setters. If you apply a style it sets the properties on the user interface element to the styles'
Localization values. The idea is quite similar to Cascading Styles Sheets (CSS) in web development.

Using styles gives you the following advantages:
Interaction
Removes redundancy from your code
Resources
Let you change the appearance of a set of controls from a single point
2D Graphics Gives you the possibility to swap the style at runtime
3D Graphics Learn more about Styles
Animation
Multimedia Templates
Documents An element like a button consists of multpiple composed parts: A border, a chrome and a content presenter. With styles you can only
change the appearance from "outside" by setting public properties. With a template you can replace parts inside a user interface
Windows 7
element..
Interoperability
Using templates gives you the following advantages:
Performance Change the parts inside a user interface element

Reduce the numbers custom controls
Expression Blend
Tools Learn more about Templates
UI Automation ► Tutorial ► Adobe InDesign ► InDesign CS3 ► InDesign Template

Last modified: 2011-05-03 10:40:49

TemplatesStyles.html[2/16/2014 2:35:14 PM]

WPF Tutorial | Styling
Show all comments
Very clear article, as is the case for all those I've happened upon on the site so far. I was real interested in
Andre
getting more information about templates though, but it turns out the link is broken...
(http://www.wpftutorial.net/Templates.html)
Hi very interesting stuff on your site would be great to have a download attached to some of the articles that
elhuus
might need it.
I believe WPF styles and themes could have been better with a simpler syntax (a CSS like syntax) than with the
xml format just as they did for binding syntax.
thanks for the great help and articles you provide
wpf
andre
Name
E-Mail (optional)
Comment
Post Comment
TemplatesStyles.html[2/16/2014 2:35:14 PM]

WPF Tutorial | Localization
Home
Localization Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Localization in WPF
Custom Controls
Evaluate a localization mechanism
Layout
Localization using a MarkupExtension
Input
Data Binding
Styling
Localization
Last modified: 2010-02-23 00:17:46
Resources
2D Graphics Comments on this article
3D Graphics
Show all comments
Animation
Multimedia
Thanx, great article
A
Documents
Windows 7 Name
Interoperability E-Mail (optional)
Performance Comment
Expression Blend
Tools
Post Comment
UI Automation
Localisation.html[2/16/2014 2:35:50 PM]

WPF Tutorial | Interaction
Home
Interaction Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Interactions
Custom Controls
Drag & Drop
Layout
Behaviors
Input
Data Binding
Styling
Localization
Last modified: 2009-10-13 09:42:58
Resources
3D Graphics
Show all comments
Animation No comments for this article
Multimedia
Name
Documents
E-Mail (optional)
Windows 7
Comment
Interoperability
Performance
Post Comment
Expression Blend
Tools
UI Automation
Interactions.html[2/16/2014 2:36:19 PM]

WPF Tutorial | Resources
Home
Resources Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Resources
Custom Controls
Layout
Articles about WPF Resources
Input
MergedDictionaries
Data Binding
Read WPF resources from WinForms
Styling Set DynamicResource from Code
Localization Loading BAML
Interaction
Resources

2D Graphics
Last modified: 2008-10-18 01:08:42
3D Graphics
Animation
Multimedia
Documents
Show all comments
Windows 7
Interoperability
Performance Name
Expression Blend E-Mail (optional)
Comment
Tools
UI Automation
Post Comment
Resources.html[2/16/2014 2:36:53 PM]

WPF Tutorial | Resources
Resources.html[2/16/2014 2:36:53 PM]

WPF Tutorial | 2D Graphics
Home
2D Graphics Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
2D Graphics
Custom Controls
Draw excactly on physical device pixels
Layout
Geometry Transformer
Input Images
Data Binding How to get a Bitmap from a Visual
DrawRoundedRectangle
Styling
Localization
Interaction

Resources
Last modified: 2009-05-19 01:32:33
2D Graphics Copyright (c) by Christian Moser, 2011.
3D Graphics
Animation
Multimedia
Show all comments
Documents
Windows 7
hi
Interoperability jatin
Performance Commented on 19.August 2011
Expression Blend Nice Web site

hi
Tools
UI Automation Name
E-Mail (optional)
Comment
Graphics2D.html[2/16/2014 2:37:17 PM]

Post Comment

Home
3D Graphics Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
3D Graphics
Custom Controls
Introduction to WPF 3D
Layout
Input
► 3D Graphics ► Blender Tutorial ► Drawing Tutorial ► 3D Rendering
Data Binding

Styling
Last modified: 2009-07-04 16:20:50
Interaction
Resources
2D Graphics
Show all comments
3D Graphics
Animation
I hope you continue the article..
Multimedia Lentucky
Documents Commented on 9.June 2009
Windows 7 plz continue
abbasek23
Interoperability
Performance
este es uno de mis mas grandes intereses de WPF. estare revisandolo continuamente esperando la
anonimo
Expression Blend informacion.
Tools
this is one of my biggest interests WPF. i will be reviewing the article for the information.
UI Automation
Still waiting for 3D graphics article.....

Deep232

Is there any possiblity to develop Very Much Heavy CAD application with help of Directx and WPF but
olive
not opengl.
Deep232, i think that there are better ways to say(write) that.

anonimo
Hi Olive,
Christian
WPF allows you to seamlessly integrate 3D content into your application. It's all managed and easy to
Moser
use, but when it comes to high performance requirements, it's not the way to go. Since .NET 3.5 SP1,
Microsoft provides a D3DImage object, that allows direct interop with unmanaged DirectX.
I hope this helps.
Greetings
Christian
como hacer un comobox en wpf

Pedro
combobox en wpf
pedro
Rich Text Box in WPF

Rich Text...
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Animation
Home
Animation Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Animations in WPF
Custom Controls
Debugging Animations
Layout
Adjust the Frame Rate
Input
Data Binding
► Tutorial ► 3D Max Tutorials ► 3D Animation ► Flash Animation
Styling
Localization
Last modified: 2009-05-19 01:32:48
Resources
3D Graphics
Show all comments
Animation
Multimedia
it`s looking awesome
chinni
Documents
Windows 7 Commented on 5.August 2011
can i add flash in wpf.net

Interoperability rekha
Performance
Name
Expression Blend
E-Mail (optional)
Tools
Comment
UI Automation
Post Comment
Animation.html[2/16/2014 2:38:19 PM]

WPF Tutorial | Animation
Animation.html[2/16/2014 2:38:19 PM]

WPF Tutorial | Multimedia
Home
Multimedia Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Multimedia in WPF
Custom Controls
This article is not yet finished...
Layout
Input
Data Binding

Styling
Last modified: 2008-10-18 01:10:37
Localization
Interaction
Resources
2D Graphics
Show all comments
3D Graphics

Animation
I am creating a multimedia application and need to know about how to stream video.
Multimedia jk
Documents thanks
Windows 7
Interoperability
We are interest in multimedia application with WPF.
Peter
Performance
Expression Blend Commented on 22.May 2009
Tools
Is it possible to capture real-time Firewire stream with it? How ?
Rychard
UI Automation
I'm interested in video streaming as well.

ZC
Multimedia.html[2/16/2014 2:38:55 PM]

WPF Tutorial | Multimedia
We are interest in multimedia application with WPF.

gaurang
bell we are interested in multimedia application with wpf.

chell
I desperately need the solution to play flash files (.flv) in WPF

vikas
need to know multimedia application

namit
Name
E-Mail (optional)
Comment
Post Comment
Multimedia.html[2/16/2014 2:38:55 PM]

WPF Tutorial | Documents
Home
Documents Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Documents
Custom Controls
Inline Images in a FlowDocument
Layout
FlowDocuments
Input
Data Binding
Styling
Localization
Last modified: 2010-07-14 16:50:08
Resources
3D Graphics
Show all comments
Animation No comments for this article
Multimedia
Name
Documents
E-Mail (optional)
Windows 7
Comment
Interoperability
Performance
Post Comment
Expression Blend
Tools
UI Automation
Documents.html[2/16/2014 2:39:10 PM]

WPF Tutorial | Windows 7
Home
Windows 7 Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Using the Vista API
Custom Controls
Task Dialog
Layout
Glass Windows
Input Jumplists
Data Binding
Styling

Localization
Interaction Last modified: 2009-11-01 11:04:22

Resources
2D Graphics

3D Graphics
Animation Show all comments

Multimedia
Documents
Name
Windows 7 E-Mail (optional)
Interoperability Comment
Performance
Expression Blend
Post Comment
Tools
UI Automation
VistaAPI.html[2/16/2014 2:39:50 PM]

WPF Tutorial | Interoperability
Home
Interoperability Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to get the Handle of a WPF Window
Custom Controls

Layout
IntPtr windowHandle = new WindowInteropHelper(
Input Application.Current.MainWindow).Handle;

Data Binding
Styling
How to manually set the rendering mode to software
Localization

Interaction var source = PresentationSource.FromVisual(this);
var hwndTarget = source.CompositionTarget as HwndTarget;
Resources
if (hwndTarget != null)
2D Graphics {
hwndTarget.RenderMode = RenderMode.SoftwareOnly;
3D Graphics }

Animation

Multimedia
Documents ► Tutorial ► Learn Quick Books ► Coding Learning ► Basics

Windows 7
Interoperability Last modified: 2010-07-06 16:40:47

Performance
Expression Blend

Tools
UI Automation Show all comments
Can you provide more details on interoperability. Like how to use OCX files, Active X DLL created in
Veerendra...
VC++ in WPF applications.
Interoperability.html[2/16/2014 2:40:04 PM]

WPF Tutorial | Interoperability
Name
E-Mail (optional)
Comment
Post Comment
Interoperability.html[2/16/2014 2:40:04 PM]

WPF Tutorial | Performance
Home
Performance Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
WPF Performance Optimization
Custom Controls
Top 11 WPF Performance Tips
Layout
Input
Data Binding

Styling
Last modified: 2010-05-10 22:24:44
Interaction
Resources
2D Graphics
Show all comments
3D Graphics
Animation
I like the suggestions. However, there are a few spelling mistakes.
Multimedia Sean
Thanks.
Documents
Windows 7
Interoperability Nice tips. It would be helpful if you mentioned some tips regarding the use of Visuals instead of
Theo
Performance
controls/elements higher in the hierarchy.
Zographos
Expression Blend
Tools
What about migrating our client applications developed on C#, using System.Data.SqlClient accessing
Ariel
UI Automation ot Sql Server 2005 databases? Shall we start now?
I don't understand what you mean by "cached resource dictionaries" can you please provide a small
Performance.html[2/16/2014 2:40:41 PM]

Daniel
example?
faraya hot lebanon lebanese klynn k-lynn fashion show model lingerie snow mzar
y78dha7
<IMG>http://jerry-fisher.co.cc/93.jpg</IMG>
blyadieos
http://piska.chez.com/pelvimetry-civi.html Ð£Ñ�ÐµÐ±Ð½Ñ�Ðµ Ñ�Ð¸Ð»Ñ�Ð¼Ñ�: Ð¼Ð°Ñ�Ñ�Ð
°Ð¶ Ð³ÐµÐ¹Ñ�Ð¸ + Ð¾Ð±Ð½Ð°Ð¶ÐµÐ½Ð½Ñ�Ð¹ Ð¼Ð°Ñ�Ñ�Ð°Ð¶ (DVDRip)
http://piska.chez.com/misunderstand-a.html
http://blyadi.atspace.com/echoplex-apenda.html
http://piska.chez.com/india-methodica.html
http://piska.chez.com/shallowness-ant.html
http://piska.chez.com/scirrhous-prodi.html
http://blyadi.atspace.com/avulsive-antimo.html
http://piska.chez.com/pimaricin-ssts-.html
http://piska.chez.com/mainframe-apts-.html Ð�Ð¾Ñ�Ð½Ð¾ Ñ�Ð¾Ð»Ð¸Ðº Pretty Russian Teen
gets raped (DVDRip)
http://blyadi.atspace.com/chloe-hammock-e.html
http://blyadi.atspace.com/behemoth-trichl.html
http://piska.chez.com/sanitorium-pylo.html
http://piska.chez.com/tautologically-.html
http://piska.chez.com/attendees-sisyp.html
http://piska.chez.com/subregistrar-sk.html
http://piska.chez.com/disappointment-.html Ð�Ð¾Ð»Ð¾Ð´Ð°Ñ� Ð�ÐµÐ²ÐºÐ° Ð�Ñ�Ñ�Ð
°Ñ�Ñ�Ð²Ð°ÐµÑ� Ð£ Ð�Ð°Ñ�Ð½Ñ� (DVDRip)
http://blyadi.atspace.com/portraitist-taf.html
http://blyadi.atspace.com/droplet-multi-a.html
http://piska.chez.com/ventral-counter.html
http://piska.chez.com/integrability-t.html
http://blyadi.atspace.com/towpath-raving-.html
http://blyadi.atspace.com/spawns-aggravat.html
http://blyadi.atspace.com/treasurer-quitc.html
http://blyadi.atspace.com/tetracaine-soci.html Ð�Ð¾Ñ�Ð½Ð¾ Ð¾Ñ�Ð³Ð¸Ð¸ Euro Sex Party 2(2007)
<Orgy> (DVDRip)
http://blyadi.atspace.com/bbs-unforgettab.html
http://blyadi.atspace.com/egret-fair-buck.html
http://piska.chez.com/vagal-subpenas-.html
http://blyadi.atspace.com/stupifying-vibr.html
http://blyadi.atspace.com/obstetrician-da.html
http://blyadi.atspace.com/scrammed-machin.html
http://blyadi.atspace.com/easing-wanderer.html
http://piska.chez.com/unrestricted-ge.html Ð�Ð¾Ñ�Ð½Ð¾ Ñ� Ð°ÐºÑ�Ð¾Ð±Ð°Ñ�ÐºÐ¾Ð¹
North Pole 65 (2006)<All Sex> (DVDRip)
http://blyadi.atspace.com/participated-pa.html
http://piska.chez.com/fileid-rejoice-.html
http://piska.chez.com/slattern-rope-a.html
http://blyadi.atspace.com/macsyma-turrete.html
http://piska.chez.com/settee-one-card.html
http://piska.chez.com/index.html
http://blyadi.atspace.com/seemingness-cou.html
http://blyadi.atspace.com/index.html
http://blyadi.atspace.com/symposiums-usin.html
http://blyadi.atspace.com/numerous-suffer.html

http://piska.chez.com/keeper-rejoice-.html Ð�ÐµÐ²Ñ�Ñ�ÐºÐ¸ Ñ� Ð¾Ð±Ð»Ð¾Ð¶ÐµÐº
Ð¶Ñ�Ñ�Ð½Ð°Ð»Ð° Ð�Ð°ÐºÑ�Ð¸Ð¼! (DVDRip)
http://blyadi.atspace.com/kmh-pervade-app.html
http://blyadi.atspace.com/transmissible-s.html
http://piska.chez.com/protraction-dis.html
http://blyadi.atspace.com/coinstantaneous.html
http://blyadi.atspace.com/skidding-taggin.html
http://piska.chez.com/journalist-wiza.html
http://piska.chez.com/regia-plantatio.html
http://blyadi.atspace.com/cobra-flagellat.html
http://piska.chez.com/antitheses-suff.html Ð�Ð¹ Ð½Ñ�Ð°Ð²Ð¸Ñ�Ñ�Ñ� ÐºÐ¾Ð³Ð´Ð° ÐµÑ�
Ñ�Ñ�Ð°Ñ�Ð°Ñ�Ñ� (DVDRip)
http://blyadi.atspace.com/puncher-uranus-.html
http://blyadi.atspace.com/forestry-disres.html
http://piska.chez.com/muck-baboon-dem.html
http://piska.chez.com/inadequacy-prov.html
http://piska.chez.com/squirting-serge.html
http://blyadi.atspace.com/staple-sons-cha.html
http://blyadi.atspace.com/slater-filename.html
http://blyadi.atspace.com/unasserted-tumb.html
http://piska.chez.com/judicial-bleak-.html
http://piska.chez.com/derision-misspe.html
http://piska.chez.com/prescience-life.html
http://piska.chez.com/council-classic.html Ð�Ð¾Ñ�Ð½Ð¾ Ñ�Ð¾Ð»Ð¸Ðº Chloey Morgan and Jenna
Presley (DVDRip)
http://piska.chez.com/full-materialis.html
http://piska.chez.com/court-abstentio.html
http://blyadi.atspace.com/kaliningrad-sky.html
http://piska.chez.com/nonmultiplexed-.html
http://piska.chez.com/monoid-middle-s.html
http://blyadi.atspace.com/spinning-quonda.html
http://blyadi.atspace.com/mileage-inconve.html
http://blyadi.atspace.com/acanthaceous-de.html
http://piska.chez.com/misunderstood-t.html
http://blyadi.atspace.com/yachtsman-tolme.html
<a href="http://piska.chez.com/inadequacy-prov.html">link-8386-piska.chez.com</a>
<a href="http://piska.chez.com/index.html">link-9072-piska.chez.com</a>
<a href="http://piska.chez.com/india-methodica.html">link-7097-piska.chez.com</a>
<a href=http://piska.chez.com/integrability-t.html>link-141-piska.chez.com</a>
<a href=http://piska.chez.com/index.html>link-7786-piska.chez.com</a>
<a href=http://piska.chez.com/journalist-wiza.html>link-1026-piska.chez.com</a>
<a href=http://blyadi.atspace.com/index.html>link-6725-blyadi.atspace.com</a>
<a href=http://blyadi.atspace.com/forestry-disres.html>link-843-blyadi.atspace.com</a>
<a href=http://blyadi.atspace.com/kaliningrad-sky.html>link-9731-blyadi.atspace.com</a>
<a href="http://blyadi.atspace.com/echoplex-apenda.html">link-8549-blyadi.atspace.com</a>
<a href="http://blyadi.atspace.com/droplet-multi-a.html">link-3422-blyadi.atspace.com</a>
<a href="http://blyadi.atspace.com/index.html">link-6892-blyadi.atspace.com</a>
Name
E-Mail (optional)
Comment

Post Comment

WPF Tutorial | Expression Blend
Home
Expression Blend Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Expression Blend
Custom Controls
Addins
Layout
How to Import Photoshop Files
Input Prototyping with SketchFlow
Data Binding
Styling

Localization
Interaction Last modified: 2009-11-03 23:48:02

Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents
Windows 7
Interoperability
Performance
Expression Blend
Tools
UI Automation
ExpressionBlend.html[2/16/2014 2:41:03 PM]

WPF Tutorial | Tools
Home
Tools Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
WPF Tools
Custom Controls
The following tools help you to ease the work with WPF.
Layout
XAML Converters
Input
Graphical Designers
Data Binding Utilities
Styling XAML Editors
Localization
Interaction

Resources
Last modified: 2009-11-03 23:48:17
2D Graphics
3D Graphics
Animation
Multimedia
Show all comments
Documents
Windows 7 Commented on 26.February 2010
good
Interoperability P
Performance
Name
Expression Blend
E-Mail (optional)
Tools
Comment
UI Automation
Post Comment
ToolsAndHelpers.html[2/16/2014 2:41:48 PM]

WPF Tutorial | Tools
ToolsAndHelpers.html[2/16/2014 2:41:48 PM]

WPF Tutorial | UI Automation
Home
UI Automation Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
UI Automation with WPF
Custom Controls
Layout
How to make TextBlock within a DataTemplate visible to UI Automation
Input
WPF intentionally hides TextBlocks that are inside a DataTemplate to improve performance. To make them visible, you have to replace
Data Binding them by a Label which can be a performance hit, or you make a special UiAutomationTextBlock that overrides this behavior:
Styling
public class UiAutomationTextBlock : TextBlock
Localization
{
Interaction protected override AutomationPeer OnCreateAutomationPeer()
{
Resources return new ModifiedTextBlockAutomationPeer(this);
2D Graphics
}

3D Graphics private class ModifiedTextBlockAutomationPeer : TextBlockAutomationPeer
{
Animation
public ModifiedTextBlockAutomationPeer(TextBlock textBlock)
Multimedia : base(textBlock)
{ }
Documents

Windows 7 protected override bool IsControlElementCore()
{
Interoperability return true;
Performance
}
}
Expression Blend }

Tools

The Idea for that solution was found here
UI Automation

UIAutomation.html[2/16/2014 2:42:03 PM]

Last modified: 2011-02-25 15:17:04

Show all comments
dadasdasddasd
shaikjsdkalsd
Great Work !!!
DSP
Boringgg!!!!
Sush
It'S Working..An very usefull

Shankar
I am trying to perform automation testing on my app which contains ribbon control.The ribbon buttons
venkatesh
inside the ribbon control not getting detected.so i tried to implement Automationpeer for that control
by the knowldge gained through this blog.But after implementing the automationpeer when i add the
control to my app the controls are not getting displayed.Kindly help on this regard.please find the code
below
public class UiAutomationRibbonButton : RibbonButton
static UiAutomationRibbonButton()
DefaultStyleKeyProperty.OverrideMetadata(typeof(UiAutomationRibbonButton), new
FrameworkPropertyMetadata(typeof(UiAutomationRibbonButton)));
protected override AutomationPeer OnCreateAutomationPeer()
return new UiAutomationRibbonButtonAutomationPeer(this);
public class UiAutomationRibbonButtonAutomationPeer : RibbonButtonAutomationPeer

,IInvokeProvider
public UiAutomationRibbonButtonAutomationPeer(RibbonButton ribbonButton)
: base(ribbonButton)
{ }
protected override bool IsControlElementCore()
return true;

}
protected override string GetClassNameCore()
return "RibbonButton";
protected override string GetLocalizedControlTypeCore()
return "ribbonButton";
protected override AutomationControlType GetAutomationControlTypeCore()
return AutomationControlType.Button;
public override object GetPattern( PatternInterface patternInterface )
if( patternInterface == PatternInterface.Invoke )
return this;
return base.GetPattern( patternInterface );
private UiAutomationRibbonButton MyOwner
get
return (UiAutomationRibbonButton)base.Owner;
#region IInvokeProvider Members
public void Invoke()
RoutedEventArgs newEventArgs = new RoutedEventArgs(UiAutomationRibbonButton.ClickEvent);
MyOwner.RaiseEvent( newEventArgs );
}
#endregion
void IInvokeProvider.Invoke()
throw new NotImplementedException();
XAML Code :
<Window x:Class="WpfRibbonControl.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ribbon="clr-

namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
xmlns:UIRibbon ="clr-
namespace:WpfCustomControlLibrary1;assembly=WpfCustomControlLibrary1"
Title="MainWindow" Height="350" Width="525">
<Grid x:Name="LayoutRoot">
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<ribbon:Ribbon x:Name="Ribbon">
<ribbon:Ribbon.ApplicationMenu>
<ribbon:RibbonApplicationMenu SmallImageSource="Images\SmallIcon.png">
<ribbon:RibbonApplicationMenuItem Header="Hello _Ribbon"
x:Name="MenuItem1"
ImageSource="Images\LargeIcon.png"/>
</ribbon:RibbonApplicationMenu>
</ribbon:Ribbon.ApplicationMenu>
<ribbon:RibbonTab x:Name="HomeTab"
Header="Home">
<ribbon:RibbonGroup x:Name="Group1"
Header="Group1">
<UIRibbon:UiAutomationRibbonButton x:Name="Button1"
LargeImageSource="Images\LargeIcon.png"
Label="Button1" Click="Button1_Click" />
SmallImageSource="Images\SmallIcon.png"
</ribbon:RibbonGroup>
</ribbon:RibbonTab>
</ribbon:Ribbon>
</Grid>
</Window>
I am trying to perform automation testing on my app which contains ribbon control.The ribbon buttons
venkatesh

inside the ribbon control not getting detected.so i tried to implement Automationpeer for that control
by the knowldge gained through this blog.But after implementing the automationpeer when i add the
control to my app the controls are not getting displayed.Kindly help on this regard.please find the code
below
public class UiAutomationRibbonButton : RibbonButton
static UiAutomationRibbonButton()
DefaultStyleKeyProperty.OverrideMetadata(typeof(UiAutomationRibbonButton), new
FrameworkPropertyMetadata(typeof(UiAutomationRibbonButton)));
protected override AutomationPeer OnCreateAutomationPeer()
return new UiAutomationRibbonButtonAutomationPeer(this);
public class UiAutomationRibbonButtonAutomationPeer : RibbonButtonAutomationPeer

,IInvokeProvider
public UiAutomationRibbonButtonAutomationPeer(RibbonButton ribbonButton)
: base(ribbonButton)
{ }
protected override bool IsControlElementCore()
return true;
protected override string GetClassNameCore()
return "RibbonButton";
protected override string GetLocalizedControlTypeCore()
return "ribbonButton";
protected override AutomationControlType GetAutomationControlTypeCore()
return AutomationControlType.Button;
public override object GetPattern( PatternInterface patternInterface )
if( patternInterface == PatternInterface.Invoke )
return this;
return base.GetPattern( patternInterface );
private UiAutomationRibbonButton MyOwner

{
get
return (UiAutomationRibbonButton)base.Owner;
#region IInvokeProvider Members
public void Invoke()
RoutedEventArgs newEventArgs = new RoutedEventArgs(UiAutomationRibbonButton.ClickEvent);
MyOwner.RaiseEvent( newEventArgs );
}
#endregion
void IInvokeProvider.Invoke()
XAML Code :
<Window x:Class="WpfRibbonControl.MainWindow"
xmlns:ribbon="clr-
namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
xmlns:UIRibbon ="clr-
namespace:WpfCustomControlLibrary1;assembly=WpfCustomControlLibrary1"
Title="MainWindow" Height="350" Width="525">
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<ribbon:Ribbon x:Name="Ribbon">
<ribbon:Ribbon.ApplicationMenu>
<ribbon:RibbonApplicationMenu SmallImageSource="Images\SmallIcon.png">
<ribbon:RibbonApplicationMenuItem Header="Hello _Ribbon"
x:Name="MenuItem1"
ImageSource="Images\LargeIcon.png"/>
</ribbon:RibbonApplicationMenu>
</ribbon:Ribbon.ApplicationMenu>
<ribbon:RibbonTab x:Name="HomeTab"
Header="Home">
<ribbon:RibbonGroup x:Name="Group1"
Header="Group1">
LargeImageSource="Images\LargeIcon.png"

</ribbon:RibbonGroup>
</ribbon:RibbonTab>
</ribbon:Ribbon>
</Grid>
</Window>
Sounds good..............
daniel
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | UX Design Process
Home
User Experience
UX Design Process Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
User Experience Design Process
Custom Controls
Layout
User Experience becomes a Key Success Factor
Input
In the past, we focused mainly on building products that fulfilled the functional requirements of the user. User experience was often
Data Binding considered late in the development process. But today the customer demands more than just a working product. Providing the right
features is still the prerequisite for a good product, but to turn it into something extraordinary you need to provide a good user
Styling
experience!
Localization
Providing a rich user experience is not a thing of fortune. It needs to be planed, designed and integrated into the development of a
Interaction product. Designing a rich user experience is not only about make up your user interface by some graphics and gradients - its a much
broader concept. Its about creating an emotional connection between the user and your software. It makes the user feel good and so
Resources he likes to continue using the software.
2D Graphics
3D Graphics New Tools for Designers

Animation
Microsoft recognized, give development teams the power to create rich user experiences it needs a lot more graphical tool support
Multimedia than VisualStudio can provide today. So they decided to create a new tool suite - made for designers.
Documents
Windows 7
Interoperability
Performance
Expression Blend
Tools
UI Automation
Workflow.html[2/16/2014 2:42:42 PM]

This tool suite is called Microsoft Expression. It consists of the four products:
Expression Blend is built to create user interfaces in WPF and Silverlight. It builds the bridge between designer and
developers. It can open VisualStudio solutions
Expression Design is a leightweight version of Adobe Illustrator to create and edit vector graphics.
Expression Media is built to encode, cut and enrich video files and optimize them for silverlight streaming
Expression Web is Microsoft next generation of HTML and Javascript editor. Its the replacement for Frontpage.
Together they are a powerful package. The following illustration shows a sample workflow of integrating a vector image that is created
by a graphics designer in Adobe Illustrator into a WPF project that is part of a VisualStudio solution.
Development Workflow of a WPF Project

Developing a WPF application with a rich user experience requires a lot more skills than just a requirements analyst that defines a list
of use cases and developer that implements the software. You have to find out what the user really needs. This can be done by
following a user centered approach.

1. Elicit Requirements
Like in any kind of software projects its important to know and focus the target of your development. You should talk to stakeholders
and users to find out the real needs. These needs should be refined to features and expressed in use cases (abstract) or user
scenarios (illustrative). Priorize the tasks by risk and importance and work iteratively. This work is done by the role of the requirements
engineer.
2. Create and Validate UI Prototype
Creating a user interface prototype is an important step to share ideas between users and engineers to create a common
understanding of the interaction design. This task is typically done by an interaction designer. It's helpful to only sketch the user
interface in a rough way to prevent early discussions about design details. There are multiple techniques and tools to do this. Some of
them are:
Paper prototype

Use paper and pencil to draw rough sketches of your user interface. No tools and infrastructure is needed. Everyone can just
scribble thier ideas on the paper.
Wireframes

Wireframes are often used to sketch the layout of a page. It's called wireframes because you just draw the outlines of controls
and images. This can be done with tools like PowerPoint or Visio
Expression Blend 3 - Sketch Flow
Sketch flow is a new cool feature to create interactive prototypes directly in WPF. You can
use the integrated "wiggly style" to make it look sketchy. The prototype can be run in a standalone player that has an
integrated feedback mechanism.
Interactive Prototype
The most expensive and real approach is to create an (reusable) interactive prototype that works as the
real application but with dummy data.

It is strongly recommended to test your UI prototype on real users. This helps you to find out and address design problems early in
the development process. The following techniques are very popular to evaluate UI prototypes:
Walktrough

A walktrough is usually done early in a project with wireframes or paper prototypes. The user gets a task to solve and he
controlls the prototype by touching on the paper. The test leader than presents a new paper showing the state after the

interaction.
Usability Lab

To do a usability lab, you need a computer with a screen capture software and a camera. The proband gets an task to do and
the requirements and interaction engineer watch him doing this. They should not talk to him to find out where he gets stuck
and why.
3. Implement Business Logic and Raw User Interface
4. Integrate Graphical Design
5. Test software
Roles
Buliding a modern user interface with a rich user experience requires additional skills from your development team. These skills are
described as roles that can be distributed among peoples in your development team.
Developer
The developer is responsible to implement the functionality of the application. He creates the data model, implements the
business logic and wires all up to a simple view.
Graphical Designer
The graphical designer is responsible to create a graphical concept and build graphical assets like icons,logos, 3D models or
color schemes. If the graphical designer is familiar with Microsoft Expression tools he directly creates styles and control
templates.
Interaction Designer

The interaction designer is responsible for the content and the flow of a user interface. He creates wireframes or UI sketches
to share its ideas with the team or customer. He should validate his work by doing walktroughs or storyboards.
Integrator

The integrator is the artist between the designer and the developer world. He takes the assets of the graphical designer and
integrates them into the raw user interface of the developer. This role needs a rare set of skills and so it's often hard to find
the right person for it.
More Infos
The New Iteration - Microsoft Paper about the Designer/Developer collaboration

Last modified: 2010-01-05 12:01:58

Show all comments
For UI prototyping you can use balsamiq mockup http://balsamiq.com/products/mockups very nice
Victor
tool.

Thankyou, its useful and simple!

Mehdi Rizvandi
wah g wah
papu
There obviously are so many fools around. This is a dumbFin tutorial.

Paruppu
Just great, thank you

Thorsten
For free Life insurance information round the clock anywhere in the world call
Sneha
Sneha +91-9096273779
Very Nice Tutorials for WPF Beginners !!!
Darshan S....
Very Nice Tutorials for WPF Beginners !!!
Darshan S....
YEPPPEEEEEEEEEEEEEEEEEEEEEEE
RX100
very good
castro
Great!!!!
new_programmer
Thanks a lot... Perfect explanation.. keeps us reading more of ur articles

Siva
this very use full for me.........

Nawab Anas...
Good Info......
Deepu
not gud
jay

it's free??
Joe
amazing
nency
amazing
nency
it's good for begginners.....

muthahhar
good
drishya
Good explanation.
Pranjal R Nigam
Nice Article
Shubhangi
perfect explaination !!!

DK
perfect explaination !!!

DK
Good ma
shahul
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Logical- and Visual Tree
Home
Fundamentals
Logical- and Visual Tree Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Logical- and Visual Tree
Custom Controls
Layout
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents
Windows 7
Interoperability
Introduction
Performance
Elements of a WPF user interface are hierarchically related. This relation is called the LogicalTree. The template of one element
Expression Blend
consists of multiple visual elements. This tree is called the VisualTree. WPF differs between those two trees, because for some
Tools problems you only need the logical elements and for other problems you want all elements.

UI Automation
<Window>
<Grid>
<Label Content="Label" />
<Button Content="Button" />
LogicalAndVisualTree.html[2/16/2014 2:43:04 PM]

</Grid>
</Window>

Why do we need two different kind of trees?

A WPF control consists of multiple, more primitive controls. A button - for example - consists of a border, a rectangle and a content
presenter. These controls are visual children of the button.

When WPF renders the button, the element itself has no appearance, but it iterates through the visual tree and renders the visual
children of it. This hierarchical relation can also be used to do hit-testing, layout etc.

But sometimes you are not interested in the borders and rectangles of a controls' template. Particulary because the template can be
replaced, and so you should not relate on the visual tree structure! Because of that you want a more robust tree that only contains
the "real" controls - and not all the template parts. And that is the eligibility for the logical tree.
The Logical Tree

The logical tree describes the relations between elements of the user interface. The logical tree is responsible for:
Inherit DependencyProperty values

Resolving DynamicResources references
Looking up element names for bindings
Forwaring RoutedEvents
The Visual Tree

The visual tree contains all logical elements including all visual elements of the template of each element.
The visual tree is
responsible for:
Rendering visual elements

Propagate element opacity
Propagate Layout- and RenderTransforms
Propagate the IsEnabled property.
Do Hit-Testing
RelativeSource (FindAncestor)
Programmatically Find an Ancestor in the Visual Tree
If you are a child element of a user interface and you want to access data from a parent element, but you don't know how many levels
up that elemens is, it's the best solution to navigate up the tree until it finds an element of the requested type.
This helper does excactly this. You can use almost the same code to navigate through the logical tree.

public static class VisualTreeHelperExtensions
{
public static T FindAncestor<T>(DependencyObject dependencyObject)
where T : class
{
DependencyObject target = dependencyObject;
do
{
target = VisualTreeHelper.GetParent(target);
}
(target != && !(target T));
while null is
return target as T;
}
}

The following example shows how to use the helper. It starts at this and navigates up the visual tree until it finds an element of type
Grid. If the helper reaches the root element of the tree, it returns null.

var grid = VisualTreeHelperExtensions.FindAncestor<Grid>(this);

Last modified: 2010-06-29 08:34:41

Show all comments
I found it useful. Thank you Christian!

Yathish
I am QT programmer for the past 3 years and this tutorial does give a me a basic understanding. But
blueskin
am still trying to understand the hierarchical relation in terms of OO programming concepts. If have a
link that provides understanding on how these trees work that'd be great. I prefer understanding the
lower level concepts rather than remembering them. Thank you.
Nice article
Karthick
nice article. Good for beginners.
prabhu
THANK YOU....
Awesome explanation. Helped me a lot!
Janynne
Gomes
Tnx!
Hey, I'm a beginner and really appreciate your efforts. Thank you. Some day this may seem old hat, but
Dennis
for now, it's all new to me. Thanks again and know your efforts are appreciated.

Really Nice Article for Beginners. Thanks for this helpful article . Thank you guys..
spencer
good one for beginner

nightrider
You have explained things in all your articles in a very nice way. MSDN has got all of this but their way
Amogh
of explaining is mechanical and lot difficult and time consuming to understand.
Thanks for this stuff bro, it helps understand things quickly.
Hi Im new to WPF and this article reaaly helps me alot....Its easy to understand and guide is given
Mohamed...
properly .Thnx dude.....Keep it up
Very nice article and nicely explained.

Ratkiia
wonderful article
Amihai
It was good but still it needed few practicle examples to elaborate Visual Trees
Sanjay Patolia
7 years ago I have felt that .design file in the classic C# is a worst practice of
Simon
design. For a number of projects I've developed and XML based mechanism of controls layout is
universal for C#, MFC and run time visual object builders. Microsoft in Hertzlya(Israel ) sent us to...
XAML is like we have done, but does not suppose distribution of C# objects in assemblies and their
dynamic link.What is about the example it could be done simple more if using XPATH and its reflection
in tree of objects.
chengila
madhav
mangesh very very nice & simple....
joshi
Funny how I found your site (I mean the way i searched through the net). I've spent more than half of
Con
the day looking for tutorials in wpf. Thanks, this really helped me a lot in my school project. By the way
I'm a Computer Science student and i wish to build some site like this someday. Thank you again!

Thanks for your great work..for me the following explanation is more clear
Vivek...
The Logical Tree is a tree structure that represents the hierarchy of controls and elements that
constitute a piece of user interface in WPF, but without their inner parts.
For example, if a DockPanel contains a ListBox which contains a list of Buttons, the Logical Tree will
consist of the following:
DockPanel
+ListBox
+Button
+Button
+Button
The Visual Tree is a tree structure that represents the fine-grained hierarchy of Visuals that constitute
what appears on the screen. It contains the same elements as the Logical Tree, but includes all the
Visuals that are used to compose the Logical Tree's controls and elements, like the ControlTemplates
and DataTemplates.
The Visual Tree of the previous example would therefore be as follows:
DockPanel
+ListBox
+Border
+...
+VirtualizingStackPanel
+ListBoxItem
+Button
+Border
+....
Hallo Herr Mosers, vielen Dank fÃ¼r Ihre tolle Arbeit bei den Tutorials. Sehr gut gemacht
Marcus Galka
und sehr verstÃ¤ndlich. Hat mir sehr geholfen.
This is very good article and explained in simple words and realy very good for beginners
Rajshekar...
Good expanation and easy to understand. I liked it.

Alexander
Thanks bro... you made my day :) please continue your good work....
Ravi Kurapati
Thanks a lot..! :)
Girish

your example ist very simple to understand
ghiwany
thanks for all
Nice one! But can u explain it step by step?

Ashish Dhyani
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Routed Events
Home
Fundamentals
Routed Events Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Routed Events
Custom Controls
Layout
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia Routed events are events which navigate up or down the visual tree acording to their RoutingStrategy. The routing strategy can
be bubble, tunnel or direct.
You can hook up event handlers on the element that raises the event or also on other elements above or
Documents
below it by using the attached event syntax: Button.Click="Button_Click".
Windows 7
Routed events normally appear as pair. The first is a tunneling event called PreviewMouseDown and the second is the bubbling
Interoperability called MouseDown. They don't stop routing if the reach an event handler. To stop routing then you have to set e.Handled =
true;
Performance
Tunneling The event is raised on the root element and navigates down to the visual tree until it reaches the source element or
Expression Blend
until the tunneling is stopped by marking the event as handeld. By naming convention it is called Preview... and appears
Tools before corresponding bubbling event.
UI Automation
Bubbling The event is raised on the source element and navigates up to the visual tree until it reaches the root element or
until the bubbling is stopped by marking the event as handled. The bubbling event is raised after the tunneling event.
Direct The event is raised on the source element and must be handled on the source element itself. This behavior is the same
RoutedEvents.html[2/16/2014 2:43:38 PM]

as normal .NET events.
How to Create a Custom Routed Event

// Register the routed event
public static readonly RoutedEvent SelectedEvent =
EventManager.RegisterRoutedEvent( "Selected", RoutingStrategy.Bubble,
typeof(RoutedEventHandler), typeof(MyCustomControl));

// .NET wrapper
public event RoutedEventHandler Selected
{
add { AddHandler(SelectedEvent, value); }
remove { RemoveHandler(SelectedEvent, value); }
}

// Raise the routed event "selected"
RaiseEvent(new RoutedEventArgs(MyCustomControl.SelectedEvent));


Last modified: 2010-02-08 17:52:53

Show all comments
I just needed a quick refresher and for that this was excellent. Thanks.
Basarat
Basarat
Basarat
Basarat
Every man and his bloody dog have written "tutorials" on this, and not ONE shows you how to do it.

Mako
Bubbling goes up, tunneling goes down. We get it. SHOW US THE FLAMING CODE. What do I declare
and where? If I have a main screen with a tabcontrol whose tabitems contain usercontrol forms, and I
have a button on one that should switch to another tab, how could I do it?
The diagram is incorrect. Assuming we are talking about Click event on Button, then the PreviewClick
Branko
(tunneling) arrow should go from Window to Button (not from Button downwards).
I agree Branko you are correct

Dadi
Not to mention that there's no such thing as PreviewClick.

tb
i expect explaination on code

Mallesh
wow you guys are really that impressed by mosers copy and pasting
thedirty
See event bubbling in a custom ASP.NET control.

Denis
http://msdn.microsoft.com/en-us/library/aa720044(v=VS.71).aspx
If you want to see the built-in action, just define the same event handler for all children of an element
for MouseDown
//Window contructor
this.MouseDown += MouseDownHandler;
myBorder.MouseDown += MouseDownHandler;
myPanel.MouseDown += MouseDownHandler;
myEllipse.MouseDown += MouseDownHandler;
myRectangle.MouseDown += MouseDownHandler;
void MouseDownHandler(object sender, MouseButtonEventArgs e)
Debug.WriteLine("MouseDown: " + sender);
//this means that you handled the event and bubbling stops at the
// child that raised the event
//e.Handled = true;
Oh and can someone do something about this CommentTextBox. It's small and drives me up the wall.
And the fontsize is hurting my eyes. Yes, I know I could fix it from my end, but it would be nice if i didn't
have to :)
great thanks.......
Anand Rajak

I don't know if i am missing something here but just to make sure, can you clarify this.
sam
The main difference between routedevents and the old .net2.0 version of event propagation is that this
version does not necessarily have to be bound to an event handler before RaiseEvent can be called?
Thanks
I don't know if i am missing something here but just to make sure, can you clarify this.
sam
The main difference between routedevents and the old .net2.0 version of event propagation is that this
version does not necessarily have to be bound to an event handler before RaiseEvent can be called?
Thanks
What is the Use of the Routed Event in WPF or Silverlight. Why can't we achive the same using ordinary
Jothimnai V
event
nice description
Sushil
Man, I must say your website is the best in explaining WPF concepts. MSDN sucks & all the books are
Edward
just too long to read!
Bubbling for MouseDown event doesn't work for usual controls: buttons, textbox, etc. On the other
Akshay
hand PreviewMouseDown works for the same. Also, bubbling for MouseDown works for container
Bharde
controls like Windows, StackPannel, Grid, etc. Why is it so? Pasting the XAML for your reference:
<Window x:Class="RoutedEvents.Window1" MouseDown="Window_MouseDown"

PreviewMouseDown="Window_PreviewMouseDown"
Title="Window1" Height="300" Width="300">
<StackPanel x:Name="grdNew" MouseDown="grdNew_MouseDown"

PreviewMouseDown="grdNew_PreviewMouseDown" Background="Cornsilk" Height="187"
Width="221">
<Button x:Name="btnNew" MouseDown="btnNew_MouseDown"

PreviewMouseDown="btnNew_PreviewMouseDown" Height="84" Background="AliceBlue"
MouseUp="btnNew_MouseUp">
<TextBox x:Name="txtNew" MouseDown="txtNew_MouseDown"

PreviewMouseDown="txtNew_PreviewMouseDown" Width="103"></TextBox>
</Button>
</StackPanel>
</Window>

Nice one but should have one proper example to get clear practical understanding of all the routing
sanjay
strategy
patoliaa
the tutorial comes handy to a new WPF programmer like me, by keeping the subject terse but well
Epari...
touching most of the points needed for a beginner. Hope Christian will extend the site soon for a next
level [for an advanced programmer too]. Good Job. Chakkanaina article. Azagaana article.
Nice one but Need more practical example to get clear understanding.
ms
To make these tutorials, even more useful, give some downloadable simple example.
Jay
Best for quick look at basic concepts and understanding of WPF. Covering in depth of all concepts with
srinivas
an example will make this site excellent
really great.
Om Prakash
Really Very good

Mahesh
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Introduction to WPF Layout
Home
Layout
Introduction to WPF Layout Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Introduction to WPF Layout
Custom Controls
Why layout is so important
Layout
Best Practices
Input
Vertical and Horizontal Alignment
Data Binding
Margin and Padding
Styling
Width and Height
Localization
Content Overflow Handling
Interaction
Resources
2D Graphics Why layout is so important

3D Graphics
Layout of controls is critical to an applications usability. Arranging controls based on fixed pixel coordinates may work for an limited
Animation enviroment, but as soon as you want to use it on different screen resolutions or with different font sizes it will fail. WPF provides a rich
set built-in layout panels that help you to avoid the common pitfalls.
Multimedia
These are the five most popular layout panels of WPF:
Documents
Grid Panel
Windows 7
Stack Panel
Interoperability Dock Panel
Wrap Panel
Performance
Canvas Panel
Expression Blend
Tools
Best Practices
UI Automation
Avoid fixed positions - use the Alignment properties in combination with Margin to position elements in a panel
Avoid fixed sizes - set the Width and Height of elements to Auto whenever possible.
Don't abuse the canvas panel to layout elements. Use it only for vector graphics.
Use a StackPanel to layout buttons of a dialog
LayoutProperties.html[2/16/2014 2:43:53 PM]
Use a GridPanel to layout a static data entry form. Create a Auto sized column for the labels and a Star sized column for the
TextBoxes.
Use an ItemControl with a grid panel in a DataTemplate to layout dynamic key value lists. Use the SharedSize feature to
synchronize the label widths.
Vertical and Horizontal Alignment

Use the VerticalAlignment and HorizontalAlignmant properties to dock the controls to one or multiple sides of the panel.
The following illustrations show how the sizing behaves with the different combinations.
Margin and Padding

The Margin and Padding properties can be used to reserve some space around of within the control.
The Margin is the extra space around the control.

The Padding is extra space inside the control.
The Padding of an outer control is the Margin of an inner control.
Height and Width

Alltough its not a recommended way, all controls provide a Height and Width property to give an element a fixed size. A better
way is to use the MinHeight, MaxHeight, MinWidth and MaxWidth properties to define a acceptable range.

If you set the width or height to Auto the control sizes itself to the size of the content.
Overflow Handling
Clipping
Layout panels typically clip those parts of child elements that overlap the border of the panel. This behavior can be controlled by
setting the ClipToBounds property to true or false.
Scrolling
When the content is too big to fit the available size, you can wrap it into a ScrollViewer. The ScrollViewer uses two scroll bars to
choose the visible area.
The visibility of the scrollbars can be controlled by the vertical and horizontal ScrollbarVisibility properties.
<ScrollViewer>
<StackPanel>
<Button Content="First Item" />
<Button Content="Second Item" />
<Button Content="Third Item" />
</StackPanel>
</ScrollViewer>

Related Articles
MSDN - The Layout System
► Tutorial ► Adobe InDesign ► InDesign CS3 ► InDesign Template

Last modified: 2009-05-27 08:38:49

Show all comments
Assalam-o-alaikum
Mustansar
A lot help for beginners, I am gona present it to my fellows tomorrow :)
Awesome buddy ! Thankz a ton ! :)

Vandip
Awesome buddy ! Thankz a ton ! :)

Vandip

Awewsome article!
gdemmi
Very good article on layouts, thanks

Johnson
We learnt lot of things from this article,its so nice

lalita patil
Nice one it really gives good idea about using layout panels and use best practise out of it. :)
Sanjay Patolia
hai its very good article

raja
Small, crisp. Nice one. Thanks

rashmi
Good, nice,helpful article......
Om Prakash
Thanks Sir G
Regard :
Om Prakash Bishnoi
Muhammad Great effort. Easy to understand.....Learning with out boring.....Really interesting.

Hanif
Great stuff to make us understand the usefullness of layout panel in a simpler way.
manmohan
nice
rahul
nice article
Raj
Very informative post. Thanks for taking the time to share your view with us.
zeceTeddy
Anubhav Good article. Must read before starting development in WPF.

Ranjan

Nice and clear for beginners

AS
good job...this helped me a lot

expert
Could you please explain me how to add a toolbar into a grid by writing code in .xaml.cs file?
Jo
Jo
Jo
Jo
Jo
Hi Mate,
Saj
Is there a way to add WPF Window at a desired position, like if you have a panel when user clicks on
buttons the new window opens in the middle panel or desired panel rather than coming up as New
Window (more like MDI window approach)
Thanks
Excellent
MEE
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | StackPanel
Home
Layout
StackPanel Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
WPF StackPanel
Custom Controls
Layout
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Introduction
Documents
The StackPanel in WPF is a simple and useful layout panel. It stacks its child elements below or beside each other, dependening on
Windows 7 its orientation. This is very useful to create any kinds of lists. All WPF ItemsControls like ComboBox, ListBox or Menu use a
StackPanel as their internal layout panel.
Interoperability

Performance <StackPanel>
Expression Blend
<TextBlock Margin="10" FontSize="20">How do you like your coffee?</TextBlock>
<Button Margin="10">Black</Button>
Tools <Button Margin="10">With milk</Button>
<Button Margin="10">Latte machiato</Button>
UI Automation
<Button Margin="10">Chappuchino</Button>
</StackPanel>

StackPanel.html[2/16/2014 2:44:30 PM]

Stack Items horizontally

A good example for a horizontal stack panel are the "OK" and "Cancel" buttons of a dialog window. Because the size of the text can
change if the user changes the font-size or switches the language we should avoid fixed sized buttons. The stack panel aligns the two
buttons depending on their desired size. If they need more space they will get it automatically. Never mess again with too small or
too large buttons.

<StackPanel Margin="8" Orientation="Horizontal">
<Button MinWidth="93">OK</Button>
<Button MinWidth="93" Margin="10,0,0,0">Cancel</Button>
</StackPanel>

► Tutorial ► Learn Quick Books ► Coding Learning ► Basics

Last modified: 2009-12-15 23:55:07

Show all comments
Nice one..
upa
After studying this tutorial, i think WPF is intresting topic..
hi evryone!!!
Everyone...
Thanks, nice articles and helping me a lot.

Albert
Quick and right to the bone, thanks!

Daniel
Prabodha Nice
Eranga
Can you tell me how to align control in centre in stackpanel

Mukesh
Niceone
Sreenivas
2 Mukesh horizontalalligment=center
in4man
nice article...Thanks!!
Sandeep...
cappuccino
me
Hi Mukesh,
Kev
The default is that the control will be centered. Use the HorizontalAlignment on the Control to set it
specifically
e.g
<StackPanel Height="100" HorizontalAlignment="Left" Margin="502,98,0,0" Name="stackPanel1"

VerticalAlignment="Top" Width="200">
<Button Content="Button" HorizontalAlignment="Center" Height="23" Name="button3" Width="75"

/>
</StackPanel>
Superb for dynamic size changing functionality of a User Interface Controls

Sanjay Patolia
this is the good article but is very very simple.

mohammad...
this is the good article

mohammad...
venti soy iced white mocha, no whip
sbuxboy
nice article :)
Can we take stackpanel inside a grid panel???? i tried but its nt wrking.. im new to WPF .. please help
Swat
thanx this
ray akkanson
article helped me a lot.

Please put some forward and back buttons on these pages. It would make the UX of the tutorial so
Al
much better.
Nice Page! Helps a lot!
Christian
Is there a way to extend the last Element to the End of the Stackpanel?
Nice Article
Saravanan
Nice turorial.
VeeraPratap...
Fadu Articles hen bhai

Hims
hi guys
peter ka bap
you know I can still smell wee and a little poo too
ping
Hi i have tried any exampled regarding the animation in wpf. But here two check box are taken one
ki
check box for continue rotate of an object in clock wise and another checkbox when i click the object
should rotate in anticlock wise direction . Can i know the what is the condition i should use inorder to
reverse the object in anticlock when i check the autoreverse checkbox.
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Data Binding Overview
Home
Data Binding
Data Binding Overview Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
DataBinding in WPF
Custom Controls
Layout
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
Introduction
3D Graphics
WPF provides a simple and powerful way to auto-update data between the business model and the user interface. This mechanism
Animation is called DataBinding.
Everytime when the data of your business model changes, it automatically reflects the updates to the user
Multimedia
interface and vice versa. This is the preferred method in WPF to bring data to the user interface.
Databinding can be unidirectional (source -> target or target <- source), or bidirectional (source <-> target).
Documents
The source of a databinding can be a normal .NET property or a DependencyProperty. The target property of the binding must be
Windows 7
a DependencyProperty.
Interoperability
To make the databinding properly work, both sides of a binding must provide a change notification that tells the binding when to
Performance update the target value.
On normal .NET properties this is done by raising the PropertyChanged event of the
INotifyPropertyChanged interface. On DependencyProperties it is done by the PropertyChanged callback of the property
Expression Blend
metadata
Tools Databinding is typically done in XAML by using the {Binding} markup extension. The following example shows a simple binding
UI Automation between the text of a TextBox and a Label that reflects the typed value:

<StackPanel>
<TextBox x:Name="txtInput" />
<Label Content="{Binding Text, ElementName=txtInput,
DataBindingOverview.html[2/16/2014 2:45:55 PM]

UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>

DataContext
Every WPF control derived from FrameworkElement has a DataContext property. This property is meant to be set to the data
object it visualizes. If you don't explicity define a source of a binding, it takes the data context by default.
The DataContext property inherits its value to child elements. So you can set the DataContext on a superior layout container
and its value is inherited to all child elements. This is very useful if you want to build a form that is bound to multiple properties of the
same data object.

<StackPanel DataContext="{StaticResource myCustomer}">
<TextBox Text="{Binding FirstName}"/>
<TextBox Text="{Binding LastName}"/>
<TextBox Text="{Binding Street}"/>
<TextBox Text="{Binding City}"/>
</StackPanel>

ValueConverters
If you want to bind two properties of different types together, you need to use a ValueConverter. A ValueConverter converts the
value from a source type to a target type and back. WPF already includes some value converters but in most cases you will need to
write your own by implementing the IValueConverter interface.
A typical example is to bind a boolean member to the Visibility property. Since the visibility is an enum value that can be
Visible, Collapsed or Hidden, you need a value converter.

<StackPanel>
<StackPanel.Resources>
<BooleanToVisibilityConverter x:Key="boolToVis" />
</StackPanel.Resources>

<CheckBox x:Name="chkShowDetails" Content="Show Details" />
<StackPanel x:Name="detailsPanel"
Visibility="{Binding IsChecked, ElementName=chkShowDetails,
Converter={StaticResource boolToVis}}">
</StackPanel>
</StackPanel>

The following example shows a simple converter that converts a boolen to a visibility property. Note that such a converter is already
part of the .NET framework.

public class BooleanToVisibilityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter,
CultureInfo culture)
{
if (value is Boolean)
{
return ((bool)value) ? Visibility.Visible : Visibility.Collapsed;

}

return value;
}

public object ConvertBack(object value, Type targetType, object parameter,
{
}
}

Tip: you can derive your value converter from MarkupExtension and return its own instance in the ProvideValue override. So
you can use it directly without referencing it from the resources.
Another Tip: When you get the error "No constructor for type '...' has 0 parameters.", you need to add an default constructor to your
converter, even it's not needed. Just for the WPF designer.
Last modified: 2011-03-12 22:32:33

Show all comments
Some more details will be added advantage...

Ronak Babel
What about something like this. I'm using MVVM and I bind WindowViewModel as a DataContext to
Paul
MainWindow. Inside WindowViewModel I have some objects like DocumentViewModel which has also
some properties. How to bind for example properties of DocumentViewModel.Caption to MainWindow
label (Label.Text). But without setting DocumentViewModel as Context of my Label! Can I somehow
define terget path for this kind of binding?
Sanjay Nice one

Patolia
In beginning, you discussed that source property is a .Net Property and Target property is
Sanjay
DependencyProperty. In case of Binding text of Element textbox where these source property and target
Patolia
property comes into the picture.?
Your site is really helpful! Looking forward to more posts!! Well Done.

Rachna
Hi! How do you do that, but instead of an internal control (CheckBox) a local var, as in, Visibility="
JC
{Binding (MyClass.myVar)}"? I tried a lot of solutions, but none come with good results.
good
gg
Good article
subhash
Very good post for beginer

Santosh
Thanks for the information! Great site.

ds
nice one
nice one
good, nice.
skynet
but i m confused with how can we use databinding with listbox , i get little solution about it in http://get-
Mohit
solution.in
but i m confused with how can we use databinding with listbox , i get little solution about it in http://get-
Mohit
solution.in
Excellent article with a nice visual representation. Thanks a lot.

Ershad
Excellent article with a nice visual representation. Thanks a lot.

Ershad
FIT
noor
thx a lot bro ... very cool tuto ina very simple way
SamTheDev

nice website for Initial user to learn

anil kishor...
How do you do runtime data binding?

rwg
nice
sari
I have a few more examples like some have asked for here:
Jared
<a href="http://www.rhyous.com/2011/02/22/binding-visibility-to-a-bool-value-in-
wpf/">Binding Visibility to a bool value in WPF</a>
This is simply great...

Lakmal
Very Nice..!!
Sandip
Very Nice..!!
Sandip
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Data Viewing, Sorting and Filtering
Home
Data Binding
Data Viewing, Sorting and Filtering Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to Navigate, Group, Sort and Filter Data in WPF
Custom Controls
What is a CollectionView?
Layout
Navigation
Input
Filtering
Data Binding
Sorting
Styling
Grouping
Localization
How to create a CollectionView in XAML
Interaction
Resources
2D Graphics
3D Graphics
What is a CollectionView?
Animation WPF has a powerful data binding infrastructure. It allows you to bind almost any kind of collection directly to a view. But when it comes to sorting, filtering and grouping the support of the collections is rare. That's the point where the CollectionView comes into play. A collection view is a
wrapper around a collection that provides the following additional features:
Multimedia
Navigation
Documents
Sorting
Windows 7 Filtering
Interoperability
Grouping
Performance
Expression Blend
How to Create and Use a CollectionView
Tools The following example shows you how to create a collection view and bind it to a ListBox
UI Automation

<ListBox ItemsSource={Binding Customers} />
</Window>

public class CustomerView
{
public CustomerView()
{
DataContext = new CustomerViewModel();
}
}

public class CustomerViewModel
{
private ICollectionView _customerView;

public ICollectionView Customers
{
get { return _customerView; }
}

public CustomerViewModel()
{
IList<Customer> customers = GetCustomers();
_customerView = CollectionViewSource.GetDefaultView(customers);
}
}

Navigation
The collection view adds support for selection tracking. If you set the property IsSynchronizedWithCurrentItem to True on the view that the collection is bound to, it automatically synchronizes the current item of the CollectionView and the View.

<ListBox ItemsSource="{Binding Customers}" IsSynchronizedWithCurrentItem="True" />

If you are using a MVVM (Model-View-ViewModel) pattern, you don't have to extra wire-up the SelectedItem of the control, because it's implicity available over the CollectionView.
DataViews.html[2/16/2014 2:46:12 PM]


IList<Customer> customers = GetCustomers();
ICollectionView _customerView = CollectionViewSource.GetDefaultView(customers);
_customerView.CurrentChanged = CustomerSelectionChanged;

private CustomerSelectionChanged(object sender, EventArgs e)
{
// React to the changed selection
}

You can also manually control the selection from the ViewModel by calling the MoveCurrentToFirst() or MoveCurrentToLast() methods on the CollectionView.
Filtering
To filter a collection view you can define a callback method that determines if the item should be part of the view or not. That method should have the following signature:
bool Filter(object item). Now set the delegate of that method to the Filter property of the
CollectionView and you're done.

_customerView.Filter = CustomerFilter

private bool CustomerFilter(object item)
{
Customer customer = item as Customer;
return customer.Name.Contains( _filterString );
}

Refresh the filter
If you change the filter criteria and you want to refresh the view, you have to call Refresh() on the collection view

public string FilterString
{
get { return _filterString; }
set
{
_filterString = value;
NotifyPropertyChanged("FilterString");
_customerView.Refresh();
}
}

Sorting
Sorting data ascending or descending by one or multiple criterias is a common requirement for viewing data. The collection view makes it so easy to achieve this goal. Just add as many SortDescriptions as you like to the CollectionView

_customerView.SortDescriptions.Add(
new SortDescription("LastName", ListSortDirection.Ascending );
_customerView.SortDescriptions.Add(
new SortDescription("FirstName", ListSortDirection.Ascending );

Fast Sorting
The sorting technique explained above is really simple, but also quite slow for a large amount of data, because it internally uses reflection. But there is an alternative, more performant way to do sorting by providing a custom sorter.

ListCollectionView _customerView = CollectionViewSource.GetDefaultView(customers);
as ListCollectionView;
_customerView.CustomSort = new CustomerSorter();

public class CustomerSorter : IComparer
{
public int Compare(object x, object y)
{
Customer custX = x as Customer;
Customer custY = y as Customer;
return custX.Name.CompareTo(custY.Name);
}
}

Grouping
Grouping is another powerful feature of the CollectionView. You can define as many groups as you like by adding GroupDescriptions to the collection view.
Note: Grouping disables virtualization! This can bring huge performance issues on large data sets. So be careful when using it.

_customerView.GroupDescriptions.Add(new PropertyGroupDescription("Country"));

To make the grouping visible in the view you have to define a special GroupStyle on the view.

<ListBox ItemsSource="{Binding Customers}">

<ListBox.GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</ListBox.GroupStyle>
</ListBox>

How to create a CollectionView in XAML

It's also possible to create a CollectionView completely in XAML

<Window.Resources>
<CollectionViewSource Source="{Binding}" x:Key="customerView">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="Country" />
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
</Window.Resources>
<ListBox ItemSource="{Binding Source={StaticResource customerView}}" />
</Window>

► Tutorial ► Learn Quick Books ► Data Networking ► Basics
Last modified: 2009-10-13 09:25:17

Show all comments
I think there's an error in the first C# code piece. You cannot declare the variable _customerView without it's type,
tsahi
and in the CustomerViewModel ctor, you probably didn't mean to redefine that variable locally.
Hi Tsahi,
Christian
thanks for your feedback. It must have been already a bit late as I wrote this article :-) I correted the two things in
Moser
the code snippets.
Greetings
Christian
It'd be really helpful if you indicated which files each code snippet pertains to...
jyanks
Ehhm, where does the GetCustomers() method come from? Or am I to inexperienced to realize this...
Tomas
Hi Thomas,
Christian
the GetCustomer() is just a method on the ViewModel that returns a list of customers. I did not mentioned it in
Moser
the snippet, because it's not relevant where the customers come from. It's just a data source. You can replace it
by any kind of data source you like.
I hope this helps.
Christian
Love the layout, concept and training, keep it up!
Nigel
Stratton
I think your snippet needs a couple of changes, adding "new EventHandler(" and the "void" return type.
_customerView.CurrentChanged += new EventHandler(CustomerSelectionChanged);
private void CustomerSelectionChanged(object sender, EventArgs e)
// React to the changed selection
Regards,
Nigel
Steven Thanks for this article, time for me to refactor.

Jackson

But with out a definition for GetCustomers(), teh code can't be used! Its worthwhile you provide the whole code
anon
necessary when you write a tutorial for beginners so we dont get lost for hours! :)
"Commented on 7.January 2010

Andy
But with out a definition for GetCustomers(), teh code can't be used! Its worthwhile you provide the whole code
necessary when you write a tutorial for beginners so we dont get lost for hours! :)"
Just write whatever function or data source you like since the only thing that matters is that it returns results in
form GetCustomers() returns.
Thanks for this article, and very nice site !
Thomas
but i still have a question, how can you get the number of visible items in your filtered CollectionView ?
I'm trying to bind and sort and filter images.. how can i posibly do this?
Mutia
(http://mutiarar06.student.ipb.ac.id)
lol
Tod
I apprieciate your feedback but I cant explain it anymore in depth because I just copy and pasted this from
Christian M
another website
What is "customers" here? (last line in first example)
alimbada
_customerView = CollectionViewSource.GetDefaultView(customers);
Or is that supposed to be "Customers"?
hello
amir
please help me?
this code for set group style in combo box. i can not set group style .until change combo box items then change
text group!!!!
//class person
Public Class Person
Sub New(ByVal d As Integer, ByVal fm As String)
_id = d
_family = fm
End Sub
Private _family As String
Public Property Family() As String
Get
Return _family
End Get
Set(ByVal value As String)
_family = value
End Set
End Property
Private _id As Integer
Public Property ID() As Integer
Get
Return _id
End Get
Set(ByVal value As Integer)
_id = value
End Set
End Property
End Class
//vb.net code
Dim lst As Person() = New Person() {New Person(1, "amir"), New Person(1, "ali"), New Person(2, "hasan"), New
Person(3, "ahmad")}
Dim p As New ListCollectionView(lst)
p.Filter = AddressOf compare
p.GroupDescriptions.Add(New PropertyGroupDescription("ID"))
p.SortDescriptions.Add(New ComponentModel.SortDescription("ID",
ComponentModel.ListSortDirection.Ascending))
cmb1.DisplayMemberPath = "Family"
cmb1.Items.Clear()
cmb1.ItemsSource = p
Dim g As New GroupStyle
g.HeaderTemplate = New DataTemplate

g.HeaderTemplate.VisualTree = New FrameworkElementFactory(GetType(TextBlock))
With g.HeaderTemplate.VisualTree
Dim b As New Binding("ID")
b.Source = p
.SetBinding(TextBlock.TextProperty, b)
.SetValue(TextBlock.BackgroundProperty, Brushes.Gray)
.SetValue(TextBlock.HeightProperty, 25.0)
.SetValue(TextBlock.ForegroundProperty, Brushes.White)
End With
cmb1.GroupStyle.Add(g)
Check out d link for ICollectionView in detail

Aarti
http://marlongrech.wordpress.com/2008/11/22/icollectionview-explained/
Varadkar
Check out d link for ICollectionView in detail

Aarti
http://marlongrech.wordpress.com/2008/11/22/icollectionview-explained/
Varadkar
I understood Itemsource property bindings but Why we use source property while we create collection view in
Sanjay
View(XAML).
Patolia
"I apprieciate your feedback but I cant explain it anymore in depth because I just copy and pasted this from
KC
another website" - Chritian M
Nice!!!
[color=red]Hello, dear users.[/color]

john_stashek
My name is James. Today i was joined in your portal. There are very nice! :) I hope we will be friends.
Appreciate song, please: [url=http://baseofmp3.com/?

q=%CC%E0%F5%E0%E1%E1%E0%F2]Ð Ñ�Ð Â°Ð¡â�¦Ð Â°Ð Â±Ð Â±Ð Â°Ð¡â��[/url]
I like it.
[b] John[/b].
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Model-View-ViewModel Pattern
Home
Patterns
Model-View-ViewModel Pattern Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
The Model-View-ViewModel Pattern
Custom Controls
Layout
How the MVVM pattern became convenient
Input
WPF has a very powerful databinding feature, that provides an easy one-way or two-way synchronization of properties. You can
Data Binding directly bind two WPF elements together, but the common use of databinding is to bind some kind of data to the view. This is done
by using the DataContext property. Since the DataContext property is marked as inherited, it can be set on the root element of
Styling
a view and it's value is inherited to all subjacent elements of the view.
Localization
One big limitation of using the DataContext property as data source is, that there is only one of it. But in a real life project you
Interaction usually have more than one data object per view. So what can we do? The most obvious approach is to aggreate all data objects into
one single object that exposes the aggregated data as properties and that can be bound to the DataContext. This object is called
Resources the view model.
2D Graphics
3D Graphics Separation of logic and presentation

Animation
The MVVM pattern is so far only a convenient way to bind data to the view. But what about user actions, how are they handeld? The
Multimedia classic approach, known from WinForms is to register an event handler, that is implemented in the code-behind file of the view.
Doing this has some disadvantages:
Documents
Having event handlers in the code-behind is bad for testing, since you cannot mock away the view.
Windows 7
Changing the design of the view often also requires changes in the code, since every element has it's different event handlers.
Interoperability The logic is tightly bound to the view. It's not possible to reuse the logic in an other view
Performance
So the idea is to move the whole presentation logic to the view model by using another feature of WPF, namely Commands.
Commands can be bound like data and are supported by many elements as buttons, togglebuttons, menuitems, checkboxes and
Expression Blend
inputbindings. The goal here is not to have any line of logic in the code-behind of a view. This brings you the following advantages
Tools
The view-model can easily be tested by using standard unit-tests (instead of UI-testing)
UI Automation The view can be redesigned without changing the viewmodel, because the interface stays the same.
The view-model can even be reused, in sone special cases (this is usually not recommended)
MVVM.html[2/16/2014 2:46:49 PM]

What's the difference between MVVM, MVP and MVC?

There is always some confusion about the differences between model-view-presenter, model-view-controller an MVVM pattern. So I
try to define and distinguish them a bit more clearly.
MVC - Model-View-Controller
The MVC pattern consists of one controller that directly gets all user input. Depending of the kind of input, he shows up a different
view or modifies the data in the model. The model and the view are created by the controller. The view only knows about the model,
but the model does not know about any other objects. The pattern was often used in good old MFC and now in ASP.NET MVC
MVP - Model-View-Presenter
In the MVP pattern, the view gets the user input and forwards it to the presenter. The presenter than modifies the view or the model
depending on the type of user action. The view and the presenter are tightly coupled. There is a bidirectional one-to-one relation
between them. The model does not know about the presenter. The view itself is passive, thats why it's called presenter pattern, since
the presenter pushes the data into the view. This pattern is often seen in WinForms and early WPF applications.
MVVM - Model-View-ViewModel
The model-view-viewmodel is a typically WPF pattern. It consists of a view, that gets all the user input and forwards it to the
viewmodel, typically by using commands. The view actively pulls the data from the viewmodel by using databinding. The model does
not know about the view model.
MVVM.html[2/16/2014 2:46:49 PM]

Also check out this interesting article from Costas Bakopanos, a friend of mine, a discussion about the model, states and controllers in
the MVVM environment.
Some MVVM Frameworks

Check out this handy tool to compare MVVM frameworks: MVVM Comparison Tool (Silverlight
PRISM (Microsoft)
MVVM Light (Laurent Bugnion)
WPF Application Framework
Chinch
Caliburn Micro
Core MVVM
Onyx
nRoute
MVVM Foundation
How to build your own MVVM Framework

Last modified: 2011-02-07 16:15:46

Show all comments
Hi Christian, check out Jeremy's new article: http://csharperimage.jeremylikness.com/2010/04/model-

Fred
view-viewmodel-mvvm-explained.html.
MVVM.html[2/16/2014 2:46:49 PM]

what is MVVVM? or is that a typo in:
johnmc
What's the difference between MVVVM, MVP and MVC?
Christian Hi John. It was a typo. I corrected it. Thanks.

Moser
Nice Give Some examples
Gaffar
Hey, great article. Shouldn't the arrow on the MVC picture go from the view to the model? Cheers
Michal
Hey. Its nice article

Prashanth
Yes, I agree Michal, the arrow should point from the view to the model.
Guilhermejs
The description about the MVC pattern says "The view only knows about the model, but the model
Florian
does not know about any other objects." The graph, on the other hand, depicts a model that knows
about the view, and a view that doesn't know about any other objects. The vertical arrow should be
reversed.
Also, in the MVP pattern, why can there be only one view? I can well imagine scenarios with more than
one view, all coupled to the same presenter, same as when the MVC pattern has more than one view.
this stuff became very helpful in my life..thanks a lot christian.

joshin
nice diagram. great article!

yangching
Tanx #
shahrooz
Thanx dude. This is one of the best pattern explanations I've ever seen.
Arie Baba
Explain why is the flow in the MVVM diagram showing a V->VM->M, when the name suggests
Del
M->V->VM
MVVM.html[2/16/2014 2:46:49 PM]

It was named to keep it's name in line with the other MV patterns. Not to specify the flow of the data
Al
itself.
MV Controller
MV Presenter
MV ViewModel
I have a few questions to MVVM:
Peter
1. Can VM contains any business logic? Or should it be delegated to Model?
2. Can I put code responsible for saving entity in VM? Or also saving process should be delegated to
some external class?I use Entityy Framework and I have context which saves entity. Can I put that code
in VM?
Hi, Christian I found one small grametical mistake please correct it. Its here
Rajneesh
â�¢The view-model can even be reused, in sone special cases (this is usually not
Verma
recommended)
sone should be some.
Thanks for nice explanation.........
Answers to Peter's Questions
Satya Dev
1. Don't put business logic in the view model(VM). Think of VM as a surrogate for View (V). Since it is
hard to test the UI components (like Buttons, Lists etc.) using automated tests, we are creating VM
objects. Think of VM as UI with visibility
2. Again I recommend delegating saving of data to a Service class
Hy Christian! Thanks a lot for this tutorial. It's fantastic ;) !

Alex
Great Article. But the Arrow should point from View to Model in MVC as model normally does not
S.Manikandan
know anybody else.
Great Article, it would be great if you attach some samples to explain them. i mean samples with UI
Michael
and DataBinding.
Thanks Christian, your material got me up and running with wpf in a few hours.
dtinsley
Umesh .A Thank you Christian, Good Article. Gets me started on WPF MVVM.
Bhat
MVVM.html[2/16/2014 2:46:49 PM]

Article is great. One small query in MVC you have mentioned that controller gets the input from
Siddarth
user...Pagehandlerfactory class you mean to say? could you please explain in terms of .aspx
page...user access applicatioj by hitting url.
Can u plz share some code snippet on this section

M
I agree with Frodo. Please spellcheck your article next time before posting. It contains typos and
Ralf
grammar mistakes which are distracting while reading it.
Name
E-Mail (optional)
Comment
Post Comment
MVVM.html[2/16/2014 2:46:49 PM]

WPF Tutorial | Data Validation
Home
Data Binding
Data Validation Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Data Validation in WPF
Custom Controls
What we want to do is a simple entry form for an e-mail address. If the user enters an invalid e-mail address, the border of the
Layout textbox gets red and the tooltip is showing the reason.
Input
Data Binding
Styling
Localization
Interaction
Resources
Implementing a ValidationRule (.NET 3.0 style)
2D Graphics
In this example I am implementing an generic validation rule that takes a regular expression as validation rule. If the expression
3D Graphics
matches the data is treated as valid.
Animation

Multimedia /// <summary>
/// Validates a text against a regular expression
Documents /// </summary>
public class RegexValidationRule : ValidationRule
Windows 7
{
Interoperability private string _pattern;
private Regex _regex;
Performance

Expression Blend public string Pattern
{
Tools get { return _pattern; }
UI Automation set
{
_pattern = value;
_regex = new Regex(_pattern, RegexOptions.IgnoreCase);
}
DataValidation.html[2/16/2014 2:47:03 PM]

}

public RegexValidationRule()
{
}

public override ValidationResult Validate(object value, CultureInfo ultureInfo)
{
if (value == null || !_regex.Match(value.ToString()).Success)
{
return new ValidationResult(false, "The value is not a valid e-mail
address");
}
else
{
return new ValidationResult(true, null);
}
}
}

First thing I need to do is place a regular expression pattern as string to the windows resources

<Window.Resources>
<sys:String x:Key="emailRegex">^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@
[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]
*[a-zA-Z]$</sys:String>
</Window.Resources>

Build a converter to convert ValidationErrors to a multi-line string

The following converter combines a list of ValidationErrors into a string. This makes the binding much easier. In many samples
on the web you see the following binding expression:
{Binding RelativeSource={RelativeSource Self},Path=(Validation.Errors)[0].ErrorContent}
This expression works if there is one validation error. But if you don't have any validation errors the data binding fails. This slows down
your application and causes the following message in your debug window:
System.Windows.Data Error: 16 : Cannot get ‘Item[]‘ value (type ‘ValidationError’) from ‘(Validation.Errors)’ (type
‘ReadOnlyObservableCollection`1′). BindingExpression:Path=(0).[0].ErrorContent; DataItem=’TextBox’...
The converter is both, a value converter and a markup extension. This allows you to create and use it at the same time.

[ValueConversion(typeof(ReadOnlyObservableCollection<ValidationError>),
typeof(string))]
public class ValidationErrorsToStringConverter : MarkupExtension, IValueConverter
{
public override object ProvideValue(IServiceProvider serviceProvider)
{
return new ValidationErrorsToStringConverter();
}


{
ReadOnlyObservableCollection<ValidationError> errors =
value as ReadOnlyObservableCollection<ValidationError>;

if (errors == null)
{
return string.Empty;
}

return string.Join("\n", (from e in errors
select e.ErrorContent as string).ToArray());
}

{
}
}

Create an ErrorTemplate for the TextBox

Next thing is to create an error template for the text box.

<ControlTemplate x:Key="TextBoxErrorTemplate" TargetType="Control">
<Grid ClipToBounds="False" >
<Image HorizontalAlignment="Right" VerticalAlignment="Top"
Width="16" Height="16" Margin="0,-8,-8,0"
Source="{StaticResource ErrorImage}"
ToolTip="{Binding ElementName=adornedElement,
Path=AdornedElement.(Validation.Errors),
Converter={k:ValidationErrorsToStringConverter}}"/>
<Border BorderBrush="Red" BorderThickness="1" Margin="-1">
<AdornedElementPlaceholder Name="adornedElement" />
</Border>
</Grid>
</ControlTemplate>

The ValidationRule and the ErrorTemplate in Action

Finally we can add the validation rule to our binding expression that binds the Text property of a textbox to a EMail property of our
business object.

<TextBox x:Name="txtEMail" Template={StaticResource TextBoxErrorTemplate}>
<TextBox.Text>
<Binding Path="EMail" UpdateSourceTrigger="PropertyChanged" >
<Binding.ValidationRules>
<local:RegexValidationRule Pattern="{StaticResource emailRegex}"/>
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>


How to manually force a Validation

If you want to force a data validation you can manually call UpdateSource() on the binding expression. A useful scenario could be
to validate on LostFocus() even when the value is empty or to initially mark all required fields. In this case you cann call
ForceValidation() in the Loaded event of the window. That is the time, when the databinding is established.
The following code shows how to get the binding expression from a property of a control.

private void ForceValidation()
{
txtName.GetBindingExpression(TextBox.TextProperty).UpdateSource();
}

► Tutorial ► ASP Net Tutorial ► Photoshop CS4 ► Photoshop Action

Last modified: 2009-07-06 13:53:43

Show all comments
For those of you who can't get get this example to work...try this link
Ceri
http://www.switchonthecode.com/tutorials/wpf-tutorial-binding-validation-rules. It will help fill in the
missing bits.
For those of you who can't get get this example to work...try this link
Ceri
http://www.switchonthecode.com/tutorials/wpf-tutorial-binding-validation-rules. It will help fill in the
missing bits.
Thanks Ceri, that was a better example and with source code and solution file to understand
Sandy
is the tooltip supposed to open when there is an error. When I do this, the tooltip has the message but
jd
only opens when I hover the mouse over.
jd

jd
This is a good article but I agree with others who requested a project download... when you're new to
Mike
WPF it's not obvious sometimes what goes where or what references are needed etc. Remember, not
everyone's a guru!!
Plz post the complete Window1.xaml content... Important things are missing.
kap
Error:
Error
This is wrong: Template={StaticResource TextBoxErrorTemplate}>
It must be: <TextBox x:Name="txtEMail" Validation.ErrorTemplate="{StaticResource

TextBoxErrorTemplate>
Now it works!
Is it possible to use DataAnnotations with xaml and if so, any chance of a short example code?
Klara
Hello, Everyone thanks for your comment, i m looking forward to publish my new site which is on WCF it
Christian...
might help you please go through www.wcf.ru
OK?!?!?!, I did Hello World, worked fine, but am I missing step in between to be able to achieved this
Alex
puzzle, or I am going too quick. What goes where?!!??!?
Nice web site, but you should add steps to know what to try first, second,...
Excellent Article. Got it working easily. Helped me alot!

GaaTy
How will you stop user from going to next page till user clears all validations on this page? Just like it
WPFPupil
used to happen in aspx pages. As soon as user will click submit button, all client side validators will
validate and of any of them fails then user remains on the same page.
Please help...
I have a little problem in this validation process. I don't wan't to show user the validation errors (red
Vipin M
border on controls) before they try to save the form. Is there any way I can disable this validation errors
on controls till user tries to submit the form?

Using StringBuilder() is more memory-efficient than using Strings.

Gorked
good , but why there is no simpler way as in winforms for a common thing like validation
sudheer...
I can't get the image to show, but at lease here's the syntax for the image.... <BitmapImage
luke
x:Key="ErrorImage" UriSource="Resources\Key.png" />
its nice
venky
Thanks a lot for this series!!

Raja
Except that the error will not necessarily be correct if there's more than one error. Where you have your
Louis
(Validation.Errors)[0].ErrorContent, you can add ,BindsDirectlyToSource="True" and it will always show
Nardozi
the first error and won't "lie to you" about errors that have already been corrected.
Alternatively, you could replace your ValidationToolTipTemplate with the following:
<ControlTemplate x:Key="ValidationToolTipTemplate" >
<Grid x:Name="root" Margin="5,0" RenderTransformOrigin="0,0" Opacity="0" >
<Grid.RenderTransform>
<TranslateTransform x:Name="xform" X="-25"/>
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="OpenStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition To="Open" GeneratedDuration="0:0:0.2">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="xform" Storyboard.TargetProperty="X" To="0"

Duration="0:0:0.2">
<DoubleAnimation.EasingFunction>
<BackEase Amplitude=".3" EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="root" Storyboard.TargetProperty="Opacity" To="1"

Duration="0:0:0.2"/>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Closed">
<Storyboard>

Duration="0"/>

</Storyboard>
</VisualState>
<VisualState x:Name="Open">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="xform" Storyboard.TargetProperty="X" To="0"

Duration="0"/>

Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Margin="4,4,-4,-4" Background="#052A2E31" CornerRadius="5"/>
<Border Background="#FFDC000C" CornerRadius="2"/>
<Border CornerRadius="2">
<ListBox MaxHeight="450" ScrollViewer.VerticalScrollBarVisibility="Auto"

ScrollViewer.HorizontalScrollBarVisibility="Disabled"
UseLayoutRounding="True"
Foreground="White" Background="Transparent" Margin="8,4,8,4" ItemsSource="{Binding
(Validation.Errors),BindsDirectlyToSource=True}" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock IsHitTestVisible="False" MaxWidth="240" Text="{Binding ErrorContent}"

TextWrapping="Wrap"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>
</Grid>
</ControlTemplate>
To learn wpf this was a very helpful site for me.

Priya
Thanks a lot
Thanks for your nice tutorial.

Beauty
The disadvantage is that you don't tell the needed namespaces. So I propose that you insert the list to
the begin of the tutorial.
Here are all needed namespaces:
---------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Globalization;
using System.Text.RegularExpressions;

using System.Windows.Controls;
using System.Windows.Data;
using System.Collections.ObjectModel;
using System.Windows.Markup;
---------------------
Hidden note:
Beauty
You have a mistype in the last parameter of this line:
---------------------
public override ValidationResult Validate(object value, CultureInfo ultureInfo)
---------------------
It's "cultureInfo" with "C" instead of "ultureInfo".
Problem:
Beauty
I tried to define <sys:String x:Key="emailRegex">
but got the error that the TYPE "sys:String" NOT FOUND.
After a while I found the solution:
---> ADD THIS to the <Window> tag:
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Value Converters
Home
Data Binding
Value Converters Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
ValueConverters
Custom Controls
Layout
Input
Data Binding
Styling
Localization
Interaction
Introduction
Resources
2D Graphics If you want to databind two properties that have incompatible types, you need a piece of code in between, that converts the value
from source to target type and back.
This piece of code is called ValueConverter. A value converter is a class, that implements the
3D Graphics simple interface IValueConverter with the two methods object Convert(object value) and object
ConvertBack(object value).
Animation
Multimedia
How to implement a ValueConverter
Documents
Windows 7
WPF already provides a few value converts, but you will soon need to implement your own converts. To do this, add a class to your
project and call it [SourceType]To[TargetType]Converter. This is a common naming for value converters. Make it public
Interoperability and implement the IValueConverter interface. That's all you need to do.
Performance
public class BoolToVisibilityConverter : IValueConverter
Expression Blend
{
Tools public object Convert(object value, Type targetType,
object parameter, CultureInfo culture)
UI Automation {
// Do the conversion from bool to visibility
}

public object ConvertBack(object value, Type targetType,
ValueConverters.html[2/16/2014 2:47:39 PM]


{
// Do the conversion from visibility to bool
}
}

How to use a ValueConverter in XAML

First thing you need to do is to map the namespace of your converter to a XAML namespace. Then you can create an instance of a
value converter in the resources of the view and give it a name. Then you can reference it by using {StaticResource}

<Window x:Class="VirtualControlDemo.Window1"
...
xmlns:l="clr-namespace:VirtualControlDemo"
...>
<Window.Resources>
<l:BoolToVisibilityConverter x:Key="converter" />
</Window.Resources>
<Grid>
<Button Visibility="{Binding HasFunction,
Converter={StaticResource converter}}" />
</Grid>
</Window>

Simplify the usage of ValueConvers

If you want to use a normal ValueConverter in XAML, you have to add an instance of it to the resources and reference it by using a
key. This is cumbersome, because and the key is typically just the name of the converter.
A simple and cool trick is to derive value converters from MarkupExtension. This way you can create and use it in the binding like
this: Text={Binding Time, Converter={x:MyConverter}}, and that is quite cool!

public abstract class BaseConverter : MarkupExtension
{
{
return this;
}
}

StringFormat Converter
The StringFormatConverter is a useful converter to control the format of an implicit string conversion of an object (e.g. if you bind a
DateTime to a TextBlock ).

[ValueConversion(typeof(object), typeof(string))]
public class StringFormatConverter : BaseConverter, IValueConverter
{

System.Globalization.CultureInfo culture)
{
string format = parameter as string;
if (!string.IsNullOrEmpty(format))
{
return string.Format(culture, format, value);
}
else
{
return value.ToString();
}

System.Globalization.CultureInfo culture)
{
return null;
}
}

► Tutorial ► Converters ► Photoshop CS4 ► Photoshop Action

Last modified: 2010-02-19 07:56:23

Show all comments
Thanks for these cool examples. It would help a lot if you would add the namespaces one has to add in order
Anon
to use your examples. Would save a lot of time
Great article
Farzad
just a typo:
valueConverter instead of ValueConvers
Maybe useful to mention how to use the parameter:
Ralph
ToolTip="{Binding Path=Hostname, Converter={x:StringFormatConverter}, ConverterParameter=Connected to

{0}}"
correct?

It would be helpful to mention that this converter already exists in System.Windows.Controls namespace in the
Gishu
Presentation assembly and can be directly used in XAML as
<BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter"/>
The fact that you used this as an example kind of lead me to believe that it doesn't exist as part of the
framework. It was the converter naming convention (that was new to me) helped me to find it in the Object
browser window.
Great post. Thanks!
How do I use the MarkupExtension, when the Converter is in another NameSpace than the consumer code?
Patrik
Thanks for sharing the Converter!
owsome
Bill
How to use Validators along with converters?

Bill1
Esto esta bien cabron

Jorge
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Behaviors
Home
Interaction
Behaviors Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Behaviors
Custom Controls
Layout
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics A simple Border can be dragged by mouse - because of an attached drag behavior.
3D Graphics
Animation
Introduction
Multimedia Behaviors are a new concept, introduced with Expression Blend in Version 3, to encapsulate pieces of functionality into a reusable
component. These components than can be attached to controls to give them an additional behavior.
Documents
The ideas behind behaviors are to give the interaction designer more flexibility to design complex user interactions without writing any
Windows 7
code.
Interoperability Example of a behaviors are drag&drop, input validation, pan and zoom, re-position of elements, etc... The list of possible behaviors is
Performance
very long.
Imaging an application that has a list of customers and the user can add some of them to subscriber lists. This interaction can be
Expression Blend
designed by providing an "Add" button next to each subscriber list. But if the interaction designer wants to add drag&drop
Tools functionality, he needs to discuss it with the developer and wait until the implementation is done. With behaviors he just drags a drag
and drop behavior on each list and we are done.
UI Automation
How to use behaviors in Expression Blend 3
Behaviors.html[2/16/2014 2:47:52 PM]

Using behaviors in Expression Blend is as simple as adding an element to the design surface. In the asset library you find a new secion
called "Behaviors". It lists all behaviors available within your project. Just grab one of these and drag it onto the element you want to
add this behavior and thats it.
The behavior appears as an child element in the visual tree. By clicking on it you can configure the properties of the behavior.
How does it work

To add behaviors to an element you need some kind of an extension point. This is an attached property called
Interaction.Behaviors.

This attached property holds the list of behaviors for that element and pass a reference to the element into the behavior. The
behavior than can register itself to events and property changes and so extend the functionality of the element.
The idea is simple, but very clever. They don't need any new infrastructure, they just reuse the existing one.

<Border Background="LightBlue" >
<e:Interaction.Behaviors>
<b:DragBehavior/>
</e:Interaction.Behaviors>
<TextBlock Text="Drag me around!" />
</Border>


How to implement your own behavior

The following example shows the implementation of the drag behavior we used above. Just derive from Behavior<T;gt; and
override the OnAttached() method.

public class DragBehavior : Behavior<UIElement>
{
private Point elementStartPosition;
private Point mouseStartPosition;
private TranslateTransform transform = new TranslateTransform();

protected override void OnAttached()
{
Window parent = Application.Current.MainWindow;
AssociatedObject.RenderTransform = transform;

AssociatedObject.MouseLeftButtonDown += (sender, e) =>
{
elementStartPosition = AssociatedObject.TranslatePoint( new Point(), parent
);
mouseStartPosition = e.GetPosition(parent);
AssociatedObject.CaptureMouse();
};

AssociatedObject.MouseLeftButtonUp += (sender, e) =>
{
AssociatedObject.ReleaseMouseCapture();
};

AssociatedObject.MouseMove += (sender, e) =>
{
Vector diff = e.GetPosition( parent ) - mouseStartPosition;
if (AssociatedObject.IsMouseCaptured)
{
transform.X = diff.X;
transform.Y = diff.Y;
}
};
}
}

List of some popular behaviors

Since its so cool and easy to create your own pice of interactivity, I am sure that we will find hunderts of behaviors available soon. I
tried to make a list of some popular ones.
Zoom Behavior
Glass Behavior
Shake Behavior
Transparency Behavior


Last modified: 2009-04-20 21:07:27

Show all comments
SWEET!!
Martin Ortiz
Learning WPF, and heard about behaviors.
Nice short / concise article..plus good list of additional behaviours.
SWEET!!
Martin Ortiz
SWEET!!
Martin Ortiz
hi..can u tellme how i can add additional behavoiurs like glass behaviour into my project.....
pooja
it works fine the first time I drag and drop the attached control. The other times it translates when the
Ever
mouse is down, before dragging.
(Spanish)
yep, what Ever said. some please explain how to solve this, was not able to figure that out yet. thanks in
martin
advance
I apprieciate your feedback but I cant explain it anymore in depth because I just copy and pasted this
C-MOSEY
from another website
Well I can. In this code, the transformation is set to the movement vector of the mouse cursor but
Edvald
should be set to (previous translation) + (movement vector):
<code>

mouseStartPosition = parent.PointToScreen(e.GetPosition(parent));
(AssociatedObject as TextBlock).Text = mouseStartPosition.ToString();
};
elementStartPosition.X = transform.X;
elementStartPosition.Y = transform.Y;
};
var parentPos = parent.PointToScreen(e.GetPosition(parent));
Vector diff = (parentPos - mouseStartPosition);
transform.X = elementStartPosition.X + diff.X;
transform.Y = elementStartPosition.Y + diff.Y;
(AssociatedObject as TextBlock).Text = diff.ToString();

}
};
</code>
Also, remove the "(AssociatedObject as TextBlock).Text = ..." lines as they are only for debugging :)
Edvald
Sorry about the spam, please delete the comments above, here's a cleaned up version:
Edvald
protected override void OnAttached()
mouseStartPosition = e.GetPosition(parent);
};
elementStartPosition.X = transform.X;
elementStartPosition.Y = transform.Y;

};
var mousePos = e.GetPosition(parent);
Vector diff = (mousePos - mouseStartPosition);
transform.X = elementStartPosition.X + diff.X;
transform.Y = elementStartPosition.Y + diff.Y;
};
Great Article
RItty
Great Article
RItty
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Styles
Home
Styling
Styles Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Introduction to Styles in WPF
Custom Controls
Layout
Introduction
Input
Imagine you want to create an application with a unique design. All your buttons should have an orange background and an italic
Data Binding font. Doing this the conventional way means that you have to set the Background and the FontStyle property on every single
button.
Styling
Localization
Interaction
Resources
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
2D Graphics
<Button Background="Orange" FontStyle="Italic"
3D Graphics Padding="8,4" Margin="4">Styles</Button>
Animation Padding="8,4" Margin="4">are</Button>
Multimedia
Padding="8,4" Margin="4">cool</Button>
Documents </StackPanel>

Windows 7
Interoperability
This code is neither maintainable nor short and clear. The solution for this problem are styles.
Performance
The concept of styles let you remove all properties values from the individual user interface elements and combine them into a style.
Expression Blend A style consists of a list of setters. If you apply this style to an element it sets all properties with the specified values. The idea is quite
similar to Cascading Styles Sheets (CSS) that we know from web development.
Tools
To make the style accessible to your controls you need to add it to the resources. Any control in WPF have a list of resources that is
UI Automation inherited to all controls beneath the visual tree. That's the reason why we need to specify a x:Key="myStyle" property that
defines a unique resource identifier.
To apply the style to a control we set the Style property to our style. To get it from the resources we use the {StaticResource
[resourceKey]} markup extension.
Styles.html[2/16/2014 2:48:06 PM]


<Window>
<Window.Resources>
<Style x:Key="myStyle" TargetType="Button">
<Setter Property="Background" Value="Orange" />
<Setter Property="FontStyle" Value="Italic" />
<Setter Property="Padding" Value="8,4" />
<Setter Property="Margin" Value="4" />
</Style>
</Window.Resources>

<Button Style="{StaticResource myStyle}">Styles</Button>
<Button Style="{StaticResource myStyle}">are</Button>
<Button Style="{StaticResource myStyle}">cool</Button>
</StackPanel>
</Window>

What we have achieved now is
A maintainable code base

Removed the redundancy
Change the appearance of a set of controls from a single point
Possibility to swap the styles at runtime.
Style inheritance
A style in WPF can base on another style. This allows you to specify a base style that sets common properties and derive from it for
specialized controls.

<Style x:Key="baseStyle">
<Setter Property="FontSize" Value="12" />
</Style>

<Style x:Key="boldStyle" BasedOn="{StaticResource baseStyle}">
<Setter Property="FontWeight" Value="Bold" />
</Style>

► Tutorial ► Adobe InDesign ► Photoshop CS4 ► InDesign CS3

Last modified: 2010-02-08 17:55:54

Show all comments
Styles.html[2/16/2014 2:48:06 PM]

Graciassss!
Ricardo
What a complete tutorial.. one stop reference for WPF..

joe
GREAT JOB... thx.
<Window.Resources>
Ashish J
<Setter Property="Background" Value="Red" />
</Style>
<Style x:Key="btnStyle" TargetType="Button">
<Setter Property="Background" Value="White" />

<Setter Property="Height" Value="50" />
<Setter Property="Width" Value="60"/>
</Style>
<Style x:Key="btnLast" TargetType="Button">
<Setter Property="Background" Value="Yellow"/>
<Setter Property="FontStyle" Value="Italic"/>
<Setter Property="Width" Value="100" />
</Style>
</Window.Resources>
<Button Style="{StaticResource btnStyle}">are</Button>
<Button Style="{StaticResource btnLast}" >cool</Button>
</StackPanel>
<Window.Resources>
Ashish J
<Setter Property="Background" Value="Red" />
</Style>
<Style x:Key="btnStyle" TargetType="Button">
<Setter Property="Background" Value="White" />

<Setter Property="Height" Value="50" />
<Setter Property="Width" Value="60"/>
</Style>
<Style x:Key="btnLast" TargetType="Button">
<Setter Property="Background" Value="Yellow"/>
Styles.html[2/16/2014 2:48:06 PM]

<Setter Property="FontStyle" Value="Italic"/>
<Setter Property="Width" Value="100" />
</Style>
</Window.Resources>
<Button Style="{StaticResource btnStyle}">are</Button>
<Button Style="{StaticResource btnLast}" >cool</Button>
</StackPanel>
Superb tutorial..
Ravikumar...
I like this tutorial, by this only i came to know how to use style in the WPF application. Thanks a lot
Asha.MP
hello,
sanindra...
i have studied your whole artical,due to your artical today i can say this i can deevelop WPF application
also.i am very -very thanks full to you.I have just develop one application in WPF(just like one inventory
manegment system) and i need to deploy that application to client,can u help me out to make installer
of this application.I have database in sql server 2005, and also i am generating Crystal reports.
thanks
Hi sir, i have small doubt.Can i add css to wpf applications? and can i add styles for windows. means in
shankar
ResourcesDictionary?
Very nice
Rajesh
Wonderful straight forward and easy tutorial. And previous comments assisted me as well to get it
ShoneenJvV
working first time!
Thank you so much!
How to make themes and make them selected at runtime?
Sajjad...
is it possible to only change the name of theme and styles get applied?
@Ashsish, How you created buttons in the comments?
Rajesh
Hi, I have applied Styles to all buttons to have a certain heights, margins, but buttons inside my
YH
Styles.html[2/16/2014 2:48:06 PM]

dateTimePicker and Datagrid are displaced, is there a way to exclude buttons that are inside such
controls ?
Thanks
Really good explanation .keep it up.

A
Thanks!
Anon
<StackPanel Orientation=\"Horizontal\" VerticalAlignment=\"Top\">
avi
<Button Background=\"Orange\" FontStyle=\"Italic\"
Padding=\"8,4\" Margin=\"4\">Styles</Button>

Padding=\"8,4\" Margin=\"4\">are</Button>

Padding=\"8,4\" Margin=\"4\">cool</Button>
</StackPanel>
The disadvantage is that you cannot make a style if you don't know what style it is based on (if it is
a
dynamic). Maybe you could set it in code.
<Window>
<Window.Resources>
</Style>
</Window.Resources>
<Button Style="{StaticResource myStyle}">are</Button>
<Button Style="{StaticResource myStyle}">cool</Button>
</StackPanel>
</Window>
<input type=button onclick='Styles are great' value='WoW' />

Atif
fsfsfdfdgd
Padding="8,4" Margin="4">Styles</Button>

Padding="8,4" Margin="4">are</Button>
Styles.html[2/16/2014 2:48:06 PM]

</StackPanel>
Just amazing! Thanks!

Vasu
Clear and helpfull. Thank you.

Aykut
Clear and helpfull. Thank you.

Aykut
bri
Padding="8,4" Margin="4">Styles</Button>

Padding="8,4" Margin="4">are</Button>

</StackPanel>
How to use styles defined in App.xaml ?

asd
Aly Thank's..Great... :)
Sangadji
Name
E-Mail (optional)
Comment
Post Comment
Styles.html[2/16/2014 2:48:06 PM]

WPF Tutorial | Control Templates
Home
Styling
Control Templates Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Control Templates
Custom Controls
Layout
Introduction
Input
Controls in WPF are separated into logic, that defines the states, events and properties and template, that defines the visual
Data Binding appearance of the control. The wireup between the logic and the template is done by DataBinding.
Styling Each control has a default template. This gives the control a basic appearance. The default template is typically shipped together with
the control and available for all common windows themes. It is by convention wrapped into a style, that is identified by value of the
Localization
DefaultStyleKey property that every control has.
Interaction
The template is defined by a dependency property called Template. By setting this property to another instance of a control
Resources template, you can completely replace the appearance (visual tree) of a control.
2D Graphics
3D Graphics
Animation
Multimedia
Documents
Windows 7
Interoperability
Performance
Expression Blend
Tools
UI Automation
The control template is often included in a style that contains other property settings. The following code sample shows a simple
control template for a button with an ellipse shape.
Templates.html[2/16/2014 2:48:43 PM]


<Style x:Key="DialogButtonStyle" TargetType="Button">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="{TemplateBinding Background}"
Stroke="{TemplateBinding BorderBrush}"/>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<Button Style="{StaticResource DialogButtonStyle}" />

A Button without and with a custom control template
ContentPresenter
When you create a custom control template and you want to define a placeholder that renders the content, you can use the
ContentPresenter. By default it adds the content of the Content property to the visual tree of the template. To display the
content of another property you can set the ContentSource to the name of the property you like.
Triggers
{RelativeSource TemplatedParent} not working in DataTriggers of a ControlTemplate
If you want to bind to a property of a property on your control like Data.IsLoaded you cannot use a normal Trigger, since it does
not support this notation, you have to use a DataTrigger.
But when you are using a DataTrigger, with {RelativeSource TemplatedParent} it will not work. The reason is, that
TemplatedParent can only be used within the ControlTemplate. It is not working in the Trigger section. You have to use the
{RelativeSource Self} instead.

What if a Binding working or a Setter is not applied when using a control template
There is something you need to know when setting a value of an element within a control template: The value does have a lower
precendence as the local value! So if you are setting the local value in the constructor of the contained element, you cannot override
it within the controltemplate. But if you use the element directly in your view, it will work. So be aware of this behavior!.

Here you can find more information about DependencyProperty value precendence: Dependency Property Value Precedence
► Tutorial ► Dreamweaver CS4 ► WebPage Templates ► Design Templates

Last modified: 2010-04-27 16:48:31

Show all comments
you people I really not getting why you are congrat this guy ! This site is uglying explaning WPF ! just
ouais
good to run away and find real explanation from programmer !
seems really interesting thanks for your efforts to make this material available for us
i
Nice one
Arjun
Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}"
Asha.MP
in the above properties we can specify the colors also, what is the meaning of TemplateBinding in the
above property??
nice...
siva
Great Article , thanks for your efforts :)

Praveen
very nice.
bala
good one

sri
if u dont mind , can u thrown some light on visualstatemanager as well.. ?

prassanth
Many many thanks for this article...

Ankit
Gurpreet Great explaination ! thanks

Singh
Thanks buddy good articles
Tejas
Janynne Great explanation and i liked the figure, so clear!

Gomes
These comments are laughably fake.

anon
Thanks, Nice explanation

Paras
Great. And where do i have to write the style-tag down, now?

Anon
So Clear very nicely explained

Mayank
please show, how to focus and enable the elliptic button

jones
So Clear nice
bm
Thank you! This tutorial is awesome!

Dmitry
I want to create Template for TextBox. How can I aceess RelativeSource TEXT property.
Alibaba

@Alibaba: If I am understanding you correctly, you would not use RelativeSource to bind to the text
stigma
property. You would use "{TemplateBinding Text}". For example:
<TextBlock Text="{TemplateBinding Text}"/>
Using a TextBox inside a TextBox ControlTemplate, however, I have found to be very unhelpful. Try
using: <ScrollViewer x:Name="PART_ContentHost"/> If you name the ScrollViewer
exactly as I have here, the text will be bound to it. No other work required.
Life Saver :)
Ziad
Machi awesome article...Thanks !!!

johnson
Viva linux!!
Gonzalo
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Data Templates
Home
Styling
Data Templates Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Data Templates
Custom Controls
Layout
Introduction
Input
Data Template are a similar concept as Control Templates. They give you a very flexible and powerful solution to replace the visual
Data Binding appearance of a data item in a control like ListBox, ComboBox or ListView. In my opinion this is one of the key success factory of
WPF.
Styling
If you don't specify a data template, WPF takes the default template that is just a TextBlock. If you bind complex objects to the control,
Localization
it just calls ToString() on it. Within a DataTemplate, the DataContext is set the data object. So you can easily bind against the data
Interaction context to display various members of your data object
Resources
2D Graphics
DataTemplates in Action: Building a simple PropertyGrid
3D Graphics Whereas it was really hard to display complex data in a ListBox with WinForms, its super easy with WPF. The following example shows
a ListBox with a list of DependencyPropertyInfo instances bound to it. Without a DataTemplate you just see the result of calling
Animation
ToString() on the object. With the data template we see the name of the property and a TextBox that even allows us to edit the
Multimedia value.
Documents

Windows 7
Interoperability
Performance
Expression Blend
Tools
UI Automation
DataTemplates.html[2/16/2014 2:48:58 PM]



<ListBox ItemsSource="{Binding}" />


<ListBox ItemsSource="{Binding}" BorderBrush="Transparent"
Grid.IsSharedSizeScope="True"
HorizontalContentAlignment="Stretch">
<DataTemplate>
<Grid Margin="4">
<ColumnDefinition Width="Auto" SharedSizeGroup="Key" />
<ColumnDefinition Width="*" />
<TextBlock Text="{Binding Name}" FontWeight="Bold" />
<TextBox Grid.Column="1" Text="{Binding Value }" />
</Grid>
</DataTemplate>
</ListBox>

How to use a DataTemplateSelector to switch the Template depending on the data

Our property grid looks nice so far, but it would be much more usable if we could switch the editor depending on the type of the
property.
The simplest way to do this is to use a DataTemplateSelector. The DataTemplateSelector has a single method to override:
SelectTemplate(object item, DependencyObject container). In this method we decide on the provided item
which DataTemplate to choose.
The following exmple shows an DataTemplateSelector that decides between tree data templates:

public class PropertyDataTemplateSelector : DataTemplateSelector
{
public DataTemplate DefaultnDataTemplate { get; set; }
public DataTemplate BooleanDataTemplate { get; set; }
public DataTemplate EnumDataTemplate { get; set; }

public override DataTemplate SelectTemplate(object item,
DependencyObject container)
{
DependencyPropertyInfo dpi = item as DependencyPropertyInfo;
if (dpi.PropertyType == typeof(bool))
{
return BooleanDataTemplate;
}
if (dpi.PropertyType.IsEnum)
{
return EnumDataTemplate;
}

return DefaultnDataTemplate;
}

}

<Window x:Class="DataTemplates.Window1"
xmlns:l="clr-namespace:DataTemplates"
xmlns:sys="clr-namespace:System;assembly=mscorlib">

<Window.Resources>


<DataTemplate x:Key="DefaultDataTemplate">
...
</DataTemplate>


<DataTemplate x:Key="BooleanDataTemplate">
...
</DataTemplate>


<DataTemplate x:Key="EnumDataTemplate">
...
</DataTemplate>


<l:PropertyDataTemplateSelector x:Key="templateSelector"
DefaultnDataTemplate="{StaticResource DefaultDataTemplate}"
BooleanDataTemplate="{StaticResource BooleanDataTemplate}"
EnumDataTemplate="{StaticResource EnumDataTemplate}"/>
</Window.Resources>
<Grid>
<ListBox ItemsSource="{Binding}" Grid.IsSharedSizeScope="True"
HorizontalContentAlignment="Stretch"
ItemTemplateSelector="{StaticResource templateSelector}"/>
</Grid>
</Window>

How to react to IsSelected in the DataTemplate

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.

<Border x:Name="border" Height="50">
...
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource=
{RelativeSource Mode=FindAncestor, AncestorType=
{x:Type ListBoxItem}},Path=IsSelected}" Value="True">
<Setter TargetName="border" Property="Height" Value="100"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>


Last modified: 2009-10-08 16:50:58

Show all comments
I think I just decided to learn WPF...

Stephen
Hi Christian,
sathya
Thank you very much, i got very good basics of WPF, it is really helpfull, i really appreciate your
work.Thank you, could you give me guideline how to study WCF bascis, you can send to my mail id
sathyajan1@gmail.com. thank you again, i appreciate your work.
Very helpful article and I would further appreciate if you give the UI prinout before and after the
Yadav
application of the template. Thank you.
how can i use TreeView control to show SQL-database data in hierarchical view using c sharp.. please
ward
help me here because am working on windows from application project . iit's my graduation project.
This is a poor example. Where is the code behind? Where is the binding? What is this magic data you are
Confused
adding to the list view?
Confused
Confused

WOW
tim
Mr Confused,
danielwu
Before you make conclusion, you'd better finish the whole article and then you will find sample solution
for download in the end...
Its really very good information about data templates.

Shankarnag
Great article, just what I was looking for. Great web site.
Nikola
Nice
Bala
Worst discussion...lost interest in WPF

Hemanath
No Hemanath...It is not like that...It is really worth reading...WPF rocks...

Bala
Thank you, this really saved me a lot of time plowing though Hubers WPF Handbook. It is a worthy read,
Salem5
but I need a few results now.
I downloaded the sample and all it has it a bunch of checkboxes and textbox, i don't see any
KMC
datatemplaing in the working...did you upload the wrote source codes?
Wow, I worked for a very long time on how to put together a dynamic property editor, and you make it
Jamie
look so easy. The key was Grid.IsSharedSizeScope and ColumnDefinition.SharedSizeGroup. Well done
and thanks!
good chaka...
jhon
truely awesome, I have been looking for this functionality for a long time, I will put it into test and come
unruledboy
back to you

Hi, I tried you method, all the text content are not rendered(the TextBlock showing nothing, even I place a
unruledboy
button and bind Name for the content, still nothing). I am sure there is data, and before using data
template, it's showing.
<tree:RowExpander />
<CheckBox IsChecked="{Binding Selected}" />
<Image Height="16" Margin="2, 0, 5, 0" Source="{Binding Converter=

{StaticResource TaskImageConverter}}" Width="16" />
<TextBlock Style="{StaticResource TaskItemStyle}" Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
<my:ResultCellTemplateSelector x:Key="templateSelector"
DefaultDataTemplate="{StaticResource DefaultDataTemplate}"/>
<Grid>
<tree:TreeList x:Name="tlResults">
<tree:TreeList.View>
<GridView>
<GridView.Columns>
<GridViewColumn Width="500" Header="Name"

CellTemplateSelector="{StaticResource templateSelector}">
</GridViewColumn>
<GridViewColumn Header="Size" Width="90" DisplayMemberBinding="

{Binding Converter={StaticResource FileSizeConverter}}" />
</GridView.Columns>
</GridView>
</tree:TreeList.View>
</tree:TreeList>
</Grid>
sorry, it's my mistake, I used the template from another control. It's working fine now, thank you very
unruledboy
much!
Hi,
Wes
This is the best PropertyGrid Tutorial I found. The best part is,
it also have code to select DataTemplate depend on DataType of each class property: bool use
BooleanDataTemplate which is a checkbox; Enum use EnumDataTemplate which is a combobox.
I also like go a little further, add custom type: lookup, which will show as dropdown list, but the value list
come from database. e.g.
property name: car manufacturere, value come from "SELECT LOOKUP_VALUE FROM LOOKUP
WHERE LOOKUP_KEY = 'CAR_MFG'", which will return a list like: Toyota, Ford, Nissan, Honda, VW,
BMW, ...
If I have > 1 lookup properties, how I can speciafy them? LookupDataTemplate1,
LookupDataTemplate2, ..., then how to specify them in XAML Resources. and all DataTemplate are pre-
defined in XAML, how I can do it in this case.
similar to EnumToListConverter, How I can create LookupmToListConverter1, LookupmToListConverter2?
Thank you,
I run example solution with VS 2010 and .NET 4. It starts but when scrolling I am getting following error:
Mikhail
'' is not a valid value for property 'ClickMode'.
Same for 'FlowDirection', 'HorizontalAlignment, ecc.
@Mikhail: I get this Error while starting.
jones
Try this with the Property DependencyPropertyInfo.Value in DependencyPropertyInfo.cs:
set { try { _element.SetValue (_descriptor.DependencyProperty, value); } catch { } }
I suppose the error occures, because the Comboboxes have no item selected...
Really nice articles

Ajay
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial |

Home
WPF Inspector Article not found!

Getting started
Fundamentals
User Experience
Patterns
Controls
Custom Controls
Layout
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents
Windows 7
Interoperability
Performance
Expression Blend
Tools
UI Automation
404.html[2/16/2014 2:49:10 PM]

Home
WPF Inspector Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
WPF Inspector
Custom Controls
Layout
NEW: XAML Inspector - cross platform visual Debugging
Input
Have a look at XAML inspector. The successor of WPF Inspector. It brings all the features of WPF Inspector to all XAML platofrms
Data Binding (WPF, Silveright, WinRT and Windows Phone).
Styling Visit project page: www.xamlinspector.com
Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents
Windows 7
Interoperability
Performance
Expression Blend 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,
Tools
watch the data context, debug triggers, trace styles and much more. Since March 2011, WPF Inspector is open source and available
UI Automation on CodePlex.
Download WPF Inspector from CodePlex
inspector-2.html[2/16/2014 2:49:46 PM]

Last modified: 2013-10-17 13:47:17

Show all comments
Christian,
Vins
I can't get it to work.. Version 0.9.5 gives me error "Object Reference Not Set" when I click Inspect
after selecting my wpf application.
Any clue?
Thanks!
Would be very appreciated to see it working on WPF 4.0 coz we haven't been using 3.5 for a long
xusan
and may be would not work on that version soon, any ways thank you for sharing this wonderfull tool
same as the one above me. i get this error.

shemesh
Very usefull tool I used under Windows 7 x64 and Visual Studio 2008
Tony
since I work with Visual Studio 2010, it's no longer working
if you release the source code, we could help you improve this great tool
(note : Snoop is also a good tool but it doesn't work too)
Agree with the above. We could really help you improve this great tool (and probably make it work
Mel
for a wider audience).
I've been trying to use it in my win7 VS2010 box to no avail. it works on my winxp VS2008 though.
@Tony:
Cory Plotts
Snoop does work for WPF 3.5/4.0 and x86/x64 ... just make sure that you have the latest version at
http://snoopwpf.codeplex.com.
If you have grabbed the version from Pete Blois' site ... that one ONLY works for WPF 3.5 and x86.
@Cory Plotts
Tony
The latest version works... sometimes... (many times I can't snoop into the application, the "Snoop this
application" button doesn't do anything, the "Magnify" button is working)
and when I successfully Snoop the application, Snoop is stuck at the ContentPresenter of the main

window, I can't "snoop" into my injected view (my project use CAB/SCSF)
hallo,,,,i jhon IT student, can u pls help me to develop my thesis,
jhon
using wpf, pls view me some sample or give me some sites that can
help me in developing may programm..thanks..
nice work
Rohatash
Great work with this new release!
Borislav Ivanov
I hit a small problem:
I have two running 2 WPF applicaions and choose to attach to one of them, but WPF Inspector
attaches to the other one:
- .NET 4.0 64-bit (this is Metro Twit)
- .NET 3.0 32-bit (this is my app, that I cannot attach to)
If I stop the Metro Twit, I can succesfully attach to my app.
I just realized that if I put a disabled button to register the application unless you enter a valid serial,
edgar
you can enable that button easy. 0_o
Great application!
It is very usefull for me..
suresh
I learn wpf basic easily..this is great.
ramasamy
Hi Borislav,
Christian
the problem has been fixed in version 0.9.8. You can download it directly from codeplex.
Moser
Really a gud site for WPF learners..

Aly
It's great site who are working on WPF for the first time .
Debashish...
It's good site for Beginner who are working on WPF

Girish K
Mole is another great way to visualize WPF apps, they just put out Mole 2010 and it's really awesome
Jane
for what I'm doing with WPF at work.

www.molosoft.com
Very handy tool ,,, more features than snoop....

tauqir
One Suggestion : The Main Inspector should not exit when we close the application we are inspecting.
We have to rerun inspector every time we want to inspect.
Hope to see this in future release.
Hello Christian.
Tobias
your Tool is very nice.
But, it is not possible to read complete Text of Errors, if they are very long. It is not possible to scroll,
or rightclick to copy text to clipboard.
It would be very nice and good to have this feature.
Greets
Tobi
Hi,
Rohit
WPF Inspector is an awesome stuff for a wpf developer. But i'm facing an issue with it.
can you provide any work around for this - http://stackoverflow.com/questions/5831354/cannot-add-

geometrydrawing-to-drawinggroup
Thanks,
Sir please give demo video how to work on this? i am not able to know this one.Its showing empty.
shankar
Very promissins concept, I've been looking for something like this for some time.
Thomaz
But I'm having trouble attaching it to my application. Seems like no matter which application I select in
the Attach box WPF inspector always attaches to itself.
Good
Sai Govind.N.K
... Show de Bola!!

Rodrigo
Really helpful resource

Tamas

Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Instruction Videos
Home
Getting started
Instruction Videos Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Videos about WPF
Custom Controls
Layout
General
Input
WPF Roadmap (PDC 2008)
Data Binding Windows Presentation Foundation 4 Plumbing and Internals
Styling
Localization Multimedia
Interaction
How to use text-to-speech in WPF
Resources
2D Graphics
3D Graphics

Animation
Last modified: 2010-04-06 17:28:20
Multimedia Copyright (c) by Christian Moser, 2011.
Documents
Windows 7
Interoperability
Show all comments
Performance
Expression Blend
it's very simple to learn wpf. i like it.
Tools Vikas Rana
UI Automation
Merin Wow! Super presentations...WPF rocks...

Nakarmi
Videos.html[2/16/2014 2:49:56 PM]

WPF Tutorial | Instruction Videos
Nice..!
pradeep
I just start study wpf first time

sothea
very nice..
Naik
Great Videos............
uday
All those comments are fake. The wording is to obvious and besides... why should anyone rate a site
Andreas
which contains only two links rate as "Super presentations...". Come on!
Nice article !
Ajay Jamwal
@Andreas have u watched the videos mentioned in the links. 2nd link contains a video that takes an
Salman
hour of presentation. :)
Name
E-Mail (optional)
Comment
Post Comment
Videos.html[2/16/2014 2:49:56 PM]

WPF Tutorial | What's new in XAML in .NET 4.0
Home
Fundamentals
What's new in XAML in .NET 4.0 Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
What's new in XAML of .NET 4.0
Custom Controls
Easy Object References with {x:Reference}
Layout
Built-in Types
Input
Generics in XAML with x:TypeArguments
Data Binding
Support for Arbitrary Dictionary Keys
Styling
Use of Non-Default Constructors with x:Arguments
Localization
Use of Static Factory Methods with x:FactoryMethod
Interaction
Resources
With .NET 4.0 Microsoft will bring up a improved version of XAML. This arcitle shows you the language enhancements they made.
2D Graphics
3D Graphics
Easy Object References with {x:Reference}
Animation
If you want to create an object reference today you need to do a databinding and declare the source with an ElementName. In XAML
Multimedia
2009 you can use the new {x:Reference} markup extension
Documents

Windows 7
<Label Target="{Binding ElementName=firstName}">FirstName</Label>
Interoperability <TextBox x:Name="firstName" />

Performance

Expression Blend <Label Target="{x:Reference firstName}">FirstName</Label>
<TextBox x:Name="firstName" />
Tools

UI Automation
Built-in Types
If you want to add objects of simple types like string or double to a resource dictionary today you need to map the needed clr-
XAML2009.html[2/16/2014 2:50:09 PM]

namespaces to an XML namespaces. In XAML 2009 we a lot of simple types that are included in the XAML language.


<sys:String xmlns:sys="clr-namespace:System;assembly=mscorlib >Test</sys:String>


<x:String>Test</x:String>

The following types are included into the XAML language:
<x:Object/>
<x:Boolean/>
<x:Char/>
<x:String/>
<x:Decimal/>
<x:Single/>
<x:Double/>
<x:Int16/>
<x:Int32/>
<x:Int64/>
<x:TimeSpan/>
<x:Uri/>
<x:Byte/>
<x:Array/>
<x:List/>
<x:Dictionary/>
Generics in XAML with x:TypeArguments

If you want to use an ObservableCollection<Employee> in XAML you need to create a type that derives from
ObservableCollection because you cannot declare it in XAML. With XAML 2009 you can use the x:TypeArguments
attribute to define the type of a generic type.


class EmployeeCollection : ObservableCollection<Employee>
{
}

<l:EmployeeCollection>
<l:Employee FirstName="John" Name="Doe" />
<l:Employee FirstName="Tim" Name="Smith" />
</lEmployeeCollection>


<ObservableCollection x:TypeArguments="Employee">
<l:Employee FirstName="John" Name="Doe" />
<l:Employee FirstName="Tim" Name="Smith" />
</ObservableCollection />

Support for Arbitrary Dictionary Keys

XAML2009.html[2/16/2014 2:50:09 PM]
In XAML 2006 all explicit x:Key value were threated as strings. In XAML 2009 you can define any type of key you like by writing the
key in ElementSyntax.


<StreamGeometry x:Key="CheckGeometry">M 0 0 L 12 8 l 9 12 z</StreamGeometry>


<StreamGeometry>M 0 0 L 12 8 l 9 12 z
<x:Key><x:Double>10.0</x:Double></x:Key>
</StreamGeometry>

Use of Non-Default Constructors with x:Arguments

In XAML 2006 objects must have a public default constructor to use them. In XAML 2009 you can pass constructor arguments by
using the x:Arguments syntax.


<DateTime>00:00:00.0000100</DateTime>


<DateTime>
<x:Arguments>
<x:Int64>100</x:Int64>
</x:Arguments>
</DateTime>

Use of Static Factory Methods with x:FactoryMethod

When you have a type that has no public constructor but a static factory method you had to create that type in code in XAML 2006.
With XAML 2009 you can use the x:FactoryMethodx:Arguments attribute to pass the argument values.


Guid id = Guid.NewGuid();


<Guid x:FactoryMethod="Guid.NewGuid" />


Last modified: 2009-11-01 10:52:07

Show all comments
XAML2009.html[2/16/2014 2:50:09 PM]

I also Didn't got the topic !!!! for what it is

Asif
Nice Article
pallavi
se
lll
yak................dirty
rahul
uper kiye gye sare comment bakwaas hain

sp
Hi Very nice article, i am using VS2010 C# expression Edition
Kiran
When i am using this markup
<Label Target="{x:Reference firstName}">FirstName</Label>
<TextBox x:Name="firstName" />
i got warning "Service Provider is Missing the INameResolver Service"
Any idea how to resolve this???
Here is the explanation from Adam Nathan's WPF 4 unleashed book:
John
"The x:Reference markup extension is often mistakenly associated with the XAML2009
features that can only be used from loose XAML at the time of this writing. Although
x:Reference is a new feature in WPF 4, it can be used from XAML2006 just fine as long as your project is
targeting version 4 or later of the .NET Framework.
One glitch is that the XAML designer in Visual Studio 2010 doesnâ��t properly handle x:Reference, so
it gives the following design-time error that you can safely ignore:
Service provider is missing the INameResolver service"
nice features...nice explanation

Harish
Above Example and Definition is very good & sort and sweet.
vishal
Really nice Explanations.....
basavaprasad
XAML2009.html[2/16/2014 2:50:09 PM]

didnt understand any thing.please explain in detail with examples..

sohan
thank you for mentioning, but VS2010 doesnt offer a namespace url like
orhor
"http://schemas.microsoft.com/winfx/2009/xaml"
or where should I set the version?
This still does not work in WPF and VS 2010 !

DNM
This still does not work with WPF and VS 2010 !!!
DNM
mmmm
kkk
Good for beginer...

Anup
please provide the examples along with the syntax.you can provide the link to the example.
kamlendra
It's very nice feature.. Keep it up...It's very useful for beginer.
Mohit Jethva
Good one
Deepthi
Tim http://msdn.microsoft.com/en-us/library/ee792002.aspx
Valentine
Hi I think this site is useful, but it will be more useful if there are more examples to explain the
Raj
concepts,as we are beginners. Thanks in advance.
Rajeev I did not get the topic.Can you please explain it little bit more.
Kumar
XAML2009.html[2/16/2014 2:50:09 PM]

hai... i need eg.,

anand
Name
E-Mail (optional)
Comment
Post Comment
XAML2009.html[2/16/2014 2:50:09 PM]

WPF Tutorial | Hard- and Softwarerequirements
Home
Fundamentals
Hard- and Softwarerequirements Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Minimal Hardware and Software Requirements for WPF
Custom Controls
Layout
Software Requirements
Input
To run WPF on your machine you need to have at least the following software installed:
Data Binding
Windows XP with Service Pack 2 or higher
Styling
.NET Framework 3.0 or higher
Localization
Interaction Hardware requirements

Resources
There are no minimum hardware requirements for WPF. All the requirements comes from the complexity and effects used in your
2D Graphics application.
3D Graphics You can take advantage of hardware acceleration when your graphics processor supports DirectX 9 or higher. I would recommend to
look for a graphicadapter for which the vendor supports a WDDM driver.
Animation
Please note that some effects cannot be done in hardware rendering under Windows XP. For exmaple Windows with
Multimedia AllowsTransparency set to True and the use of BitmapEffects.
Documents
How to specify minimal hardware requirements
Windows 7
A simple way to specify minimal hardware requirements to ensure that your client has a good experience is the Premium Ready label
Interoperability
from Microsoft. It ensures that the machine has at least the following equipment:
Performance
> 800MHz Prozessor
Expression Blend 512 MBytes RAM
Tools A DirectX 9 capable graphics adapter
UI Automation

Requirements.html[2/16/2014 2:50:45 PM]

Last modified: 2010-01-29 17:25:15
Show all comments
itz fabricated
baba
you can't do anything with 800 MHz, 512 RAM....
Tom
Thats no way
@Tom
humanblade
actually you'd be surprised what you can do. in fact you'd be surprised what your grandmother could
do. people who aren't playing games and compiling 100K+ codebases tend to do fine with systems like
these. then again, i've known people to upgrade b/c they needed more memory in order for flash
plugins not to bog down, allowing them to play farmville and have 3 youtube pages open... :)
i think christian has mentioned such low requirements only for beginners who wsih to learn the
bindu
technology basics but not for real time implementations
nice
golden
CHRISTIAN
eeekkk, you really should reference any websites you copy from. Thats someones elses knowledge
Shane
Christian Why yu haven't put your picture

Raaa
Shane this is not some kind of knowledge. .
Rajesh
These are requirement recommended by seller.
The minimal hardware requirements for wpf application depends on the Media effects & codings
Lahiru
.The application should test with the deployed environment
Jayalath

nice article but mention the requirement for a more robust graphics and animations too....
Manvendra
Shane: also it's obvious that's some troll posting in the comment section.
Gunnar
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | WPF Troubleshooting
Home
Fundamentals
WPF Troubleshooting Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
WPF Troubleshooting
Custom Controls
During my time as a consultant I noticed, that there were typical traps in WPF, where developers can loose a lot of time. So I
Layout decided to make a hitlist of the most common mistakes and solutions how to resolve them. I hope this helps.
Input
Data Binding Layout

Styling
Scrollbar is not active or visible
Localization If your control is within a vertical stackpanel, it gives the control infinite height to layout. Consider replacing the
stackpanel by a dockpanel.
Interaction
Resources I created a data template and set HorizontalAlignment to Stretch but the item is not stretched
Set the HorizontalContentAlignment on the list to Stretch
2D Graphics
3D Graphics
DataBinding
Animation
Multimedia I changed a value, but the binding is not reflecting my changes

Check the output window in VisualStudio, if there are any binding errors.
Documents
Does your data support INotifyPropertyChanged?
Windows 7 Just firing a PropertyChanged event without changing the data does not work. Because the binding checks if
oldvalue!=newvalue
Interoperability
Performance
Performance
Expression Blend
My list of items takes too long to render
Tools
Your list is not virtualized. This means, all items will be generated, even if they are not visible. To avoid this check
UI Automation the following points:
ScrollViewer.CanContentScrol must be set to False
Grouping must be disabled
You replaced the ItemsPanel by one that does not support virtualization
Troubleshooter.html[2/16/2014 2:51:04 PM]

You are using a too complex data template.
Animations cause a high CPU load.

WPF cannot use hardware acceleration and does software rendering. This can be because of the following points:
You have set AllowTransparency to True on your window.
You are using legacy BitmapEffects instead of fast pixel shaders (Effects).
Your graphics adapter or driver does not support DirectX
Custom Controls
I created a custom control, but the template it not showing
Check if you have overriden the metadata of the DefaultStyleKeyProperty and set it to your type.
Check if your template is surrounded by a style and both have the right TargetType
Check if the resource dictionary that contains the default style is loaded
I use {TemplateBinding} in my ControlTemplate, but is not working

In most cases you have to replace {TemplateBinding Property} by {Binding Property
RelativeSource={RelativeSource TemplatedParent}}
You can only use TemplateBinding within the content of your control template. It will not work anywhere else!
If you want to access a parent property in the trigger, you have to use a normal binding, with relative source Self.
TemplateBinding works only within the VisualTree of the template. You cannot use it on items that are only in the
logical tree. Neighter on Freezables or to do two-way binding.
Last modified: 2011-03-23 07:02:53

Show all comments
Awesome! Thanks a lot

Amit
Harendra Awesome! thanks for valuable article.

kumar
Hi , Thanks .. bat give me a picture of resulta

AbDoU-VB
Addressed the features in the simplest way - Great

James

This is great stuff.. i will take a print out of this.

Tom
Good
Helix
how to work with wpf

vinoth kumar
Give more senario

Sushil
Great work...!
Qutub
Great work...!
Qutub
Great work...!
Qutub
Great work.!
subramani
THX!!!! u saved me HOURS!

sterennlt
Could u pls put more info in?

Dimas
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Dependency Injection
Home
Patterns
Dependency Injection Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
A reference architecture for large WPF projects
Custom Controls
Layout
Introduction
Input
Choosing an adequate architecture is crucial for the success of a software project. You can have the best concepts, if your architecture
Data Binding does not perform, the user will have bad experiences while waiting for the application to load. Also aspects like it's robustness,
maintainability or testability are important to address.
Styling
WPF provides a powerful databinding framework. If we could take advantage of this by using the MVVM pattern and decouple our
Localization
views by dependency injection, we can build a powerful scaleable architecture.
Interaction
These are the key components or patterns we want to use:
Resources
WPF DataBinding
2D Graphics Model-View-ViewModel pattern
Dependency Container (e.g. Unity)
3D Graphics
Actions from the System.Windows.Interactivity library
Animation
Multimedia
How it works
Documents
The basic idea is to have a dependency container that builds up a view. The view has a viewmodel injected, that is bound to the
Windows 7 DataContext. The viewmodel concentrates and provides data and commands for the view that it gets from services, that are injected
by the constructor. The services live as singletons within the container.
Interoperability
Using this architecture allows you to build up loosely coupled views that interact magically together over common data coming from
Performance
services in the background. It's very simple to rearrange or replace views, since they have to dependencies among each other.
Expression Blend
Advantages of this architecture:
Tools
UI elements are easily replaced because of flexible databinding
UI Automation The views are loosely coupled and quickly composed together
The viewmodel can be tested with conventional unit testing
Each service has a single purpose. They are easy to develop and make the architecture scalable.
ReferenceArchitecture.html[2/16/2014 2:51:38 PM]

Initializing the container and build up the main window

public class App : Application
{
protected override void OnStartup(StartupEventArgs e)
{
IUnityContainer container = new UnityContainer();
container.RegisterType<ICustomerService, CustomerService>();
container.RegisterType<IShoppingCartService, ShoppingCartService>();

MainWindow mainWindow = container.Resolve<MainWindow>();
mainWindow.Show();
}
}

Injecting the viewmodel to the view

By adding a [Dependency] attribute to the property, the dependency container resolves and injects the specified type after
creating the view. The injected viewmodel is directly set to the data context of the view. The view itself contains no other logic.

public class MainWindow : Window
{
[Dependency]
public MainWindowViewModel ViewModel
{

set { DataContext = value; }
}

public MainWindow()
{
InitializeComponent();
}
}

Implementing the viewmodel

public class MainWindowViewModel
{
private ICustomerService _customerService;

public MainWindowViewModel(ICustomerService customerService)
{
_customerService = customerService;
Customers = new ListCollectionView(customerService.Customers);
}

public ICollectionView Customers { get; private set; }
}

Binding the data to the view

<Window x:Class="WpfTutorial.MainWindow"
<ListBox ItemsSource="{Binding Customers}" />
</Window>


Last modified: 2010-02-10 10:34:15

Show all comments
awesome !!
chinnappa

Great post. One thing I would change is rather than having a write-only ViewModel property, pass it
Alec
as a parameter to the constructor of the window class.
WPF doesn't require parameterless constructors.
thanks..
mukesh
sagar This is think i m looking from long time. Architecture wise WPF make sense isn't it?
tambe
@Sagar
Jeremy
DI was around LONG before WPF. You should look at Martin Folwers articles from the beginning of
this decade.
great job...
rashmin
Can this be done with MEF? Gotta love MEF.

Chris Bellew
Doesn't Prism wrap this functionality?

Bill
Good Explanation
Manish K
can we have source code to download?
Downloadable source would be great!

StevenH77
we can make good ny having code , from where we can have this souce code
San
we can make good practice having code , from where we can have this souce code
San
What a great idea, palagarize other peoples material, have ads and make money.. who says crime
JIm
doesn't pay.

better if you provide a Sample of this Explnation.

Jak
Great work...
Viral Dave
Why MainWindow knows about the view Model(have logical reference though property)
Gopal
Great posts, wanted to see PRISM in the works and how would start my project using it,this clears up a
Donny Brasco
lot of things. May you please provide source code so as to see it in code and study how this all ties
up together
Great posts, wanted to see PRISM in the works and how would start my project using it,this clears up a
Donny Brasco
lot of things. May you please provide source code so as to see it in code and study how this all ties
up together
Describe some thing more for new commers

Sushil
Thank you for your post. But, sorry, charts (modelling) and code doesent fit at all. There is no
Achim Koch
ShoppingCartService in your charts and there is no OrderService in your code. Can you please post
some more consistent stuff? It's a little hard to put all pieces togehter, otherwise.
I have coded it a little - not exactly the above modele but some of it.
Achim Koch
But I don't know where to put the code. Can you help me out?
these kinda articles ain't a tutorial. you have explained very short abour dependency injection and
pouyan
your code and diagrams are not useful at all. if you would uploaded a sample project for each article
that would helped a lot.
chala bagundhi....
nagarjunareddy
thanks my dear!
alireza
Name
E-Mail (optional)

Comment
Post Comment

WPF Tutorial | DelegateCommand
Home
Patterns
DelegateCommand Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to implement a reusable ICommand
Custom Controls
Layout
Introduction
Input
If you are using the MVVM (model-view-viewmodel) pattern, one of the most used mechanism to bind actions to the view are
Data Binding commands. To provide a command, you have to implement the ICommand interface. This is quite simple, but you have to do it over
and over again. This is cumbersome.
Styling
The idea of this pattern build an universal command, that takes two delegates: One that is called, when
Localization
ICommand.Execute(object param) is invoked, and one that evalues the state of the command when
Interaction ICommand.CanExecute(object param) is called.
Resources In addition to this, we need a method, that triggers the CanExecuteChanged event. This causes the ui element to reevaluate the
CanExecute() of the commmand.
2D Graphics
3D Graphics
Sample implementation
Animation

Multimedia public class DelegateCommand : ICommand
{
Documents
private readonly Predicate<object> _canExecute;
Windows 7 private readonly Action<object> _execute;

Interoperability public event EventHandler CanExecuteChanged;
Performance

public DelegateCommand(Action<object> execute)
Expression Blend : this(execute, null)
{
Tools
}
UI Automation
public DelegateCommand(Action<object> execute,
Predicate<object> canExecute)
{
_execute = execute;
DelegateCommand.html[2/16/2014 2:52:29 PM]

_canExecute = canExecute;
}

public override bool CanExecute(object parameter)
{
if (_canExecute == null)
{
return true;
}

return _canExecute(parameter);
}

public override void Execute(object parameter)
{
_execute(parameter);
}

public void RaiseCanExecuteChanged()
{
if( CanExecuteChanged != null )
{
CanExecuteChanged(this, EventArgs.Empty);
}
}
}

► Tutorial ► Command ► ActionScript ► Flex

Last modified: 2010-02-22 22:57:52

Show all comments
Good artical!
lan
If with an example is better
If you want an example, check http://www.codeproject.com/KB/WPF/MVVMForDummies.aspx
YJ
A lot simple, but it could help.
Good artical!
Ganesh

but no any example need eample for all property as like your wcf article
C-MOSE
This one the delegate command doesn't really make sense to me... here's why, if in a view we want to
Javaman
decouple a Buttom command to a Command Object why would we delegate it (in some cases) back
to view logic? Or is it that this command is a mediator to delegate to the implementation of the
command in another class?
=> Javaman, I guess you shouldnt go back to the view, usecase for Delegate/RelayCommands is in my
Henke
world to directly connect the command to the viewmodel. Without it you will have to delegate it in the
codebehind instead.
Hi,
dct
if you would like to use this class with WPF4 you have to remove the override keywords.
Take care
Hi,
Hitesh
Good article. Override keyword not needed.
Just curious to know how is RaiseCanExecuteChanged() method called or when is it called.
Thanks
Hi ,good representation but ovveride is not needed

Sushil
Hi Christian,
Catalin
Manoliu
A better example I suggest is this RelayCommand:
http://msdn.microsoft.com/en-us/magazine/dd419663.aspx#id0090030
The implementation of ICommand.CanExecuteChanged is relying on the wpf's

CommandManager.Requery suggested event. This will improve binding scenarios.
Regards,
Catalin
Hi
costas...
the override bool CanExecute and the override void Execute has no override...

THANK YOU FOR CODE OF DELEGATECOMMAND.

ali
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Calendar
Home
Controls
Calendar Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
WPF Calendar Control
Custom Controls
Layout
Input
Data Binding
Introduction
Styling
Localization Since WPF 4.0, Microsoft provides a full featured calendar control. It provides the following features:
Interaction Set the displayed date

Multiple selection modes
Resources
Blackout dates
2D Graphics Calendar Modes
3D Graphics
Animation Set the displayed date

Multimedia The calendar displays by default the current date. But you can specify any other date to be displayed by setting the DisplayDate
property.
Documents

Windows 7
<Calendar DisplayDate="01.01.2010" />
Interoperability

Performance
Expression Blend
Selection Modes
Tools The calendar control provides multiple modes for selection. You can set the SelectionMode property to
SingleDateSingleRange, MultipleRanges or None.
UI Automation
Calendar.html[2/16/2014 2:52:43 PM]


<Calendar SelectionMode="MultipleRange" />

Blackout dates
The calendar control provides a feature to black out dates that are not valid for selection. You can define multiple ranges by setting
the BlackoutDates property to one or multiple CalendarDateRange.

<Calendar SelectionMode="{Binding SelectedItem, ElementName=selectionmode}" >
<Calendar.BlackoutDates>
<CalendarDateRange Start="01/01/2010" End="01/06/2010" />
<CalendarDateRange Start="05/01/2010" End="05/03/2010" />
</Calendar.BlackoutDates>
</Calendar>

Calendar Modes
The calendar supports three modes to display ranges of dates: Year, Month and Decade. You can control the mode by setting the
DisplayMode property.


<Calendar DisplayMode="Year" />


Last modified: 2010-03-01 22:32:47

Show all comments
How to make a google calendar like calendar? i.e. an interactive one tt I can add events or tasks to it...
z
that's a good one
smruti
that great.
morteza
good luck
Helpful.Thanks! How to blackout all weekend

ling
This control very nice.

Mahendar
Hi, There is not calendar control in vs2008. In this case how to create calendar control
Sachin

Hi christian.
Ganesh Kumar
I have a problem for you. My visual studio toolbox is not showing calender control.
gimme reply.
Thank You.
I'm using Visual Studio 2008 Professional Edition. Thanks

Ganesh Kumar
Do you get .NET 4.0?

iFirsT
I am using visual studio 2008 and i am not getting calendar control.how to import that calendar
Sateesh
control to my application.can anyone help me..
kumar.V
Thanks in advance.
I am using VS 2010 , Thanks a ton
veer.k
Hi christian,
Madhu Kumar
i do not know how to implement ajax for calender.plz give me reply
K.S
Helpful for beginners

Aarti Varadkar
how to add assembly reference for Calendar control? Please help.

Viks
I am getting an error as Error The name 'InitializeComponent' does not exist in the current context
Dorababu
could you please help me
Hi, can I disable years before 1900 ? just to restrict the user from entering date of birth which
MCShah
calculates his age more than 100 years..
Is there any option to go back instead of selection?

siva
Example: suppose if i click on 2010(on disply of january 2010) it will show year format. Now i want to
go back to previous with out selecting any year. Is it possible...
Thanks & Regards,
Siva

Could I style just the â��Days of the monthâ�� in a CalendarDayButtonStyle? They are looking to
Christof
weightily compared the title (Januar 2010)?
Ammann
I figured out that I unfortunately just can Style the â��Days of the Monthâ�� with the
â��Numbers of the Daysâ�� like the size and the font.
Hi Christian
Christof
Ammann
Sorry for my question where I asked if I only could set the "Days of the month".
Of course I can. I always ment it would be in the CalendarDayButtonStyle, but it is the

CalendarItemStyle.
Greez Christof
Can you catch the event when the user selects a year (when in decade mode) or month (when in year
Tim
mode)? Or even disable the switch to month view?
Subscribe on the events provided by the Calendar Control. DisplayDateChanged,

MCP DEA
DisplayModeChanged or SelectedDatesChanged.
The event arguments passed by this control (Calendar Control) event has a property of what we need.

If you need further explanation, just post it here.
hi, thanks...
prem tiwary
it's very.........good
nice 1 i love dis site............

Sanjay kumar
how to remove ShowNextPrevMonth=false in wpf??

kamesh
I am using WPF in VS 2008 but i am not getting calender control in tool box.I also tried to add from
Rajeev Kumarr
component but its not there. Can you please help me.
Name
E-Mail (optional)
Comment

Post Comment

WPF Tutorial | ItemsControl
Home
Controls
ItemsControl Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
ItemsControl
Custom Controls
Layout
How to automatically scroll to the last item
Input

Data Binding <ListBox l:ItemsControlHelper.ScrollToLastItem="true" />

Styling
Localization
Interaction
public static class ItemsControlHelper
Resources
{
2D Graphics public static readonly DependencyProperty ScrollToLastItemProperty =
DependencyProperty.RegisterAttached("ScrollToLastItem",
3D Graphics
typeof(bool), typeof(ItemsControlHelper),
Animation new FrameworkPropertyMetadata(false, OnScrollToLastItemChanged));

Multimedia public static void SetScrollToLastItem(UIElement sender, bool value)
Documents {
sender.SetValue(ScrollToLastItemProperty, value);
Windows 7 }

Interoperability
public static bool GetScrollToLastItem(UIElement sender)
Performance {
return (bool)sender.GetValue(ScrollToLastItemProperty);
Expression Blend
}
Tools
private static void OnScrollToLastItemChanged(DependencyObject sender,
UI Automation DependencyPropertyChangedEventArgs e)
{
var itemsControl = sender as ItemsControl;

if (itemsControl != null)
ItemsControl.html[2/16/2014 2:52:56 PM]
{
itemsControl.ItemContainerGenerator.StatusChanged +=
(s,a) => OnItemsChanged(itemsControl,s,a);
}
}

static void OnItemsChanged(ItemsControl itemsControl, object sender, EventArgs e)
{
var generator = sender as ItemContainerGenerator;
if( generator.Status == GeneratorStatus.ContainersGenerated )
{
if (itemsControl.Items.Count > 0)
{
ScrollIntoView(itemsControl,
itemsControl.Items[itemsControl.Items.Count - 1]);
}
}
}

private static void ScrollIntoView(ItemsControl itemsControl, object item)
{
if (itemsControl.ItemContainerGenerator.Status ==
GeneratorStatus.ContainersGenerated)
{
OnBringItemIntoView(itemsControl, item);
}
else
{
Func<object, object> onBringIntoView =
(o) => OnBringItemIntoView(itemsControl, item);
itemsControl.Dispatcher.BeginInvoke(DispatcherPriority.Loaded,
new DispatcherOperationCallback(onBringIntoView));
}
}

private static object OnBringItemIntoView(ItemsControl itemsControl, object item)
{
var element = itemsControl.ItemContainerGenerator.
ContainerFromItem(item) as FrameworkElement;
if (element != null)
{
element.BringIntoView();
}
return null;
}
}


Last modified: 2010-02-03 14:58:42


Show all comments
Hello, I just found the coding error when I use this Dependency property tutorial in the .xaml page. I used
Kyaw
separate class for "ItemsControlHelper".
Wunna
These are as follow:
1. The property 'ItemsControlHelper.ScrollToLastItem' does not exist in XML namespace
2. Name 'l.ItemsControlHelper.ScrollToLastItem' is not a valid XAML name.
3. The attachable property 'ItemsControlHelper' was not found in type 'l'.
If possible, please let me know how to fix it. Thanks
it will not work with logical scrolling (VirtualizingStackPanel.IsVirtualizing="True")

Yuri
@Kyaw Wunna
chet
you must reference the namespace
xmlns:l="clr-namespace:[namespace of ItemsControlHelper]"
It can't scroll to the first item ever..cause of scroll the bar will fire
chet
itemsControl.ItemContainerGenerator.StatusChanged several times,one generator.Status ==
GeneratorStatus.ContainersGenerated...why?
Hello,im not able to set ItemsControlHelper.ScrollToLastItem="true"

chinni
hi, how to use AddText method in ItemControl

suji
I think, to make things work, the is a line like
Don
itemsControl.ItemContainerGenerator.StatusChanged = null
missing. Not the finest method to clear the events, but it works.
Nice Text to show the possibillities !
Doesn't work if last item equals to the first, because ContainerFromItem() finds the first item, not the last.
m.n
Using item index instead of item itself, solves the problem:
private static object OnBringItemIntoView(ItemsControl itemsControl, int index)

{
var element = itemsControl.ItemContainerGenerator.ContainerFromIndex(index) as FrameworkElement;
if (element != null)
element.BringIntoView();
return null;
Plus change "object item" to "int index" appropriately.
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | LivePreview ComboBox
Home
Controls
LivePreview ComboBox Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
ComboBox with Live Preview
Custom Controls
Layout
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia The Live Preview Pattern

Documents If you are using Microsoft Office 2007 or later, you are familiar with the "live preview" concept. They are using it for all kind of
selections like color, fonttype or fontsize. The idea behind this pattern is to give the user an immediate feedback, how the object
Windows 7
would look like, if he does the selection, without actually doing it. So he can leave the combo and nothing has changed.
Interoperability
Performance
How to use the LivePreviewComboBox Control
Expression Blend
I encapsulated this functionality into a custom control called LivePreviewComboBox that provides an additional dependency
Tools property LivePreviewItem where you can bind to. The following code snipped explains how to use it:
UI Automation
xmlns:l="clr-namespace:LivePreviewComboBox">

LivePreviewComboBox.html[2/16/2014 2:53:38 PM]

<StackPanel>
<TextBlock Text="Preview Value:" />
<TextBlock Text="{Binding LivePreviewItem, ElementName=liveBox}" />
<l:LivePreviewComboBox x:Name="liveBox"/>
</StackPanel>

</Window>

Download the LivePreviewCombo Control
► Tutorial ► Flash Player 5 ► Flash SlideShow ► Adobe Flash

Last modified: 2010-01-13 13:26:02

Show all comments
Its so nice.
Ganesh
Nice!
Don
But i think, OnDropDownOpenChanged - Method is useless ?
If i comment it out, nothing changes
So good,,,
Zakia...
Can you help me?
I make my application by using the comboBox, but I want the items in the comboBox I get from richTextBox,
roughly, how?
Thank's,,,
To Good
Rita
jb
pradeep

Nice article. I noticed though, that if you set the IsEditable = true, then ComboBox selected value changes
Fonyuy
along as you select drop down items with the up/down arrow. Is there a way to have the behavior this
implementation currently have, while setting IsEditable = true ?
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Dialogs
Home
Controls
Dialogs Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Dialogs in WPF
Custom Controls
Layout
OK and Cancel Buttons in a Dialog
Input
You have a modal dialog with several buttons on it and you want to automatically close it, when the user presses on some of them. To
Data Binding do this you have to set IsCancel="true" on all buttons that should close the dialog and return false. On one button you set
IsDefault="true" this will be executed when you press [Enter]. It closes the dialog and returns... also false. To return true here
Styling
you have to register a callback that sets the DialogResult to true
Localization

Interaction <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Resources <StackPanel>
<Button Content="Cancel" IsCancel="True" />
2D Graphics
<Button Click="OkClick" Content="Ok" IsDefault="true" />
3D Graphics </StackPanel>
</Window>
Animation
Multimedia

private void OkClick(object sender, RoutedEventArgs e)
Documents
{
Windows 7 this.DialogResult = true;
}
Interoperability

Performance
Expression Blend
Tools
UI Automation
Last modified: 2009-10-09 16:41:46
Dialogs.html[2/16/2014 2:53:51 PM]

Show all comments
I got the same exception "DialogResult can be set only after Window is created and shown as dialog"
Doaa
while clicking OK button"
what 's wrong.
You need to call ShowDialog() method of this window class to show it.
Alex Che
While calling DiaLogWindow.ShowDialog()from App.xaml.cs in OnStartup method, when I set

nvs
this.DialogResult = true in OkButton_Click of DiaLogWindow, then complete application is going to
close. So Please let me know the isues here...
if you wanna execute this sample . firstly make other wpf window. secondly make new window
Yisangchol
object(involved this code) and use show() or showdialog() method. thx
You should make other wpf window which include the sample code, and then invoke this dialog in
Maggie
MianWindow.xaml.Just make sure that you've shown the dialog using ShowDialog() rather than Show()
method.
I working in wpf with vb.net , i used this code but a gives exception
rahul
so plz how to used
bhojane
getting an exception "DialogResult can be set only after Window is created and shown as dialog" while
suma
clicking OK button :( ..What to Do
DialogResult:
chet
Gets or sets the dialog result value, which is the value that is returned from the
System.Windows.Window.ShowDialog() method.
So It only can use in the model window
gopichandan
clicking OK button :( ..
Dialogs.html[2/16/2014 2:53:51 PM]

RP
clicking OK button any help
Ramakanta
aadsd
hey concept is really cool but the code is not working!!! getting an exception for OK and Cancel is not
bindu
working...guys u r true...pls suggest a way to crack this errors
In order to this sample will work,
yossharel
you have to remove the StartupUri="Window1.xaml" from App.xaml and to App.xaml.cs this:
Window1 w = new Window();
w.ShowDialog();
In order to this sample will work,

yossharel
you have to remove the StartupUri="Window1.xaml" from App.xaml and in App.xaml.cs add this:
base.OnStartup(e);
Window1 w1 = new Window1();
w1.ShowDialog();
This dialog tutorial is incomplete. It assums that you have already coded and created a WPF dialog box.
felinis
This is not a simple task. Perform a web search on "WPF dialog" and you will be find plenty of sample
WPF dialogs.
I hope that the remainder of this WPF tutorial is not just a work in progress. So far, things are not
looking good...
Can anybody tell me how to use FolderBrowserDialog in WPF without using

ankita
System.Windows.Forms.FolderBrowserDialog??
Thanks.
Dialogs.html[2/16/2014 2:53:51 PM]

It Is Really Fantastic! Which Gives More Idea About Designing
Minaj
karthik
clicking OK button :(
WPF This site is a waste of time ....

Beginner
this is shite, either do it properly or don't bother

turd burglar
add another page and create the function dialogueresult(). call this function using the object of that
smera
where function defined.
Getting Errer -
Damitha
DialogResult can be set only after Window is created and shown as dialog.
What the code is doing cannot understand

Anurag
How can we handle ESC key. i.e if u press ESC dialog is getting close. how can we stop this.
raju
Name
E-Mail (optional)
Comment
Post Comment
Dialogs.html[2/16/2014 2:53:51 PM]

WPF Tutorial | Slider
Home
Controls
Slider Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
WPF Slider Control
Custom Controls
Layout
How to Make a Slider Snap to Integer Values
Input
If you just set the Minimum and Maximum of a slider and choose a value the result is determined by the pixel position of the thumb.
Data Binding The value is typically a high-precision value with many decimal places. To allow only integer values you have to set the
IsSnapToTickEnabled property to True.
Styling
<Slider Minimum="0"
Localization
Maximum="20"
Interaction IsSnapToTickEnabled="True"
TickFrequency="2"
Resources
2D Graphics
3D Graphics

Animation
Last modified: 2009-08-05 13:39:36
Multimedia
Documents
Windows 7
Interoperability
Show all comments
Performance
Expression Blend Commented on 11.August 2009
This simply will not compile in eclipse. Waste of time.

Tools Rick Hard...
UI Automation
Rick, you could try using common sense and adding the missing '>' yourself, don't you think?
Mark
Slider.html[2/16/2014 2:54:29 PM]

Ahem.. '/>' actually.. ;)

Nick
Why u people kidding a good guy...

Nithin
isn't this just a snippet anyways... This broke my cobol

Mick
rofl
David
Here, this should work:
su
<Slider Minimum="0" Maximum="20" IsSnapToTickEnabled="True" TickFrequency="2"> </Slider>
Dont u criticize people idiotic mark

Rushin
Dont u criticize people idiotic mark

Navneet
what r u doin man, this is rubbish

nash
Hai,if anybody can send me the tutorial of wpf for beginners

karthik
sure, go here: http://www.wpftutorial.net

Nithin
Im not agree with criticize people, but Im agree with Mark, this missing /> its a very simple error. If
Daniel
you read the previus topics of this tutorial you should correct it by yourself.
lets fuck letss fuckkkkkk

abab
sab indian chutiye

chut
Slider.html[2/16/2014 2:54:29 PM]

lol
bbbbbbbbbbbb...
Good comments from Educated people

Suhasis
good site
Happy
Not satisfied with this example.
Aarti Varadkar
Check out this link for WPF Slider control:http://nayyeri.net/slider-control-in-windows-presentation-
foundation
If a developer needs to get each information in detail it is better to keep your hands of.
Martin
Thanks Christian to spend your time for us...
I think these are very minor errors, and they are not by his fault, this is because of that HTML Box on
Developer
which Overflow property is hidden. Try to concentrate on what he is going to teach you. Also, if you
are so perfect then buy a domain and make a website like him but with no errors in the code. But
you dont know anything so you are just making fun by these stupid things.
Please give the brief description about the SLIDER.

Kaushal
Doesn't work in IE8.

Rick
can u give more details about slider.. i searched it on the internet but does not found a good
Waseem
example
Name
E-Mail (optional)
Comment
Post Comment
Slider.html[2/16/2014 2:54:29 PM]

WPF Tutorial | Popup
Home
Controls
Popup Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Popup Control
Custom Controls
Introduction follows...
Layout
Input
How to make the popup close, when it loses focus
Data Binding
Just set the StaysOpen property to False. Unfortunately this is not the default behavior
Styling

Localization <Popup StaysOpen="False" />

Interaction

Resources
2D Graphics ► Tutorial ► Photoshop CS4 ► Photoshop Action ► Photoshop Brushes

3D Graphics
Animation Last modified: 2011-03-07 17:50:02

Multimedia
Documents
Windows 7
Interoperability Show all comments
Performance Commented on 12.July 2009
Expression Blend To make a popup control visible, you need to set IsOpen property to true.
Sumit
IsOpen="True"
Tools
UI Automation
Covered in detail at : http://www.c-
sharpcorner.com/UploadFile/mahesh/WPFPopup08172008075339AM/WPFPopup.aspx
Popup.html[2/16/2014 2:54:42 PM]

How to make the Popup control able to drag and drop like a window?
Eric
explain in detail please..................

pankaj
It's nice..
Kalpesh
Kalpesh
Vekaria
http://www.tatvasoft.com/
Not clear Staysopen is not available..
Anand
@_@ what is this? :|

name
it's great.
Elan...
http://www.elantechnologies.com
Dear All,
Nitin Sharma
http://www.c-sharpcorner.com/UploadFile/mahesh/WPFPopup08172008075339AM/WPFPopup.aspx
Visit this website to implement Popup.
Great Work and great stuff... Thanks
Ramu
dotnetwithexamples.blogspot.com
its good
Ebha
explain detail plz............

Naushad
EXPLAIN DETAILS WHY WE ARE GIVING TRUE AND FALSE...

Shreelakshmi
This is the most useful article i\'ve ever read.

Bob
Popup.html[2/16/2014 2:54:42 PM]

If u set the property IsOpen = True then the popup will be Opened
sasi
and,if IsOpen = False then the Popup will be closed
Name
E-Mail (optional)
Comment
Post Comment
Popup.html[2/16/2014 2:54:42 PM]

WPF Tutorial | RadioButton
Home
Controls
RadioButton Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Radio Button
Custom Controls
Layout
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Introduction
Documents The RadioButton control has its name from old analog radios which had a number of programmable station buttons. When you
pushed one in, the previosly selected poped out. So only one station can be selected at a time.
Windows 7
The RadioButton control has the same behavior. It lets the user choose one option out of a few. It the list of options gets longer,
Interoperability
you should prefer a combo or list box instead.
Performance To define which RadioButtons belong togehter, you have to set the GroupName to the same name.
Expression Blend To preselect one option set the IsChecked property to True.
Tools
UI Automation
<StackPanel>
<RadioButton GroupName="Os" Content="Windows XP" IsChecked="True"/>
<RadioButton GroupName="Os" Content="Windows Vista" />
<RadioButton GroupName="Os" Content="Windows 7" />
RadioButton.html[2/16/2014 2:55:18 PM]

<RadioButton GroupName="Office" Content="Microsoft Office 2007" IsChecked="True"/>
<RadioButton GroupName="Office" Content="Microsoft Office 2003"/>
<RadioButton GroupName="Office" Content="Open Office"/>
</StackPanel>

How to DataBind Radio Buttons in WPF

The radio button control has a known issue with data binding. If you bind the IsChecked property to a boolean and check the
RadioButton, the value gets True. But when you check another RadioButton, the databound value still remains true.
The reason for this is, that the Binding gets lost during the unchecking, because the controls internally calls ClearValue() on the
dependency property.

<Window.Resources>
<EnumMatchToBooleanConverter x:Key="enumConverter" />
</Window.Resources>

<RadioButton Content="Option 1" GroupName="Options1"
IsChecked="{Binding Path=CurrentOption, Mode=TwoWay,
Converter={StaticResource enumConverter},
ConverterParameter=Option1}" />

public class EnumMatchToBooleanConverter : IValueConverter
{
public object Convert(object value, Type targetType,
{
if (value == null || parameter == null)
return false;

string checkValue = value.ToString();
string targetValue = parameter.ToString();
return checkValue.Equals(targetValue,
StringComparison.InvariantCultureIgnoreCase);
}

{
if (value == null || parameter == null)
return null;

bool useValue = (bool)value;

string targetValue = parameter.ToString();
if (useValue)
return Enum.Parse(targetType, targetValue);

return null;
}
}

► Tutorial ► Flash Player 5 ► Flash SlideShow ► Adobe Flash

Last modified: 2010-08-26 20:42:54

Show all comments
Thank you, this example is just what I needed and nothing more. The people who don't understand
Carlos
need more background reading. Perhaps read about MVVM so the binding, converter make sense.
This tutorial is worth pure gold! Just what I needed.

Andreas
Very good! Just what I needed.

Olion242
Amazaed to see so many dumb People. They are reading this and they dont know what data binding is.
Praveen
It would have been better for lame user to understand if it had the solution/source code file with this in
zip.
Amazaed to see so many dumb People. They are reading this and they dont know what data binding is.
Praveen
It would have been better for lame user to understand if it had the solution/source code file with this in
zip.
Thanks Robert and Adam for making it work :)

Danube210
It's usefule. but not details explination
rahul
Great thanks

bhojane
Uh... to all the people saying "if people don't understand, too bad, figure it out yourself"
Caleb
This is a TUTORIAL. The purpose of which is to teach. If it doesn't fulfill it's purpose, whats the point? If
you're so smart, why are you looking up tutorials? Shouldn't you all "figure it out yourself"?
This worked well for me. You just have to remember to fire a PropChanged event in the set path of
Robert
CurrentOption property (which is of type enum and not string as suggested, above).
Hi can any one tell me how to enable/disable a button by select a checkbox. :)
atul
This was very useful.

Phill
Effectively the built-in radiobutton functionality is not used at all really (the radiobuttons are all in their
own group and the mutual exclusivity is an effect of the binding).
In the end I varied from the example a bit in that I found it safer to isolate each RadioButton from the
others by putting each within its own parent (ie each in its own StackPanel) and not setting a
GroupName at all. The use of GroupName was an issue for me when multiple copies of the same view
where shown within a docking window...ie the radiobuttons from different view instances were
interfering with each other.. this is not an issue when using a different parent for each radiobutton as a
means of seperating them into different groups...
I am terribly confused by this tutorial. I followed the instructions exactly, but my databound value is not
Alexander B
being updated when the radio buttons are clicked. Similarly, when I set all of the Group names to be
identical, the unselected radio buttons become red bordered.
I believe one issue with having to use multiple group names is that the tabbing behavior does not
Todd Fisher
operate correctly. If one of the radio buttons is set, the tab key should move you out of the group.
However, since we have mutiple group names, we move to the next radio button.
Hi,
swapnil
Got the things implemented in tutorial.
Can we pass the content of radio button to converter class some how?
My requirement is that i want to get text of radiobutton just checked in the view model
Please help me out with this.
Thanks in advance.
Swapnil

Hi,
swapnil
Got the things implemented in tutorial.
Can we pass the content of radio button to converter class some how?
My requirement is that i want to get text of radiobutton just checked in the view model
Please help me out with this.
Thanks in advance.
Swapnil
@Alexander B,
Lee D
The red border is appearing because the ConvertBack is [correctly] returning null - which I believe WPF
is interpreting as a validation error (trying to set an enum value i.e. the bound property, to null). After
fighting with this myself the last two days, I found that if you simply redefine the
Validation.ErrorTemplate for the RadioButton to be empty than you can remove the red border.
So, in a style that's applied to your RadioButtons:
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
</ControlTemplate>
</Setter.Value>
</Setter>
Lee.
"If you bind the IsChecked property to a boolean and check the RadioButton, the value gets True. But
starbros47
when you check another RadioButton, the databound value still remains true." I am using WPF 4.0 with
.net 4.0, this issue is fixed.
Hi, first thanks a lot. But I've got a little problem, I have a tabControl and each tabItem have a different
Enhakiel
opacity, on right click it open a context menu with radion button witch allow to change it, everything
goes right, on each tabControl radiobutton is set to the correct value, but as soon as I changed a value
(it's correctly set) if I click on another tabItem (the opacity is still ok) the context menu show the opacity
I've set the the last one... have you got a solution? Thank you in advance
I've tried this technique and it does not work at all. Instead it simply allows any radio button to be
Ristogod
checked, and it cannot be unchecked. So after clicking on each radio button, they all eventually get
checked with no way to undo it.
Also, the ConvertBack never occurs. This because the Binding on IsChecked mysteriously disappears.

I'm using version 4.0. And I've yet to find a working solution to this problem.
This is great article. You also need to elaborate that we need to implement INotifyPropertyChanged for
Tuan
the data source class in order to trigger other radio buttons to update themselves, so that the mutual
Nguyen
exclusivity is in effect.
Your example works to an extent, but now I am totally spooked with using RadioButton and databinding.
Dan
Even with .NET 4.0, I think Microsoft still has some bugs here. If your example is used in a UserControl
and more than one instance is created, it often fails to remember which radio button is supposed to be
checked as the usercontrols gain and lose focus. Really strange... I'm steering clear of using this control
with data binding in any form or fashion.
Dan
Dan
Thank you! That was awesome :)

Jamie
This is goodl example but I found a bug.
Shai
Let's say you have 3 different options in a Radio Button list. If you select option 1, then option 2, and
option 3, it works. But now if you go back and select option1, your view do not communicate with
ViewModel. Any suggestion on this issue?
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | ToolTips
Home
Controls
ToolTips Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
ToolTips in WPF
Custom Controls
Layout
Input
Data Binding
Styling
Localization
<Button Content="Submit">
Interaction <Button.ToolTip>
<ToolTip>
Resources
<StackPanel>
2D Graphics <TextBlock FontWeight="Bold">Submit Request</TextBlock>
<TextBlock>Submits the request to the server.</TextBlock>
3D Graphics
</StackPanel>
Animation </ToolTip>
</Button.ToolTip>
Multimedia </Button>

Documents

Windows 7
How to show ToolTips on disabled controls
Interoperability
When you disable a control with IsEnabled=False the tooltip does not show anymore. If you want to have the tooltip appear
Performance
anyway you have to set the attaached property ToolTipService.ShowOnDisabled to True.
Expression Blend

Tools <Button IsEnabled="False"
ToolTip="Saves the current document"
UI Automation ToolTipService.ShowOnDisabled="True"
Content="Save">
</Button>

ToolTip.html[2/16/2014 2:55:30 PM]

How to change the show duration of a ToolTip

The static class ToolTipService allows you to modify the show duration of the tooltip

<Button ToolTip="Saves the current document"
ToolTipService.ShowDuration="20"
Content="Save">
</Button>

► Tutorial ► ActionScript ► Flash CS3 ► Flash 9

Last modified: 2009-06-27 18:48:48

Show all comments
Hun too Yae baat hai

DON
Hi Christian, Can we modify the tooltip content and make like a content presenter, like office 2007
Tormentor
tooltips for an example(Header, Description, image, etc...)?
Nice tutorial , good that it includes tooltipservice : http://msdn.microsoft.com/en-

Sumit
us/library/system.windows.controls.tooltipservice(VS.95).aspx
Hi Christian
Bolshoi Booze
Is it possible to have something like below:
<Style TargetType="{x:Type ...}">
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition .. />
<Condition .. />
</MultiDataTrigger.Conditions>
<Setter Property="ToolTip>
<Setter.Value>
<Grid>
...[Custom Content such as images, textblocks etc]...
</Grid>
ToolTip.html[2/16/2014 2:55:30 PM]

</Setter.Value>
</Setter>
</MultiDataTrigger>
</Style>
When I do this I get a below exception:
Exception Cannot add content of type 'System.Windows.Controls.Grid' to an object of type

'System.Object'.
Thanks
Hi Christian
Bolshoi Booze
Is it possible to have something like below:
<Style TargetType="{x:Type ...}">
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition .. />
<Condition .. />
</MultiDataTrigger.Conditions>
<Setter Property="ToolTip>
<Setter.Value>
<Grid>
...[Custom Content such as images, textblocks etc]...
</Grid>
</Setter.Value>
</Setter>
</MultiDataTrigger>
</Style>
When I do this I get a below exception:
Exception Cannot add content of type 'System.Windows.Controls.Grid' to an object of type

'System.Object'.
Thanks
Hi Bolshoi,
Christian
there are two problems in your approach. The property "tooltip" that you are trying to set requires an
Moser
object of type tooltip. So you need to warp your <Grid> into a <Tooltip> element.
The second problem is that a style is something like a singleton. It's only created once and applied
multiple times. This means that if you include wpf elements in a style you have to add the
x:Shared="False" attribute to the style.
I hope this helps you.
Greetings
Christian
ToolTip.html[2/16/2014 2:55:30 PM]

simple and working

Rajagopal
Great Work !!!

M Islam
Great, its simple and easy to learn....

Jawahar
ToolTipService.ShowDuration is in Milliseconds, so "20" might not be the best example.

Heinzi
You are Man!

Victor
Suoerb Piece of Code

CoolDev
I dont have visual studio in this computer so I have to ask... Can I show an image inside the tooltip? If I
Daniel
add an Image tag inside the StackPanel should work??? The code should be like this:
<Button Content="Submit">
<Button.ToolTip>
<ToolTip>
<StackPanel>
<image ... />
<TextBlock FontWeight="Bold">Submit Request</TextBlock>
<TextBlock>Submits the request to the server.</TextBlock>
</StackPanel>
</ToolTip>
</Button.ToolTip>
</Button>
Im ok or is another way to have an image in the tooltip?
Hi
someone
How can I set this tooltip (with stackpanel etc) in style file?
I made my style for textbox
<Style x:Key="DefaultStyle" TargetType="{x:Type TextBox}">
<Setter Property="FontFamily" Value="Tahoma"/>
<Setter Property="FontSize" Value="15"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="TextAlignment" Value="Center"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="BorderBrush" Value="#A9C2DE"/>
<Setter Property="BorderThickness" Value="1"/>
ToolTip.html[2/16/2014 2:55:30 PM]

<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1" >
<GradientStop Color="#CDE1F7" Offset="0.01"/>
<GradientStop Color="#DFECFA" Offset="0.8" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="ToolTip">
<Setter.Value>
<StackPanel>
<TextBlock Text="Nice toolbox"/>
<TextBlock Text="Nice tooltip"/>
</StackPanel>
</Setter.Value>
</Setter>
</Style>
But I get xaml parse exception error if I use this style. Is it possible to set this tooltip in style file?
Nice Explanation..
durga
Brevity is the soul of wit!! To the point and perfect sample

Girish Jain
I love this, great tip. Nice example. Thanks!

El Matador
I'm also interested in styled tooltips like commentator from "21.August 2010"
Alex
Aldha Nice article, simple and good sample for my project. AH

Qhurbaini
How to apply image to button.

Kaustubh...
Nice sample
Sanjay Patolia
Wonderful!
YuZhoufeng
ToolTip.html[2/16/2014 2:55:30 PM]

Hey really grt ... Thanks a lot

Tejas
Hi Christian
Naren
All your examples are really great.I want to know whether there is any control to display text along
with images in between(images such as graphs and diagrams). If there is no control, then please mail
me how to create a control to satisfy this. If possible mail the code for creating such a control.
Thanks
Hi Christian, is it possible to put clickable button inside tooltip?
Terry
This xaml displays button but you can't click on it.
Thanks
Terry
Ex:
<ComboBox.ToolTip>
<ToolTip Placement="Center" Focusable="True"

StaysOpen="True">
<Button Content="button inside tool tip" Focusable="True"

Click="Button_Click_1" />
</ToolTip>
</ComboBox.ToolTip>
Name
E-Mail (optional)
Comment
Post Comment
ToolTip.html[2/16/2014 2:55:30 PM]

WPF Tutorial | TextBox
Home
Controls
TextBox Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
WPF TextBox
Custom Controls
Layout
How to enable spell checking
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents
Windows 7 TextBox and RichTextBox provide an out-of-the-box spell checking functionality. It is available for the following languages: English,
Spanish, German and French. It can be enabled by setting the attached property SpellCheck.IsEnabled to true.
Interoperability

Performance
<TextBox SpellCheck.IsEnabled="True" Language="en-US" />
Expression Blend

Tools
UI Automation
How to validate input
By using a regular expression, you can easily limit and validate the input of the user. The following code snippet shows how to do it:

protected override void OnTextInput(TextCompositionEventArgs e)
TextBox.html[2/16/2014 2:55:46 PM]

{
string fullText = Text.Remove(SelectionStart, SelectionLength) + e.Text;
if (_regex != null && !_regex.IsMatch(fullText))
{
e.Handled = true;
}
else
{
base.OnTextInput(e);
}
}

Last modified: 2010-06-11 10:49:42

Show all comments
i have loaded data from XML file to treeview.i want to get the id of selected treeview item when we click
Abhijiit...
on any treeview item.and it shold be displayed in testbox.
pls help me..
thnks
i have loaded data from XML file to treeview.i want to get the id of selected treeview item when we click
Abhijiit...
on any treeview item.and it shold be displayed in testbox.
pls help me..
thnks
this is good .
ebrahimi
thanks .
Its funny that you guys find my articles so helpful considering I just copy and pasted random shit from
MOSER
other random sites that I found. Its all good though because those google ads are making me cash!!!
ps. you can stop me
Christian
TextBox.html[2/16/2014 2:55:46 PM]

Give him a break. Even if some of it is copy and paste, it's laid out very nicely with nice graphics
andy
screenshots.
And what google ads?
hi! I need detect when user pulse intro, Someone knows how to do this? I'm using mvvm
Victor
shibasish its good.......

jena
I Heart fully,
Ayyappan
Thank you for your nice Material
warm regards,
Ayyappan,
Software Engineer ,
Chennai,
Tamil Nadu.
http://www.banyansoft.blogspot.com/
Nice articles for me.
Javed Khan
thanks
XML Content does not work at all.
Alexander
Regards
ray this is what I was needed thanx

akkanson
Useless! you should tell us how WPF controls are different from asp controls and should tell us that what
Monika
are there properties and how properties works. I always open this link when i have to check some
properties or how control is but never find anything. Please change the name of ths website "WPF
Tutorial"
I'm using VS-2008[Framework 3.5]. Spell checking functionality perfectly works for English language. But
Karthik
itâ��s not working with Spanish, German and French language dictionaries. Please guide me
and where Iâ��m making the mistake. Following language code are used in my application.
TextBox.html[2/16/2014 2:55:46 PM]

English = "en-US" [Working]
German = "de-DE" [Not Working]
French = "fr-FR" [Not Working]
Name
E-Mail (optional)
Comment
Post Comment
TextBox.html[2/16/2014 2:55:46 PM]

WPF Tutorial | Menus
Home
Controls
Menus Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Menus in WPF
Custom Controls
Layout
Menu
Input
The Menu control derives from HeaderedItemsControl. It stacks it items horizontally and draws the typical gray background. The
Data Binding only property that the Menu adds to ItemsControl is the IsMainMenu property. This controls if the menu grabs the focus if the
user presses F10 or the ALT key.
Styling
Localization
Interaction

Resources
<Menu IsMainMenu="True">
2D Graphics <MenuItem Header="_File" />
<MenuItem Header="_Edit" />
3D Graphics <MenuItem Header="_View" />
<MenuItem Header="_Window" />
Animation
<MenuItem Header="_Help" />
Multimedia </Menu>

Documents
Windows 7
MenuItem
Interoperability
The MenuItem is a HeaderedItemsControl. The content of the Header property is the caption of the menu. The Items of a
Performance
MenuItems are its sub menus. The Icon property renders a second content on the left of the caption. This is typically used to draw a
Expression Blend little image. But it can be used for type of content.
Tools
You can define a keyboard shortcut by adding an underscore in front of a character.
UI Automation
Menus.html[2/16/2014 2:56:21 PM]


<MenuItem Header="_Edit">
<MenuItem Header="_Cut" Command="Cut">
<MenuItem.Icon>
<Image Source="Images/cut.png" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="_Copy" Command="Copy">
<MenuItem.Icon>
<Image Source="Images/copy.png" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="_Paste" Command="Paste">
<MenuItem.Icon>
<Image Source="Images/paste.png" />
</MenuItem.Icon>
</MenuItem>
</MenuItem>

Checkable MenuItems
You can make a menu item checkable by setting the IsCheckable property to true. The check state can be queried by the
IsChecked property. To get notified when the check state changes you can add a handler to the Checked and Unchecked
property.

<MenuItem Header="_Debug">
<MenuItem Header="Enable Debugging" IsCheckable="True" />
</MenuItem>

Separators
Separator is a simple control to group menu items. It's rendered as a horizontal line. It can also be used in ToolBar and
StatusBar.
Menus.html[2/16/2014 2:56:21 PM]


<Menu>
<MenuItem Header="_File">
<MenuItem Header="_New..." />
<Separator />
<MenuItem Header="_Open..." />
<Separator />
<MenuItem Header="_Save" />
<MenuItem Header="_Save As..." />
<Separator />
<MenuItem Header="_Exit" />
</MenuItem>
</Menu>

Callbacks
You can register a callback to any menu item by adding a callback to the Click event.

<Menu>
<MenuItem Header="_File">
<MenuItem Header="_New..." Click="New_Click"/>
</MenuItem>
</Menu>

private void New_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("You clicked 'New...'");
}

How to bind MenuItems dynamically using MVVM

If you are using the model-view-viewmodel pattern, you probably want to define the available menu command dynamically in your
code and then bind them to a MenuItem control. The following sample shows you how to do this:

<Menu>
<Menu.Resources>
<Style x:Key="ThemeMenuItemStyle" TargetType="MenuItem">
Menus.html[2/16/2014 2:56:21 PM]

<Setter Property="Header" Value="{Binding Name}"></Setter>
<Setter Property="Command" Value="{Binding ActivateCommand}"/>
<Setter Property="IsChecked" Value="{Binding IsActive}" />
<Setter Property="IsCheckable" Value="True"/>
</Style>
</Menu.Resources>
<MenuItem Header="Themes" ItemsSource="{Binding Themes}"
ItemContainerStyle="{StaticResource ThemeMenuItemStyle}" />
</Menu>

Keyboard Shortcuts
To add a keyboard shortcut to a menu item, add a underscode "_" in front of the caracter you want to use as your hot key. This
automatically sets the InputGestureText to an appropriate value. But you can also override the proposed text by setting this
property to a text of your choice.

Last modified: 2010-07-21 10:14:30

Show all comments
What do I need to do if I want the Help menu item on the right-hand side?
Victor
Thanks!!
bar
Awesome tutorial !!!!!!!!
Mehul
Very Helpful
Special Thanks !!!!!!!!!
Nice.. Thanks!
esha
Hey Christian,
Shweta Patel
There is one suggestion or i can say request to u.
Why dont u keep "Ask -- Reply" mechanism here instead of comments, or along with comments. So that
it becomes easy to find answers for doubts.
Menus.html[2/16/2014 2:56:21 PM]

This was just a suggestion only.
Other wise everything is perfect.
Really very nice Articles
Jitendra
thanks
Really very nice Articles
Jitendra
thanks
Very nice article.

Kiransinh
thanks a lot! really helpful :)

mr e
@Tony, you can set up the menu item collection by going to the 'properties' of the control in design
DavidW
view, finding the 'Items' property which is a (Collection) and clicking on the [...] button.
Perfectly Explained. Well done. Thank you

Stephen
awesome Article man ....

Manish
Thanks because this is very good for learning to a beginner.
vinay
and there is define in both language XML and C#.
Again Thanks.
I don't know what I've missed, but all my subitems of a meny at run time are disabled besides the main
Alexander
menu. I've assigned everywhere IsEnabled proprty to "True". But no success. Besides this,
the access to the code area from design mode to the subitems of menu is not possible, again access
available just to the main menu items
thanks, can you more write a use wcf with x509?

Mr.Truong
Menus.html[2/16/2014 2:56:21 PM]

IMPORTANT! The following line and similar ones gave me an error...
Jesse B
<MenuItem Header="_Copy" Command="Copy">
In Visual Studio 2008, it is actually:
<MenuItem Header="_Copy" Click="Paste_Click">
You then right click on Paste_Click and select "Navigate to Event Handler".
Thanks
Deepak
Greetings to all. I found very interesting this mini tutorial. I would suggest an idea. What do you think to
Felipe
create another tutorial on creating menus more stylized, like those that Word 2010 and Excel 2010 are
currently using?
Hola soy nueva en esto tengo una duda...Es posible llamar un MainWindow de un submenu como se
izel
isiera en un windownForm
Thamk you!
Designer_my
That's helpful, thanks.

Daniex
nice written
babu
Having spent 3 hours trying to attach an image to a MenuItem, discovered that there is a bug in VS
Peter Farrer
2008 and 2010, you simply need to close Visual Studio and reopen it.
The XAML error message you get is The file 'x' is not part of the project or its 'Build Action' property is
not set to 'Resource'
Awesome! Mega cool.

Awesomer
how to give the effective look for window in Wpf
saber
Name
E-Mail (optional)
Comment
Menus.html[2/16/2014 2:56:21 PM]

Post Comment
Menus.html[2/16/2014 2:56:21 PM]

WPF Tutorial | Expander
Home
Controls
Expander Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
WPF Expander Control
Custom Controls
Layout
Introduction
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics The Expander control is like a GroupBox but with the additional feature to collapse and expand its content. It derives from HeaderedContentControl
so it has a Header property to set the header content, and a Content property for the expandable content.
Animation
It has a IsExpanded property to get and set if the expander is in expanded or collapsed state.
Multimedia
In collapsed state the expander takes only the space needed by the header. In expanded state it takes the size of header and content together.
Documents

Windows 7 <Expander Header="More Options">
Interoperability
<StackPanel Margin="10,4,0,0">
<CheckBox Margin="4" Content="Option 1" />
Performance <CheckBox Margin="4" Content="Option 2" />
<CheckBox Margin="4" Content="Option 3" />
Expression Blend
</StackPanel>
Tools </Expander>

UI Automation
Last modified: 2010-02-08 12:27:56

Expander.html[2/16/2014 2:56:48 PM]

Show all comments
this man "me" is Crazy!!!

Hey!!
Cool tutorial , really liked it.

Amit
The Tutorial was not a tutorial, but there were some interesting comments on what posters wanted and possible
mike c
solutions.
nice work
chintu
Nice Article. But how to make the expander to expand and close slowly. kindly help
Ismail
How does one make the the header a gray color so one can tell it apart from the other content?
Xarzu
I followed the tutorial as said but its still giving me problems.Instead of the expander when expanded to push other expanders
Bally
down, and closes the gap when collapsed.It expands but on others.Please how can i make it push other expanders down
when it expands and pull the expanders back to their position when it collapses. Are there any properties that can be modified
to make it work?
Here is my sample code using Expression Blend 3.
<Window
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-
compatibility/2006"
mc:Ignorable="d" xmlns:chartingToolkit="clr-
namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"

x:Class="WpfApplication1.MainWindow"
x:Name="Window"
Title="MainWindow" WindowStartupLocation="CenterScreen" WindowState="Maximized">
<Window.ContextMenu>
<ContextMenu/>
</Window.ContextMenu>
<StackPanel>
<Expander VerticalAlignment="Top" Header="Expander" Width="Auto" Height="Auto" ExpandDirection="Down"

HorizontalAlignment="Left">
<Canvas>
<Grid>
<ColumnDefinition Width="0.342*"/>

<Label Margin="0,0,-0.001,0" Content="Label" d:LayoutOverrides="Width, Height"/>
<Button HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Content="Button" Margin="0,38,0,0"/>
<CheckBox HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="CheckBox" Margin="0,0,0,-19.96"

d:LayoutOverrides="VerticalAlignment"/>
</Grid>
</Canvas>
</Expander>
<Expander VerticalAlignment="Top" Header="Expander" Width="Auto" Height="Auto" ExpandDirection="Down"

HorizontalAlignment="Left">
<Canvas>
<Grid>
<Label Margin="0,0,-0.001,0" Content="Label" d:LayoutOverrides="Width, Height"/>
<Button HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Content="Button" Margin="0,38,0,0"/>
<CheckBox HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="CheckBox" Margin="0,0,0,-19.96"

d:LayoutOverrides="VerticalAlignment"/>
</Grid>
</Canvas>
</Expander>
</StackPanel>
</Grid>
</Window>
Gary, I came here looking to check that an Expander did what I thought it might do, and the syntax of how to use
Liz
it. Perfect. Thanks!
I want to know can we change the position of exapnder pointer without effecting the internal things in expander
Vishal Pandit
I, too, got what I needed.

Phil R
Aarti Nice One

Varadkar
I also found this useful, thank you!

Gmac
I want to create expander dynamically and want to add groupbox into it.
Yo
using expander.content = textbox is working fine. but wen i add group box it doesnot work,
Great Tutorial. Is it possible to have an expander bump other elements out of the way when it is expanded? for
Drew
instance if the collapsed expander is next to a listview, when you click to expand can it move the listview over?
probably isnt possible but thought id ask. thanks

bollocks
Bob
Like Expandable Panel...Very Impressive.

Rahul
This Site is very Helpful for me...Thanks

Chetan
this is the good article but not professional

mohammad...
this site is very very benefit. I am from Iran and my english not is good.but i am a programmer in the iran. please
mohammad...
set several project in the website.
Xclnt.
ESmile
Xclnt.
ESmile
Hi. I would like to know how I can open a Page.xaml in a browser. Can you pls help? Thanks
Anju
how to Control Move Down When Expender is Expend Down. also hw to reset ???
M Shariq
Nice ! Thanks a lot, you just saved my life ! So helpful !

TomVenom
This tutorial is very useful for beginners. Good effort anyways.

Raja Mani
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | PasswordBox
Home
Controls
PasswordBox Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
WPF PasswordBox Control
Custom Controls
The password box control is a special type of TextBox designed to enter passwords. The typed in characters are replaced by asterisks.
Layout Since the password box contains a sensible password it does not allow cut, copy, undo and redo commands.
Input
Data Binding
Styling
Localization
<StackPanel>
Interaction
<Label Content="Password:" />
Resources <PasswordBox x:Name="passwordBox" Width="130" />
</StackPanel>
2D Graphics

3D Graphics
Animation Change the password character

Multimedia To replace the asteriks character by another character, set the PasswordChar property to the character you desire.
Documents
<PasswordBox x:Name="passwordBox" PasswordChar="*" />
Windows 7

Interoperability
Performance Limit the length of the password

Expression Blend
To limit the length of the password a user can enter set the MaxLength property to the amount of characters you allow.
Tools
UI Automation
<PasswordBox x:Name="passwordBox" MaxLength="8" />

Databind the Password Property of a WPF PasswordBox

PasswordBox.html[2/16/2014 2:57:26 PM]
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.
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.

<StackPanel>
<PasswordBox w:PasswordHelper.Attach="True"
w:PasswordHelper.Password="{Binding Text, ElementName=plain, Mode=TwoWay}"
Width="130"/>
<TextBlock Padding="10,0" x:Name="plain" />
</StackPanel>

The PasswordHelper is attached to the password box by calling the PasswordHelper.Attach property. The attached property
PasswordHelper.Password provides a bindable copy of the original password property of the PasswordBox control.

public static class PasswordHelper
{
public static readonly DependencyProperty PasswordProperty =
DependencyProperty.RegisterAttached("Password",
typeof(string), typeof(PasswordHelper),
new FrameworkPropertyMetadata(string.Empty, OnPasswordPropertyChanged));

public static readonly DependencyProperty AttachProperty =
DependencyProperty.RegisterAttached("Attach",
typeof(bool), typeof(PasswordHelper), new PropertyMetadata(false, Attach));

private static readonly DependencyProperty IsUpdatingProperty =
DependencyProperty.RegisterAttached("IsUpdating", typeof(bool),
typeof(PasswordHelper));

public static void SetAttach(DependencyObject dp, bool value)
{
dp.SetValue(AttachProperty, value);
}

public static bool GetAttach(DependencyObject dp)
{
return (bool)dp.GetValue(AttachProperty);
}

public static string GetPassword(DependencyObject dp)
{
return (string)dp.GetValue(PasswordProperty);
}

public static void SetPassword(DependencyObject dp, string value)
{
dp.SetValue(PasswordProperty, value);
}

private static bool GetIsUpdating(DependencyObject dp)

{
return (bool)dp.GetValue(IsUpdatingProperty);
}

private static void SetIsUpdating(DependencyObject dp, bool value)
{
dp.SetValue(IsUpdatingProperty, value);
}

private static void OnPasswordPropertyChanged(DependencyObject sender,
{
PasswordBox passwordBox = sender as PasswordBox;
passwordBox.PasswordChanged -= PasswordChanged;

if (!(bool)GetIsUpdating(passwordBox))
{
passwordBox.Password = (string)e.NewValue;
}
passwordBox.PasswordChanged += PasswordChanged;
}

private static void Attach(DependencyObject sender,
{

if (passwordBox == null)
return;

if ((bool)e.OldValue)
{
passwordBox.PasswordChanged -= PasswordChanged;
}

if ((bool)e.NewValue)
{
passwordBox.PasswordChanged += PasswordChanged;
}
}

private static void PasswordChanged(object sender, RoutedEventArgs e)
{
SetIsUpdating(passwordBox, true);
SetPassword(passwordBox, passwordBox.Password);
SetIsUpdating(passwordBox, false);
}
}

The Idea for this password helper was originally posted here:
http://blog.functionalfun.net/2008/06/wpf-passwordbox-and-data-binding.html


Last modified: 2009-05-12 01:01:14

Show all comments
I created a similar bindable password box here (http://gist.github.com/468331) as well.

Taylor Leese
Why is the Attach method private? It causes XAML to say "The attachable property 'Attach' was not
Sarah
found in type 'PasswordHelper'. Not very useful.
thi is very nice

ravi
twerwetr
wert
The Input Panel in Windows 7 doesn't work with the PasswordBox within WPF projects. Does anyone
JKOne
have an idea how to handle the problem?
When using validation input on passwordbox (implementing IDataErrorInfo), the red line around the
Normand
box appear, but the error message text when moving mouse over the passwordbox does not appear.
Bedard
Any idea?
is it possible to register event then raise it from OnPasswordPropertyChanged so that the code that
Beth
attaches this helper class can do post processing?
You're essentially making the password field a dependency property. Doesn't this just circumvent the
Christo...
original security related issues which was the intent of not having the password field a dependency
property? Aren't you just making a very big security hole by doing this?
right i am on on the 20th april if you want my pass i will tell you on there the price is 50 pounds :)
flyinghippie
we will bid starting on 50 and on sever polor bear

flying hippie

on cp tell ur kids
flyinghippie
nice.. concentrate
ameen sheriff
Thanks, you saved my day ;)

Siavash...
Great, thank you...

Daniel
Good
Divya
I am using this code, but I ran into a problem. I am also using Pages and NavigationService. Turns out
Jared Barneck
the NavigationService blanks this password.
So I have a call to the navigation service, and I have to save the password, and replace it afterwards.
Thought I would let you know.
Here are the details:
WPF NavigationService blanks PasswordBox.Password, which breaks the MVVM PasswordHelper
http://www.rhyous.com/2011/04/08/wpf-navigationservice-blanks-passwordbox-password-which-
breaks-the-mvvm-passwordhelper/
Thanks,Can you help me about text block formatting?
ALI
I want to use approximation in text block contents,for example I have a double number like
14.34563466456 and I want to show this number in 2 float, means 14.34; how can I do it? send
answer to my mail please.Thanks alot and Good Luck!
email: ALI_KHALAJI64@YAHOO.COM
For my understanding this code can never run, because calling SetPassword will reset the binding. I
karle
see this in the debugger. (?!)
ur artical is superub Thank's for it. I want to know that cant we set a textbox's input mode to
VINIT KUMAR
password...???
Great article! You made my day, thanks!!!

Kikoo
good code for help me thanks

Praveen Gupta
good work ;)
Abraham
Took me a while to figure this out, but here is a bit more complete bit of XAML showing how to bind.
Joe
"UserPass" is the dependency property on the backend that I bind to:
<StackPanel>
<PasswordBox h:PasswordHelper.Attach="True" h:PasswordHelper.Password="

{Binding Text, ElementName=plain, Mode=TwoWay}" Width="150" />
<TextBlock x:Name="plain" Height="0" Text="{Binding UserPass,

Mode=TwoWay}"/>
</StackPanel>
Hi I'm new to this environment could u please help me for the data binding properties of
Ramya
passwordbox,grid,calendar controls. Thanks in advance:)
that's good
Rakesh
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | ContextMenu
Home
Controls
ContextMenu Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Context Menus in WPF
Custom Controls
Context Menus can be defined on any WPF controls by setting the ContextMenu property to an instance of a ContextMenu. The
Layout items of a context menu are normal MenuItems.
Input
Data Binding
Styling
Localization
Interaction

Resources
<RichTextBox>
2D Graphics <RichTextBox.ContextMenu>
<ContextMenu>
3D Graphics
<MenuItem Command="Cut">
Animation <MenuItem.Icon>
<Image Source="Images/cut.png" />
Multimedia </MenuItem.Icon>
</MenuItem>
Documents
<MenuItem Command="Copy">
Windows 7 <MenuItem.Icon>
<Image Source="Images/copy.png" />
Interoperability
</MenuItem.Icon>
Performance </MenuItem>
<MenuItem Command="Paste">
Expression Blend <MenuItem.Icon>
<Image Source="Images/paste.png" />
Tools
</MenuItem.Icon>
UI Automation </MenuItem>
</ContextMenu>
</RichTextBox.ContextMenu>
</RichTextBox>

ContextMenu.html[2/16/2014 2:57:53 PM]


Show ContextMenus on a disabled controls

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 ShowOnDisabled attached property of the ContextMenuService to True.

<RichTextBox IsEnabled="False" ContextMenuService.ShowOnDisabled="True">
<RichTextBox.ContextMenu>
<ContextMenu>
...
</ContextMenu>
</RichTextBox.ContextMenu>
</RichTextBox>

Merge ContextMenus
If you want to fill a menu with items coming from multiple sources, you can use the CompositeCollection to merge multiple
collection into one.

xmlns:sys="clr-namespace:System;assembly=mscorlib">
<Grid Background="Transparent">
<Grid.Resources>
<x:Array Type="{x:Type sys:Object}" x:Key="extensions">
<Separator />
<MenuItem Header="Extension MenuItem 1" />
</x:Array>
</Grid.Resources>
<Grid.ContextMenu>
<ContextMenu>
<ContextMenu.ItemsSource>
<CompositeCollection>
<MenuItem Header="Standard MenuItem 1" />
<CollectionContainer Collection="{StaticResource extensions}" />
</CompositeCollection>
</ContextMenu.ItemsSource>
</ContextMenu>
</Grid.ContextMenu>
</Grid>
</Window>

How to bind a Command on a ContextMenu within a DataTemplate using MVVM

Since the Popuup control has it's separate visual tree, you cannot use find ancestor to find the Grid. The trick here is to use the
PlacementTarget property, that contains the element, the ContextMenu is aligned to, what is the Grid in our case.

But this is only half of the solution. Because of the data template, the DataContext 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 Tag property to bind the view model from
outside to the grid, which is the PlacementTarget used above. And there we are.

<DataTemplate>
<Grid Tag="{Binding DataContext, RelativeSource={RelativeSource AncestorType={x:Type
ListBox}}}">
<Grid.ContextMenu>
<ContextMenu DataContext="{Binding Path=PlacementTarget.Tag, RelativeSource=
{RelativeSource Self}}">
<MenuItem Content="Cut" Command="{Binding CutCommand}" />
<MenuItem Content="Copy" Command="{Binding CopyCommand}" />
<MenuItem Content="Paste" Command="{Binding PasteCommand}" />
</ContextMenu>
</Grid.ContextMenu>
</Grid>
</DataTemplate>

How to open a context menu from code

The following sample shows you how to open a context menu of a control programmatically:

private void OpenContextMenu(FrameworkElement element)
{
if( element.ContextMenu != null )
{
element.ContextMenu.PlacementTarget = element;
element.ContextMenu.IsOpen = true;
}
}

Last modified: 2011-05-23 08:36:43

Show all comments
Hi anonimo,
Christian
you have to map the "System" clr-namespace to the "sys" XML-Namespace. I added an example to the
Moser
article. Thanks for your feedback.
Greetings
Christian

Hi Everyone,
vinoth
I have created a contextmenu in wpf and it works fine for first click(right click). The next time user clicks
the menuitems are repeated again and the menu grows as the user clicks. how to clear all the items
before the next click.
kinldy help.
Hi Everyone,
vinoth
I have created a contextmenu in wpf and it works fine for first click(right click). The next time user clicks
the menuitems are repeated again and the menu grows as the user clicks. how to clear all the items
before the next click.
kinldy help.
I am creating a custom TextBox control with default ContextMenu as below.
Ritesh
<TextBox.ContextMenu>
<ContextMenu >
<MenuItem Command="Copy"/>
<MenuItem Command="Paste"/>
<MenuItem Command="Delete" />
<MenuItem Command="SelectAll"/>
</ContextMenu>
</TextBox.ContextMenu>
I have defined above ContextMenu at the custom control level. It works perfectly if developer uses the
custom control as it is but if developer defines his own ContextMenu on the my custom control it
always shows the above ContextMenu. I am not sure how can developer be provided the
TemplateBinding.
Nice Example...
RaviGogu
hallow word...
JOSE...
this script not work for me.
article is best
mat
this was wonderful article. from this site i am learning a lot

Karthik
<script language="javascript">
hi
window.document.href("http://www.google.com");
</script>

when dog eat my homework

someone...
Please use CAPTCHA!

me again
I like your simple explanations with a pictures.

Marty
Useless as always...you should branch out to childrens books - - I wish Google would stop finding this
Adam
site!
Thank you!
Mickey
It was very fast help!
Very user-full.
I can't understand why people don't give the code behind way of doing things when they give XAML
Mr Helpful
examples. Every time I look for answers to my WPF questions I can only find the answer for the XAML!
Those of you wondering how to do this in the code behind, it's like this.
(This is the new for my custom expander)
Public Sub New()
Dim cm As New ContextMenu
cm.Items.Add("Expand")
cm.Items.Add("Collapse")
ContextMenuService.SetShowOnDisabled(Me, True)
Me.ContextMenu = cm
End Sub
You could use the same handler and just use a case statement but here is one way of adding your
Mr Helpful
event handler.
Public Sub New()
Dim cm As New ContextMenu
Dim miExpand As New MenuItem
miExpand.Header = "Expand"
AddHandler miExpand.Click, AddressOf Expand_Click
cm.Items.Add(miExpand)
Dim miCollapse As New MenuItem
miCollapse.Header = "Collapse"
AddHandler miCollapse.Click, AddressOf Collapse_Click
cm.Items.Add(miCollapse)
ContextMenuService.SetShowOnDisabled(Me, True)
Me.ContextMenu = cm
End Sub

Public Sub Expand_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
Me.IsExpanded = True
End Sub
Public Sub Collapse_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
Me.IsExpanded = False
End Sub
These samples are a bit misleading at times. Ok if your bumbling about with WPF but not if your a
Taz
professional developer.
thanku so much bro...............it helped a lot....its awsum.... i jst wrote contextMenu.Isopen=true......and it

jagmohan
worked.thanks a lot...:-).u rock.........
singh
Hi,
VIKI
I have a ContextMenu with only One MenuItem. Visibility of the MenuItem is set based on a Property. I
want to Hide the ContextMenu when there is no MenuItem Visible in it. Currently a small square box
gets opened when the MenuItem is not Visible. Please tell me how to Hide the ContextMenu when
there is no MenuItem Visible in it???
Ya, I tried this in WPF. it works...

Kaushal Patel
Thx so much, I used <Grid.ContextMenu></Grid.ContextMenu>
Mik
It works as I expected!
wonderful tutorial man...
Superb... i have used this in my custom control and its working fine...nice
Jigar...
hi.. i have used this in custom control and its working fine..
Jigar...
so its nice article.

mathi
How do you get the ContextMenu (in my case in a DataGrid in .Net 4, to appear to the right of the
Jim
mouse. No matter what I do it is on the left of the mouse. I have tried setting
Placement="" with many values and nothing changes.
Thanks for sharing all this tutorial.

Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | ListBox
Home
Controls
ListBox Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
WPF ListBox Control
Custom Controls
Layout
Input
Data Binding
Styling
Localization
Interaction
Introduction
Resources
The ListBox control displays a list of items. The user can select one or multiple items depending on the selection mode. The typical
2D Graphics 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.
3D Graphics
Animation
<ListBox Margin="20">
Multimedia
<ListBoxItem>New York</ListBoxItem>
Documents <ListBoxItem>Los Angeles</ListBoxItem>
<ListBoxItem>Paris</ListBoxItem>
Windows 7 <ListBoxItem>Zurich</ListBoxItem>
</ListBox>
Interoperability

Performance
Expression Blend How to define a Trigger for IsSelected in the DataTemplate

Tools
If you want to change the appearance of a ListBoxItem when it is selected, you have to bind the IsSelected property of the
UI Automation 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.

<DataTemplate x:Key="myDataTemplate">
ListBox.html[2/16/2014 2:58:29 PM]

<TextBlock Text="{Binding Text}" />
</Border>
<DataTrigger Binding="{Binding RelativeSource=
</DataTrigger>
</DataTemplate>

More articles about the ListBox

Apply a DataTemplate
Strech an Item
Selected Item Background
Layout of Items

Last modified: 2011-05-23 08:36:27

Show all comments
hi , i am very new to WPF. i want to bind the data which is retrieved from the database onto listbox.
Prasad
example, there is customer table in database and i want to retrive the details of all the customers and
want to display onto liztbox.
and also want to add the images to each customer.

plese help me if you could.
Thank you in advance....
Looks like it doesn't work (VS2008).

yuriy-k
Errors:
Step into: Stepping over method without symbols 'WpfDataTemplate.App.App'
System.Windows.Data Error: 25 : ItemTemplate and ItemTemplateSelector are not valid for item.;
Type='ListBoxItem'
Type='ListBoxItem'
Type='ListBoxItem'
ListBox.html[2/16/2014 2:58:29 PM]

Type='ListBoxItem'
-------------------------------- code :
<Window
x:Class="WpfDataTemplate.Window1"
<Window.Resources>
<DataTemplate x:Key="myDataTemplate" >
</Border>
<DataTrigger
Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type
ListBoxItem}},Path=IsSelected}" Value="True">
</DataTrigger>
</DataTemplate>
</Window.Resources>
<ListBox
Margin="20"
ItemTemplate="{StaticResource myDataTemplate}"
>
<ListBoxItem>Los Angeles</ListBoxItem>
<ListBoxItem>Paris</ListBoxItem>
<ListBoxItem>ZÃ¼rich</ListBoxItem>
</ListBox>
</Window>
hi.. first af all i want to appreciate your work. very nice. its dificult to get any tutorial on simple languges.
monika
that u soo much .
Bisht
but i want to suggest smthing if u cant specify all the term y r using like what does hey do.. so that would
be very help full to us for more understanding and clear picture. e.g( <DataTrigger Binding="{Binding
RelativeSource=
</DataTrigger>
specify all the teram u have used in this. just a expamle.. i mean in breif need more discription.
ListBox.html[2/16/2014 2:58:29 PM]

Error 1 The Key attribute can only be used on a tag contained in a Dictionary (such as a
HC
ResourceDictionary). Line 13 Position 23. C:\Codes\C#08\WPFTest\WPFTest\WPFTest\Lists.xaml 13 23
WPFTest
problem occurs at line <DataTemplate x:Key="myDataTemplate">

HC
Hi, very nice tutorials. But I have some troubles with this one. I'm trying to do this :
Witschi
<Window x:Class="WpfDataTemplate.Window1"
<Window.Resources>
<DataTemplate x:Key="myDataTemplate" >
<TextBlock Text="Kikoo" />
</StackPanel>
</Border>
</DataTemplate>
</Window.Resources>
<ListBox Margin="20" ItemTemplate="{StaticResource myDataTemplate}" >
<ListBoxItem>Los Angeles</ListBoxItem>
</ListBox>
</Window>
But the result of my items isn't New york Kikoo.
But just New york, it semms like he doesn't look myDataTemplate
how to bind a database in listbox in wpf application
arrayss
pls give example
rajasekar
Hello.
In my XAML file, I have a ListBox declared like this :
<ListBox x:Name="lstDeck" Height="280" ItemsSource="{Binding Path=Deck}" >
<DataTemplate>
<ListBoxItem Content="{Binding}" />
ListBox.html[2/16/2014 2:58:29 PM]

</DataTemplate>
</ListBox>
In my view model, Deck is an ObservableCollection, so that binding directly displays the content of my
collection.
But when I have several value that hold the same value (for example "10" six times), the selection in the
ListBox has a weird behaviour : it select 2-3 elements instead of the only the one on which I clicked.
Moreover, when I click to another listBoxItem, it doesn't unfocus the previous selected one.
Then it is impossible to see which item is actually selected, and impossible to get the SelectedIndex value.
Has someone an idea?
@rajasekar:
Josh
The item template is used to create visuals (controls) for each data item in the list box. Your data
template contains a ListBoxItem, which is going to be wrapped by the inside of ANOTHER ListBoxItem
because of the item container generation process.
Solution: Don't put a ListBoxItem inside of a DataTemplate. It just doesn't work well. Trying changing this
to a ContentControl for the same results.
Hi, thnx 4 this Tutorial, but with this one gave error when I try to define Trigger to DataTemplate:
Doudy
Error 1 The Key attribute can only be used on a tag contained in a Dictionary (such as a
ResourceDictionary). Line 11 Position 27. D:\Visual Studio\Projects\WPF\WPF IN
C#\ListBoxInWPF\ListBoxInWPF\MainWindow.xaml 11 27 ListBoxInWPF
I hope you
Great and useful Tutorial.... A superb way to tweak the trigger, which is not given in much other tutorial
Aaron
websites but really comes very handy. Solved a lot of my problems...Thanks
cxvxvcx
gffd
You are very handsome :)
nadidbadid
The header image induces that you are standing at the horizon of success
Nice design ;)
Name
E-Mail (optional)
ListBox.html[2/16/2014 2:58:29 PM]

Comment
Post Comment
ListBox.html[2/16/2014 2:58:29 PM]

WPF Tutorial | ListView
Home
Controls
ListView Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
WPF ListView Control
Custom Controls
Layout
How to Hide the Header of a ListView
Input
To hide the header of a ListView you can modify the Visibility property of the ColumnHeaderContainer by overriding the style
Data Binding locally.
Styling <ListView>
<ListView.View>
Localization
<GridView>
Interaction <GridView.ColumnHeaderContainerStyle>
<Style>
Resources <Setter Property="FrameworkElement.Visibility" Value="Collapsed"/>
</Style>
2D Graphics
</GridView.ColumnHeaderContainerStyle>
3D Graphics <GridView.Columns>
...
Animation </GridView.Columns>
Multimedia
</GridView>
</ListView.View>
Documents </ListView>

Windows 7
Interoperability
Performance
Expression Blend
Last modified: 2009-07-16 17:27:35
Tools Copyright (c) by Christian Moser, 2011.
UI Automation
Show all comments
ListView.html[2/16/2014 2:59:33 PM]

Mohamed Can you please any example with most of the properties used for listview.
Harris
It is easily to understand, but it is very short. I need it full function to learning.

mr.ha
to bind image in a listview
Jaydev
How to implement paging in ListView in WPF? Please let me know with an example.
Rakesh
Please show of outputs and give more examples controls
Mallarapu..S...
sri.mallarapu09@gmail.com
Hi, can you please more example to understand listview in detail

Nikunj
sdfsdf
sd
hi
parth
doin my msc it
parth kamani
atmiya
parth kamani
How Can I Made A Menu Like Your Menu(Left Side) in WPF?
Mohssen
I Write This But Don't Show SubMenu Of "aaaaaaa".
<Grid ShowGridLines="True">
<ItemsControl HorizontalAlignment="Left" VerticalAlignment="Center">
<MenuItem Header="aaaaaaa">
<MenuItem Header="ddddddddddd"></MenuItem>
<MenuItem Header="wwwwwwwwwww"></MenuItem>
</MenuItem>
<MenuItem Header="oooooooooooo"></MenuItem>

</ItemsControl>
</Grid>
Please Help Me.
Tank You.
Rajesh
Rajesh Mallela
Hi i am Rajesh Mallela From Banglore i am enjoying ur tutoriol.its really help ful 4 me

Rajesh...
hello
ghfghfghfghfg
Very Nice Tutorial

Adit
But Very Short
Expand it a little More
wow.... great tutorial :/

Me
how to creat a ListView ItemContainerStyle?
ListView
thanks
nice site
him
these commands are trash

these...
these commands are trash

these...

how to use multiple selected item of listview?
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | TextBlock
Home
Controls
TextBlock Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
WPF TextBlock Control
Custom Controls
Layout
How to change the line height within a TextBlock
Input
To change the line hight within a TextBlock, you have to set the LineHeight to the desired height (in logical units) and also the
Data Binding LineStackingStrategy to BlockLineHeight, because otherwhise you will not see any effect.
Styling
<TextBlock Text="This is a
Localization
multiline text."
Interaction LineHeight="25" LineStackingStrategy="BlockLineHeight" />

Resources
2D Graphics
► Tutorial ► Effects ► Text ► Flash Text Effect
3D Graphics

Animation
Last modified: 2011-02-21 12:16:22
Multimedia
Documents
Windows 7
Interoperability
Show all comments
Performance
Expression Blend Commented on 10.July 2011
Thanks alot, you tutorial is very helpful to me. It has help me with background knowledge of wpf. I have
Tools adex
being browsing all around the msdn, but i coud'nt get a concise information with wpf. I am a php developer
UI Automation trying to add c# to my development kits. Thanks alot.
It is very good & very useful to beginners to learn WPF from base.
TextBlock.html[2/16/2014 2:59:52 PM]

WPF Tutorial | TextBlock
Kishor...
Name
E-Mail (optional)
Comment
Post Comment
TextBlock.html[2/16/2014 2:59:52 PM]

WPF Tutorial | Window
Home
Controls
Window Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
WPF Window
Custom Controls
Layout
Articles about Windows
Input
Remove the Icon
Data Binding
Styling
Localization
Interaction
Last modified: 0000-00-00 00:00:00
Resources Copyright (c) by Christian Moser, 2011.
2D Graphics
3D Graphics
Animation
Multimedia
Documents
Windows 7
Interoperability
Performance
Expression Blend
Tools
UI Automation
Window.html[2/16/2014 3:00:29 PM]

WPF Tutorial | UserControls vs. CustomControls
Home
Custom Controls
UserControls vs. CustomControls Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
The differences between CustomControls and UserControls
Custom Controls
WPF has two concepts of controls: UserControls and CustomControls. But what's the difference between them? In this article I try to
Layout list the characteristics of each of them to help you to choose the right type for your project.
Input
Data Binding UserControl (Composition)

Styling
Composes multiple existing controls into a reusable "group"
Localization Consists of a XAML and a code behind file
Cannot be styled/templated
Interaction
Derives from UserControl
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents
This example of an "RGB user control" composes three labels and textboxes as well as a color field together to an reusable part.
The
Windows 7 logic in the code behind file adds a Color DependencyProperty that gets and sets the resolved color.
Interoperability
Performance CustomControl (Extending an existing control)

Expression Blend Extends an existing control with additional features
Tools Consists of a code file and a default style in Themes/Generic.xaml
Can be styled/templated
UI Automation
The best approach to build a control library
CustomVsUserControl.html[2/16/2014 3:00:41 PM]

This example of a "Numeric up/down" control is an extension of a textbox. The up and down buttons are defined in the default
template of the control and wired up in the OnApplyTemplate() override in the logic part of the control. The ControlTemplate
can easily be exchanged by another that has the up,down buttons aligned left for example.
► Tutorial ► Dreamweaver CS4 ► WebPage Templates ► Adobe Dreamweaver

Last modified: 2009-06-16 02:05:27

Show all comments
Good way of explanation. Simple and to the point.

msiravian
cool. Brief and clear.

serhio
Wow, it is that simple indeed!

cp
very good...........
parvendra
Need some more examples to explain

James
@Wazzzuup
Josh
A User Control is simply a composite of existing controls, so you cannot stylize it. However, you can
style the individual elements within that User Control.
It's worth noting the Usercontrol will inherit the global application theme if your using one, that means
Taz
you can apply your theme globally to the entire application. We used Usercontrols heavily as it's a
must for LOB applications.
(at applictaion OnStartup overrides)
Application.Current.Resources.Source = New Uri("/<my namespace>.Resource;Component/Themes/"

+ My.Settings.AppTheme, UriKind.Relative)

It's good
suresh
I need Example code for user Control

B Dinesh
Pretty good, but needs much more elaboration. Thanks for the good site though!
Fred
Nice but I need more examples

Syamala
That clarifies that question. Thanks!

Marius
That clarifies that question. Thanks!

Marius
thanks
sathish
thanks
sathish
Thanks
Parshuram...
Simple explanation and spot-on..!
Mamtha
Cheers
thanks
Arinal
asfghjkl
asdfdfasdf
Thanks Good Inormation

Naveen

Naveen


Naveen
Md. Nasim Nice document . Thanks

Uddin
Really nice information. Thanks.

Shashi
Good,But I need Example

saranya
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | How to Create a Custom Control
Home
Custom Controls
How to Create a Custom Control Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to Create a WPF Custom Control
Custom Controls
This article gives you a step by step walktrough how to create a custom control in WPF. If you don't know the differences between a
Layout user control and a custom control, I recommend to read the article Custom Control vs. User Control first.
Input
Data Binding 1. Define Requirements

Styling
Creating a custom control is quite simple in WPF. But the challenge is to do it the right way. So before you start creating a control try
Localization to answer the following questions:
Interaction What problem should my control solve?

Who will use this control? In which context and environment?
Resources
Can I extend or compose existing controls? Have a look at Existing Controls?
2D Graphics Should it be possible to style or template my control?
What design-time support should it have? In Expression Blend and Visual Studio?
3D Graphics
Is it used in a single project, or part of a reusable library?
Animation
Multimedia
2. Create Project Structures
Documents
Windows 7
Interoperability
Performance
Expression Blend
Tools
UI Automation
HowToCreateACustomControl.html[2/16/2014 3:01:02 PM]

Create a new solution in VisualStudio and start with a WPF Custom Control Library and give it the name PopupControlLib. This is the
place where our custom control comes in. Next we create an WPF Application and call it PopupControlTest. This is place where we
test our control in a simple application.
1. Create a new solution and start with a WPF Custom Control Library. Call it "PopupControlLib".
2. Add a second project of type WPF Application to the solution and call it "PopupControlTest".
3. Add a reference to the custom control library by using the "Add Reference" context menu entry on the "PopupControlTest"
project item in the solution explorer.
4. Rename the CustomControl1 to PopupControl.
3. Choose the right base class

Choosing the right base class is crucial and can save a lot of time! Compare the features of your control with existing controls and
start with one that matches close. The following list should give you a good overview from the most leightweight to more
heavyweight base types:
UIElement - The most lightweight base class to start from. It has support for LIFE - Layout, Input, Focus and Events.
FrameworkElement - Derives from UIElement and adds support for styling, tooltips and context menus. It is first base class
that takes part in the logical tree and so it supports data binding and resource lookup.
Control - is the most common base class for controls (its name speaks for itself). It supports templates and adds some basic
properties as Foreground, Background or FontSize.
ContentControl - is a control that has an additional Content property. This is often used for simple containers.
HeaderedContentControl - is a control that has an Content and a Header property. This is used for controls with a
header like Expander, TabControl, GroupBox,...
ItemsControl - a control that has an additional Items collection. This is a good choice for controls that display a dynamic list
of items without selection.
Selector - an ItemsControl whose items can be indexed and selected. This is used for ListBox, ComboBox, ListView,
TabControl...
RangeBase - is the base class for controls that display a value range like Sliders or ProgressBars. It adds an Value, Minimum
and Maximum property.
4. Override the Default Style

Controls in WPF separate behavior and appearance. The behavior is defined in code. The template is defined in XAML. The default
template is by convention wrapped into a style that has an implicit key. That is is not a string - as usually - but a Type object of our
control.
And that is excactly what we are doing in the static constructor. We are overriding the default value of the DefaultStyleKey
property and set it to the Type object of our control.

static PopupControl()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(PopupControl),
new FrameworkPropertyMetadata(typeof(PopupControl)));
}

5. Create a default Style

The style must be located by convention in a folder called "Themes" that must be located in the root of the control library project. In

these folder we can provide different templates for each Windows theme. The name of these ResourceDictionaries must match the
name of the windows theme. If we do not provide any theme-specific styles, we need to provide the fallback style located in the
"Generic.xaml" file.
As we set the default value of the DefaultStylekey property to the Type object of our control, we must give our default style the
same key to be found. This is done by leaving the x:Key attribute out. In this case WPF uses the type object from the TargetType
property as key.

<ResourceDictionary

<Style TargetType="{x:Type local:PopupControl}">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:PopupControl}">
...
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

</ResourceDictionary>

5. Add DependencyProperties

#region DependencyProperty Content

/// <summary>
/// Registers a dependency property as backing store for the Content property
/// </summary>
public static readonly DependencyProperty ContentProperty =
DependencyProperty.Register("Content", typeof(object), typeof(PopupControl),
new FrameworkPropertyMetadata(null,
FrameworkPropertyMetadataOptions.AffectsRender |
FrameworkPropertyMetadataOptions.AffectsParentMeasure));

/// <summary>
/// Gets or sets the Content.
/// </summary>
/// <value>The Content.</value>
public object Content
{
get { return (object)GetValue(ContentProperty); }
set { SetValue(ContentProperty, value); }
}

#endregion

6. Map XML Namespace

Content follows...
7. Logical and Visual Children

Calling AddLogicalChild() creates the connection to navigate up the logical tree (bubbling).
Overriding GetLogicalChildren creates the connection to navigate down the logical tree (tunneling).
Content follows...
► Tutorial ► C# WPF Example ► WPF Datagrid ► WPF UI Controls

Last modified: 2009-07-17 13:14:56

Show all comments
Really cool article, I tried to do this with the WPF ribbon bar, but it's not working right for some
Trey
reason. Does anyone know how to do this? I've looked on every website i could possibly think of and
still haven't found what I'm looking for. Basically this is what i want to do/accomplish:
1. I have a pretty big project(around 70k lines ) that I'm trying to add a universal ribbon bar to the top
of, each app being able to click through the tabs to get to the common functionality that will be
available to that app
2. I have already created the ribbon(thanks to the walkthroughs of uxpassion.com ) that has a nice
look and feel for what i want, but it is a WPF application(per the walkthrough) with XAML and a .cs file
for all the method calls and functionality the XAML and ribbon require to work
3. I would like to know(if it's possible because i haven't found it anywhere on the web ) if i can use
what i have now for my ribbon bar(code and all) and somehow place it at the top of all my different
projects' pages so as to have the 2007 Office look no matter what you're looking at
I know this may be a noobie question that i just have overlooked or missed somewhere, but I would
really appreciate anything that could help me acheive this(kind of on a deadline) so that my project
will look professional
Thanks in advance!
can you pls also go ahead and explain how to use this control in the wpf application?
Nayak14
Nice ....
Harendra
Keep in post new things.
kumar

Hi! Really nice how you're explaining all that things here! I have to say you helped me a lot by now
lturek
and I will recomend you page!
To my question:
Is it possible to use an Usercontrol which is in the same project?
What I mean is a Solution with one project in it. In that project there is a window using Usercontrol1
which is also in the same project.
Hope you understand what I mean xD
Keep up your work, it's great!
lturek
To my question:
lturek
To my question:
I'm very sorry for the resend >_<

lturek
Your post is good and i need a stylish slider in wpf 3.5. How can i get that in wpf, if you give a post
Lawrence
explaning like this. I ll be happy.
Excellent Post!. I am planning to create a windows Explorer 7 style search

Sam
control, which has a panel similar to list box and 4 search filters.
As I see it, when user clicks the search box a list box popups with last three searches. and a panel
attached to list showing search filters. when user clicks one of the filters, say kind, then it opens a
listbox with all possible search criterion.
Is it possible to do the same with wpf user control .

Nice... Keep in post new things.

Dodge
Excellent....! helped me verymuch.
George
Dmithrov
Keep on posting new things.
can you post further content of this article

learnwpf
Please add more content to this article. May be how to modify the derived control.
Mohamed
Ravindra great artical.

Kumar
My User control has couple of fields to add a new user.
NewDeveloper
Can i use the same control to edit and search too ?
This article is very helpful. I hope to see it completed soon. This site has been helpful in my wpf
Tanner
learning.
I wish to change the color of my custom control according to the value in a custom dependency
property. However there are a few steps I still do not understand to get all that working together.
"The name of these ResourceDictionaries must match the name of the windows theme"
Alex 75
I've a custom control, not a Window ... what name I've to use?
"<Style TargetType="{x:Type local:PopupControl}">"
local is an undeclared namespace.
Alessandro
Please provide some tips to implement this featrue...

How to...
Article is incomeplete. Couldnt find it useful. Sorry

John

Very Help ful for beginers....

VijayS
I dont think it is in no way helpful for beginners. Incomplete articles. total waste of time.
x
How much longer untill you finish what you started? This was posted June 2009???
Wesley De...
Looks like this\'ll be a good article - when its finished.

!
I've created this control, what then? how to create realy custom/useful behavior and view for this
Yuri
control? Can we get some real example?
worthless
!!
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Dock Panel
Home
Layout
Dock Panel Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Dock Panel
Custom Controls
Layout
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics
Introduction
Animation
The dock panel is a layout panel, that provides an easy docking of elements to the left, right, top, bottom or center of the panel. The
Multimedia
dock side of an element is defined by the attached property DockPanel.Dock. To dock an element to the center of the panel, it
Documents must be the last child of the panel and the LastChildFill property must be set to true.
Windows 7
<DockPanel LastChildFill="True">
Interoperability <Button Content="Dock=Top" DockPanel.Dock="Top"/>
<Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>
Performance
<Button Content="Dock=Left"/>
Expression Blend <Button Content="Dock=Right" DockPanel.Dock="Right"/>
<Button Content="LastChildFill=True"/>
Tools </DockPanel>
UI Automation

Multiple elements on one side
DockPanel.html[2/16/2014 3:01:35 PM]

The dock panel layout supports multiple elements on one side. Just add two or more elements with the same dock side. The panel
simply stacks them.

<Button Content="Dock=Top" DockPanel.Dock="Top"/>
<Button Content="Dock=Right" DockPanel.Dock="Right"/>
</DockPanel>

Change the stacking order

The order of the elements matters. It determines the alignment of the elements. The first elements gets the whole width or height. The
following elements get the remaining space.

Last modified: 2010-02-10 10:34:56

Show all comments
<DockPanel>
this.doesn't...
<Button DockPanel.Dock="Top">dock 2.1</Button>
<Button DockPanel.Dock="Left">dock 2.3</Button>
<Button DockPanel.Dock="Right">dock 2.4</Button>
<Button DockPanel.Dock="Bottom">dock 2.5</Button>
</DockPanel>

How can i use the docking mechanism, like in VisualStudio 2008 with WPF.
Somebody
Thanks for reply
Hi,
Christian
the DockPanel is a much more leightweight control than the docking functionality in VisualStudio.
Moser
Check out Tools->Third Party Controls for available Dock Controls.
Is where any way to create some other windows that be dockablle on main window, like in Visual studio
Zzr1400Huray
or Photoshop?
Hello,
JJ
It is possible to dock a wpf window to the screen edge and to a second wpf window like in Winamp?
Thanks.
Why is it when I try creating background for 3 or more dockpanels each with matching transition colors,
Angga
there will always be a line divider with a light color between several docked panels?
This prevents me from creating smooth color transition between them.
HELLO! THANKYOU THANKYOU THANKYOU!!!! Your example has saved me Massively!!!
crazyTequila
Cheers
Coooooooooool man
Sunil
nice description given... thank u!!!

durga
I have a question. Suppose I have only two group boxes in a dock panel. Both are having dock panel =
Raman
top; It means they will be positioned on below other. Now If I hide the top group box the lower one
should move up just like it happened in win forms. But its not happening. How can I achieve this?
@Raman - when you say 'hide the top group box' is that using Visibility="Hidden"? If so, try using
lukearl
Visibility="Collapsed" instead.
Good...

arunkali
Thanks a LOT!
Matthias
Which Assembly reference should I have include in order to us Dock Panel?
MAK
this is not good
Khaniya
and be more if added runtime cs code to achieve same
thanks
Is it possible to dock a wpf form from one application to another wpf application?
Louie
Is it possible to dock a wpf form from one application to another wpf application?
Louie
Thank you, just what I was after

Mike
Good one
Liza
<DockPanel>
nn
<Button DockPanel.Dock="Left">dock 2.3</Button>
<Button DockPanel.Dock="Right">dock 2.4</Button>
</DockPanel>
<input type="submit" value="enviar">

Claudio
<script>alert(\"S\");</script>
example
gfgfgf
<Button Content="Dock=Top" DockPanel.Dock="Top"/>

<Button Content="Dock=Right" DockPanel.Dock="Right"/>
</DockPanel>
<input type="submit" value="enviar"/>

Test
<button>bla</button
x
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Canvas Panel
Home
Layout
Canvas Panel Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Canvas Panel
Custom Controls
Layout
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Introduction
Documents The Canvas is the most basic layout panel in WPF. It's child elements are positioned by explicit coordinates. The coordinates can be
specified relative to any side of the panel usind the Canvas.Left, Canvas.Top, Canvas.Bottom and Canvas.Right
Windows 7 attached properties.
Interoperability The panel is typically used to group 2D graphic elements together and not to layout user interface elements. This is important
because specifing absolute coordinates brings you in trouble when you begin to resize, scale or localize your application. People
Performance
coming from WinForms are familiar with this kind of layout - but it's not a good practice in WPF.
Expression Blend
Tools
UI Automation
<Canvas>
<Rectangle Canvas.Left="40" Canvas.Top="31" Width="63" Height="41" Fill="Blue" />
<Ellipse Canvas.Left="130" Canvas.Top="79" Width="58" Height="58" Fill="Blue" />
<Path Canvas.Left="61" Canvas.Top="28" Width="133" Height="98" Fill="Blue"
Canvas.html[2/16/2014 3:02:06 PM]

Stretch="Fill" Data="M61,125 L193,28"/>
</Canvas>

Override the Z-Order of Elements

Normally the Z-Order of elements inside a canvas is specified by the order in XAML. But you can override the natural Z-Order by
explicity defining a Canvas.ZIndex on the element.

<Canvas>
<Ellipse Fill="Green" Width="60" Height="60" Canvas.Left="30" Canvas.Top="20"
Canvas.ZIndex="1"/>
<Ellipse Fill="Blue" Width="60" Height="60" Canvas.Left="60" Canvas.Top="40"/>
</Canvas>

Last modified: 2010-04-23 20:59:02

Show all comments
Use Grid.SetZIndex(element, index) or Canvas.SetZIndex(element, index)

Berni
Is it possible to add visible grid lines to the canvas? Say a user dragged a control to the canvas and
SDI
you wanted it to snap to the grid lines defined by the user...
but i couldnt find Zindex property

sharmi
Canvas.html[2/16/2014 3:02:06 PM]

I'm a born again Christian and I don't believe in WPF. It's the devil's work.
Saphron
I am an isreali and I am claiming a birthright to use WPF. I will not tolerate any native developers
Andrew
making similar claims.
nice one
Arvinth
I'm a Palestinian and I like to shoot large rockets randomly in the air for fun regardless if they kill
SuicideBomber
innocent people. It's my people's pastime and I have a birthright to do it. One day I will blow myself
up in a eatery in Israel. It will be so fun!!!!!!!!!
canvas.SetZindex(UIcontrol,value) will sent zindex by programming

Amit Prajapati
I am having data points, which i want plot in 4 Quadrant on canvas. I want the origin at center of the
Mangesh
Canvas. Please Help me.
Good, Free Software HERE : www.AmazingIT.blogspot.com

AmazingIT
Hello! decacke interesting decacke site!

Pharmg920
Nice Explanation
Shrinivas
good article ...

ramesh lamani
Nice article thank U

Britto
good
Rajasekar N
Its Nice
Rajesh
Canvas.html[2/16/2014 3:02:06 PM]

Good one
Amit
If this is not good practice, then how can I control the position of my controls? I do NOT want my
Clarence
GRID dead set in the middle of my form, I want it at the top. Also, I want to position controls in
various places throughout the form for the look and feel I desire. I'm new to this but to do otherwise
means that WPF places the controls where it sees fit. What am I missing here, because it's frustrating. I
see a lot in the tutorials about setting up the controls, that easy.... what about the advanced, real
world stuff? No matter how new some of us are to something, we're still very far beyond hello world!
Who knows how to write about that stuff?
I'm trying to figure out how to host a wpf app within another one (like a plugin). I want to use a canvas
Jimmy
as a container for the plugin app. Is this possible, or is there a more effective way of doing so?
Hi Jimmy,
Christian
using a canvas is not a good way to host a plugin. A better way would be using a ContentControl or a
Moser
ContentPresenter and set the Content property to the UserControl you want to host.
If you plan to do a more elaborate application, try the PRISM framework. It covers UI composition and
modulary aspects.
Greetings
Christian
Hi,
noone
I want to use a canvas panel to be editable after running the WPF application.
Is it possible, if possible how to achieve this
k
k
This is fine. My question is, which way to go when one wants thousands of interactive objects(e.g.
Sam
rectangles) on the canvas? The way presented here is to slow (up from 1500 rectangles it is getting
not interactive anymore). What would be the alternative???
This is fine. My question is, which way to go when one wants thousands of interactive objects(e.g.
Sam
rectangles) on the canvas? The way presented here is to slow (up from 1500 rectangles it is getting
not interactive anymore). What would be the alternative???
"I want to position controls in various places throughout the form for the look and feel I
ocsirf
desire." --EXACTLY!! I'm also new at WPF and so far the only thing that DOESN'T SUCK is a
canvas. WTF is all the other layout BS I'm seeing, frustrating indeed. How can I anchor stuff to one
Canvas.html[2/16/2014 3:02:06 PM]

side/corner of the Window like I could in Old School Windows Forms? That was easy and it made
sense!
Name
E-Mail (optional)
Comment
Post Comment
Canvas.html[2/16/2014 3:02:06 PM]

WPF Tutorial | Wrap Panel
Home
Layout
Wrap Panel Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Wrap Panel
Custom Controls
Layout
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents Introduction
Windows 7 The wrap panel is similar to the StackPanel but it does not just stack all child elements to one row, it wraps them to new lines if no
space is left. The Orientation can be set to Horizontal or Vertical.
Interoperability
The WrapPanel can be used to arrange tabs of a tab control, menu items in a toolbar or items in an Windows Explorer like list. The
Performance
WrapPanel is often used with items of the same size, but its not a requirement.
Expression Blend

Tools <WrapPanel Orientation="Horizontal">
UI Automation <Button Content="Button" />
</WrapPanel>
WrapPanel.html[2/16/2014 3:02:39 PM]



Last modified: 2010-03-02 11:01:47

Show all comments
This is absolutely the most deatiled example of the Stack Panel I have ever seen! The author took no
vb guy
shortcuts here as all of the WPF StackPanel properties and events are clearly explained alone with Figures
for the the more visual people. This link should be the authorative link for everything related to "Stack
Panel". Cheers and thanks for the total effort!
Vb Guy, if you want to learn more go to the MSDN. This is basic for the WrapPanel, and it's enough for the
thankful...
people who didn't know nothing about that. You must be truly thankful for the effort by the author of this
site.
I agree. The fact that this website has pictures and plain-english explanations makes it the best website so
Dantarion
far to just read to learn about the different components of WPF.
MSDN is good for API stuff, but for light reading and overviews, its not so great
In the second paragraph under "Introduction," it begins, "The StackPanel can be used..." -- I think you
Joel
meant, "The WrapPanel can be used...."
No Joel, read it againâ�¦ It makes sense. The paragraph is talking about common uses for each and where
Matt
you would use a StackPanel as opposed to a WrapPanel.
Thanks for the help. What panel would you use to hold images for a photo gallery?
Betsy
very nice
raman
I agree with VB guy... your just wasting everyones bandwidth.

Me

wow is its a awesome tuturial

Nomaan
so so tutorial. not so useful

sssssss
<WrapPanel Orientation="Horizontal">
4545
</WrapPanel>
Nice article.
Prasanta
very nice
suma
nice and light article

sm
I agree with the comment about wasting bandwith.

Why
I am new to WPF and am trying to convert a VB6 project to WPF using VB2010. We used a lot of Data
cstill
Repeaters in the VB6 project and I am looking for a replacement for that in WPF. What would be the best
replacement?
I have a wrap Panel. Now I want to add 1000 000 buttons into it. I write the method
CuongDV
private void AddButtons()
for (int i = 0; i < 10000; i++)
Button newBtn = new Button();
newBtn.Content = i.ToString();
wrapPanel1.Children.Add(newBtn);
But when run this code I see that the wrapPanel only display 1000 000 buttons after added 1000 0000

completely. Now I want after adding each button, the wrapPanel will updateLayout(or refresh) immediately
so that I can see that button . Can you help me how to do that?
Totally agree with vb guy. I am visually oriented, so images are the best. I think the xaml is too long to read.
mike

The last paragraph should be titled conclusion for better clarity, text is too clutered.
I am wandering again and again. Very nice job. Thanks

Rahi,...
Miu
Thanks for to the point and simple description! Simplicity is rare! :)
Thanks,Nice artical.....
Gourav
I noticed this was copy righted. Can I still use a WrapPanel?

Mike
Excellent and strait forward example!

Roman P
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | ViewBox
Home
Layout
ViewBox Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to use the ViewBox in WPF
Custom Controls
Layout
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
Introduction
3D Graphics
Animation
The ViewBox is a very useful control in WPF. If does nothing more than scale to fit the content to the available size. It does not
resize the content, but it transforms it. This means that also all text sizes and line widths were scaled. Its about the same behavior as
Multimedia if you set the Stretch property on an Image or Path to Uniform.
Documents Although it can be used to fit any type of control, it's often used for 2D graphics, or to fit a scalable part of a user interface into an
screen area.
Windows 7
<Button Content="Test" />
Interoperability
<Viewbox Stretch="Uniform">
Performance
<Button Content="Test" />
Expression Blend </Viewbox>

Tools
UI Automation

Last modified: 2009-05-19 00:16:31
ViewBox.html[2/16/2014 3:02:51 PM]

Show all comments
Textwrapping is not working with Viewbox.. I tried lots of.. please let me know if any solution or
Ujval
alternative
Hi Ujval,
Christian Moser
The viewbox gives it's content infinite space. Then is measures the size of the content and scales the
content, so that is fits into box. That is the reason why textwarpping is not working, because the
TextBlock has no reason to wrap the text, if infinite space is available.
Hi Moser ,
vimal
I have a problem using the viewbox control. I have a shape derived from frameworkelement. I am
getting these shapes dynamically. The dimension of these shapes is very small. What i need to do is
to show these shapes to a fixed size enlarged . say (width = 50, height = 50) . How can i do this.
What i did is , I made this shape inside a border set it a width and height. Then i put these inside a
viewbox and made stretch = fill . But it didnt work as i expected. The shape goes beyond 50 and a
lot more.. pls help.
I fixed it eventhough you didnt tell me a solution

vimal
Murad Mohd How you did it Vimal?

Zain
How can i set the background color of a VeiwBox? There is no property available for it :|
Raul
Murad Mohd vimal I like your solution. Thanks.

Zain
This is way too simplistic to actually be defined as a tutorial on the viewbox. Where is the data binding
James
to the viewbox, the many properties associated with the viewbox and the databinding to those
properties. How do you change the view within the viewbox, lets say that little button was a separate
user control with it's own code behind containing it's own event handlers and you clicked it and the
intent was to send a larger version of the button, scaled to not look like a brick from super mario
bros and display it in the viewbox. Not only that what if it had an enumeration of buttons and then
you wanted to display them in the viewbox like a dynamic picture viewer. Way to do the bare
ViewBox.html[2/16/2014 3:02:51 PM]

minimum and stop, you could of at least provided a link that says, for more go to...
Great tutorial. That's all I needed. Thanks

Jean-Pierre...
I am making a image viewer. First I have Buttons inside a uniforgrid, I want to click the Button and
Betsy
send the image to a viewbox. Can you help me with this? Thanks for all the tutorials,they are very
helpful!!!
hi betsy,
vimal
If i get u right, then u can put a contentcontrol inside your viewbox and set the image as the content
of the content control. Hope this is what u need.
hi betsy,
vimal
If i get u right, then u can put a contentcontrol inside your viewbox and set the image as the content
of the content control. Hope this is what u need.
Thank-you vimal I'll work on that.

Betsy
C-MOSE
Hi, Can the viewbox tool display Pictures? and if the answer is yes, How to do so?
SHeeDeED
...
Can anybody tell me that why i cant set the value from code behind for the child element of Viewbox.
DragonBaki
For eg., I have the structure like this..
<Border>
<ViewBox>
<TextBlock/>
</ViewBox>
</Border>
In this structure, I need to display the textblock after animation. I cant able to this by making the
visibility property as visible from code behind as well as i cant able to set the text value from code
behind.. It shows the error as "Object reference not set". Can anybody help me out to
overcome it..?
ViewBox.html[2/16/2014 3:02:51 PM]

dfsgbdfsgdf
dfghsdfhsd
Hi How are you?

Bob Dole
That\'s way the besetst answer so far!

Velvet
i m fine
boom
hi,
Prathyusha
can we display viewbox as message box
Name
E-Mail (optional)
Comment
Post Comment
ViewBox.html[2/16/2014 3:02:51 PM]

WPF Tutorial | Create a Custom Layout Panel
Home
Layout
Create a Custom Layout Panel Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to create a Custom Layout Panel in WPF
Custom Controls
WPF already ships with a rich set of layout panels. Each of them fits to solve a particular problem.
Layout
Canvas - To arrange elements by X,Y coordinates.
Input
Grid - To arrange elements based on rows and columns.
Data Binding StackPanel - To stack elements horizontally or vertically.
DockPanel - To dock elements to a particular side.
Styling
WrapPanel - To stack elements and automatically begin a new row.
Localization
But sometimes none of the included layout panels helps you to arrange child elements in the way you like it. In this case its easy to
Interaction write your own layout panel. All you need to do is to create a new class that derives from Panel. There are two methods to override:
Resources
MeasureOverride - to determine the required size of the panel according to the desired size of the child elements and the
2D Graphics available space.
ArrangeOverride - to arrange the elements in the finally available space. The final size can be smaller than the requested.
3D Graphics

Animation public class MySimplePanel : Panel
Multimedia
{
// Make the panel as big as the biggest element
Documents protected override Size MeasureOverride(Size availableSize)
{
Windows 7
Size maxSize = new Size();
Interoperability
foreach( UIElement child in InternalChildern)
Performance
{
Expression Blend child.Measure( availableSize );
maxSize.Height = Math.Max( child.DesiredSize.Height, maxSize.Height);
Tools maxSize.Width= Math.Max( child.DesiredSize.Width, maxSize.Width);
}
UI Automation
}

// Arrange the child elements to their final position
protected override Size ArrangeOverride(Size finalSize)
CustomLayoutPanel.html[2/16/2014 3:03:36 PM]

{
foreach( UIElement child in InternalChildern)
{
child.Arrange( new Rect( finalSize ) );
}
}
}

Popular Custom Panels

Here are some popular custom panels on the internet:
TreeMap Panel
Animating Tile Panel
Radial Panel
Element Flow Panel
Ribbon Panel

Last modified: 2009-08-11 01:07:26

Show all comments
Good example..
Venu
Not so good example - according to Microsoft http://msdn.microsoft.com/en-

Ido Ran
us/library/system.windows.frameworkelement.measureoverride.aspx
you should call Measure on each of the children before getting their DesiredSize - you forgot to do
that.
Hi Ido,
Christian
thanks for the feedback. I really forgot to call Measure(). I corrected it in the example.
Moser
You're also not returning the values in the methods. This wont compile
Chris
Very nice article

Rajesh

some more clear

vishnuvardhan
As someone already said, you aren't returning the values from methods and "Children" is spelled
Steve
incorrectly in "InternalChildern" [sic].
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Keyboard
Home
Input
Keyboard Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to Convert a System.Windows.Input.Key to a Char
Custom Controls
Today i wanted to write a custom input control that hooks up to the KeyDown event of a CustomControl to collect the typed chars. In
Layout the KeyEventArgs you find a e.Key that is of type System.Windows.Input.Key. I tried to use the KeyConverter or cast
it to a char or string, but nothing seems to work.
Input

Data Binding
private string _text = string.Empty;
Styling
void MyControl_KeyDown(object sender, KeyEventArgs e)
Localization
{
Interaction _text += e.Key;
}
Resources

2D Graphics The solution is to hook to another event called TextInput. The provided TextCompositionEventArgs has a Text property
3D Graphics
that is excatly what we want. The event handler will look like this:

Animation
void MyControl_TextInput(object sender, TextCompositionEventArgs e)
Multimedia {
_input += e.Text;
Documents
}
Windows 7

Interoperability
Performance ► Tutorial ► Convert Unicode ► Convert Text ► Convert C#
Expression Blend

Tools Last modified: 2009-06-17 17:31:13

UI Automation
ConvertKeyToChar.html[2/16/2014 3:03:49 PM]

Show all comments
is it really working ?
nandy
Can you explain it a bit more?

Vimal
Can WPF application windows can process mouse events through SendMessage() notifications (with or
KingMarcusVi...
without mouse pointer hovering above its window)?
First example is NOT WORK.

George
I tried its not working.

sara
Hi, what exactly is not working?
Christian
Did you register the eventhandler? TextInput += MyControl_TextInput;
Moser
Do you receive the entered text in the _text string?
Heres some keyboard input for you buddy.
Mr Sda
Your a boss eyed jack ass.
Agree with Mr.Sda

Agree
Oh, good joke) Why do birds fly south for the winter? It's quicker than driving.
tarahgiv
___________________________
<a href= http://ordervigerausa.fizwig.com/site_map.html >cealis order San Jose</a>
This does not work !!

Jonathan
TextBox will mark the key press as handled, use PreviewTextInput event.
Phil
Code is not working....

ajay sharma

2 things:
COPYRIGHT
1. you paki's are dumb as hell
2.COPYRIGHT INFRINGEMENT AT ITS FINEST!!!!!!!!!
MOSER IS GREASY AS HELL
Christian
Christian M
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | RoutedCommands in a ContextMenu
Home
Input
RoutedCommands in a ContextMenu Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to Solve Execution Problems of RoutedCommands in a WPF
Custom Controls
ContextMenu
Layout
Input
The Problem
Data Binding
I recently run into a problem, with RoutedCommands in a ContextMenu. The problem was, that the commands could not be
Styling executed, even if the CommandBinding on the parent window allowed it.
Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
The following example shows the problem with simple window that has a Menu and a ContextMenu on it. Both menus contains a
Multimedia
MenuItem with a "Cut" command set.
Documents

Windows 7 <Window x:Class="RoutedCommandsInPopups.Window1"
Interoperability xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Performance
<StackPanel x:Name="stack" Background="Transparent">
Expression Blend <StackPanel.ContextMenu>
<ContextMenu>
Tools <MenuItem Header="Cut" Command="Cut" />
UI Automation
</ContextMenu>
</StackPanel.ContextMenu>
<Menu>
<MenuItem Header="Edit" >
<MenuItem Header="Cut" Command="Cut" />
RoutedCommandsInContextMenu.html[2/16/2014 3:04:04 PM]

</MenuItem>
</Menu>
</StackPanel>
</Window>

In the codebehind of the Window I added a CommandBinding to handle the "Cut" command.

public Window1()
{

CommandBindings.Add(
new CommandBinding(ApplicationCommands.Cut, CutExecuted, CanCut));
}

private void CutExecuted(object sender, ExecutedRoutedEventArgs e)
{
MessageBox.Show("Cut Executed");
}

private void CanCut(object sender, CanExecuteRoutedEventArgs e)
{
e.CanExecute = true;
}

The Reason
The reason is, that ContextMenus are separate windows with their own VisualTree and LogicalTree.
The reason is that the CommandManager searches for CommandBindings within the current focus scope. If the current focus scope
has no command binding, it transfers the focus scope to the parent focus scope. When you startup your application the focus scope
is not set. You can check this by calling FocusManager.GetFocusedElement(this) and you will receive null.
The Solution
Set the Logical Focus
The simplest solution is to initially set the logical focus of the parent window that is not null. When the CommandManager searches
for the parent focus scope it finds the window and handels the CommandBinding correctly.

public Window1()
{

CommandBindings.Add(
new CommandBinding(ApplicationCommands.Cut, CutExecuted, CanCut));

// Set the logical focus to the window
Focus();
}

...or the same in XAML

<Window x:Class="RoutedCommandsInPopups.Window1"
FocusManager.FocusedElement="
{Binding RelativeSource={x:Static RelativeSource.Self}, Mode=OneTime}>
...
</Window>

Manually bind the CommandTarget
Another solution is to manually bind the CommandTarget to the parent ContextMenu.

<MenuItem Header="Cut" Command="Cut" CommandTarget="
{Binding Path=PlacementTarget,
RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type ContextMenu}}}"/>


Last modified: 2009-06-17 12:26:26

Show all comments
very useful. thanks.

alex
ads
a
Now that is the best idea I've read all day. Thank you for posting it.
speed
Super!
Dario
thanks
At last! That's what I was looking for.

Ed

Thank you for that, saved me a lot of time.

Andreas
Nice tutorial.really saved my time

Aftab
did not help in my situation.

a
Thank you. Your post really helped me. I've been looking into this problem for 2 days, and your post
Kai
answered my question.
thanks :)
serine
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Mouse
Home
Input
Mouse Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Mouse Handling in WPF
Custom Controls
Layout
How to get the Absolute Position of the Mouse on the Screen
Input
You can call Mouse.GetPosition(this) on any WPF element. This function returns the relative offset of the mouse to the upper
Data Binding left corner of your control.
Styling To get the absolute screen cordinates, call the PointToScreen() function.
Localization
Point absoluteScreenPos = PointToScreen( Mouse.GetPosition( new Point(), this ));
Interaction

Resources
2D Graphics
► Tutorial ► ActionScript ► Flash CS3 ► Loaded
3D Graphics
Animation
Last modified: 2009-06-17 17:39:50
Multimedia Copyright (c) by Christian Moser, 2011.
Documents
Windows 7
Interoperability
Show all comments
Performance
Expression Blend Commented on 11.August 2009
Johhny This is how you do it in WPF NOT JAVA, for gods sake.
Tools
Rubber
UI Automation
Thank you very much ! it's so hard to find a good solution to do that !
David
Mouse.html[2/16/2014 3:04:39 PM]

WPF Tutorial | Mouse
Johhny Rubber wrote " This is how you do it in WPF NOT JAVA, for gods sake."
Jeff
This is a WPF tutorial and not Java, so why would you think otherwise?
It really works!
balaji
Jeff wrote "This is a WPF tutorial and not Java, so why would you think otherwise?"
Paul
Perhaps somebody was talking about Java, and Johnny was trying to correct them by telling them that
this is a WPF tutorial.
Java? wtf? ThatÂ´t not possible, for gods sake. Think...

Alisator
Nice tut.
Brandon
hi, is there a way to set the position of the mouse?

xl
Name
E-Mail (optional)
Comment
Post Comment
Mouse.html[2/16/2014 3:04:39 PM]

WPF Tutorial | Mutli Touch
Home
Input
Mutli Touch Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Introduction to Multitouch Programming in WPF 4.0
Custom Controls
Please note: This article is outdated and needs to be updated!
Layout
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents
Windows 7
Interoperability
Windows 7 and .NET 4.0 only
Performance
Expression Blend In version 4.0 of the .NET framework, Microsoft supports multitouch programming. The .NET API builds on the native Win32 API that
is only available in Windows 7 and later versions. You can simulate multitouch on Windows Vista by using a special user input
Tools management layer that emulates multitouch on a normal PC.
UI Automation
What is availabel in Beta 1

The manipulation events are already available in Beta 1, but the WPF controls do not take use of them. In later versions you can just
Multitouch2.html[2/16/2014 3:04:51 PM]

enable manipulation of sliders or scrollviewers on control level
How to handle multitouch input

Multitouch gestures like scaling, panning or rotating are already preprocessed by the underlying layer. You will receive the result in
form of an Manipulation struct that contains a Expansion, Rotation, Scale and Translation. The information is
provided in four maniuplation events:
ManipulationStarted
ManipulationDelta
ManipulationStarting
ManipulationCompleted
To enable receiving manipulation events you have to set the ManipulationMode to the manipulations you want to enable. If you
want to receive all kind of manipulations, you can set the ManipulationMode="All".
How to create a simple WPF multitouch foto viewer

Create a new WPF 4.0 solution.

public class TouchImage : Image
{
private MatrixTransform _matrixTransform;

public TouchImage()
{
ManipulationMode = ManipulationModes.All;
_matrixTransform = new MatrixTransform();
RenderTransform = _matrixTransform;
}

protected override void OnManipulationDelta(ManipulationDeltaEventArgs e)
{
var manipulation = e.GetCumulativeManipulation((IInputElement)Parent);

var delta = e.GetDeltaManipulation((IInputElement)Parent);
Matrix matrix = _matrixTransform.Matrix;

var originalCentre = new Point(ActualWidth / 2, ActualHeight / 2);
matrix.Translate(delta.Translation.X, delta.Translation.Y);
matrix.Transform(originalCentre);

var centre = matrix.Transform(originalCentre);
matrix.RotateAt(delta.Rotation, centre.X, centre.Y);

centre = matrix.Transform(originalCentre);
matrix.ScaleAt(delta.Scale, delta.Scale, centre.X, centre.Y);

_matrixTransform.Matrix = matrix;
e.Handled = true;

base.OnManipulationDelta(e);
}
}



Last modified: 2010-05-17 23:52:20

Show all comments
Typo: availabel -> What is availabel in Beta 1

Diego
WoW,oh my god
saman
Look at the Title in the Menu: Mutlitouch

-
You mentioned "emulates multitouch on a normal PC" .Will it work for normal monitor(any pc
Bala
monitors)?
Bala, of course that will not work on any normal monitor. One thing are PCs and another thing are
Josep
monitors. You need to capture the points that you touch.
Sorry, my english is not very good.
Ok...Thanks. Josep :)
Bala
no props
heman
hi ..
Mohammed
thanks for the tutorial but i have small problem.
my problem is e.GetCumulativeManipulation is not exist in my visual studio 2010
what i can do..
i use winxp sp3..

bye.
Just a friendly tip regarding your website's banner: http://theoatmeal.com/comics/apostrophe

Rob
COPYRIGHT INFRINGEMENT AT ITS FINEST!!!!!!!!!
FBI
MOSER IS GREASY AS HELL
YOU LOOK LIKE A GOOF IN YOUR PICTURE HAHAHA

FBI
The title in the menu system under "Input">"Mutli Touch" is not spelled correctly. (someone else
another-
commented in January but you still haven't fixed it. :P
I Christian!!!
Eduardo
You are using manipulationdelta, but if i want define a new gesture, how can i do?, example, fix one
touch, and second touch move vertical that mean in 3D rotate axis X, another example, if i fix one
touch and second touch move horizontal that mean in 3d rotate axis Y
please i hope your answer.
another-
Myth
This guy just copied and pasted bits and pieces of tutorials onto his own website (look in the comment
sections on multiple of the 'tutorials' he even admits it lol); I'm sure the typos are in the source as well
Kuldeep Nice WOrk..

Verma
Mutley touch? menu fail mutlitouch

Mutli
B. Clay Yes, mutlitouch is a new pattern, paradigm, or practice where you code with a pooch at your side.
Shannon
Name
E-Mail (optional)
Comment

Post Comment

WPF Tutorial | Debug DataBinding Issues
Home
Data Binding
Debug DataBinding Issues Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Debug Databinding Issues in WPF
Custom Controls
DataBinding is one of the most powerful features in WPF. But because it resolves the bindings at runtime and does not throw
Layout exceptions, it's sometimes hard to find the reason why the data do not appear as expected.
There are mainly two reasons:
Input
The DataBinding expression is invalid. Then use Trace Output to resolve.
Data Binding The DataBinding expression is valid, but the result is not the expected. Then use a Debug Converter to resolve it.
Styling
Localization Method 1: Trace messages in the output window

Interaction In the example, the text property of the TextBlock is bound to the property "InvalidPath" of the StackPanel - which does not exists.
Resources
<Window x:Class="DebugDataBinding.Window1"
2D Graphics xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3D Graphics
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<StackPanel x:Name="stack">
Animation <TextBlock Text="{Binding ElementName=stack, Path=InvalidPath}" />
</StackPanel>
Multimedia
</Window>
Documents

Windows 7 In this case the invalid databinding expression is reported by a trace message in the output window
Interoperability
System.Windows.Data Error: 39 : BindingExpression path error: 'InvalidPath' property not
Performance found on 'object' ''StackPanel' (Name='stack')'. BindingExpression:Path=InvalidPath;
DataItem='StackPanel' (Name='stack'); target element is 'TextBlock' (Name=''); target
Expression Blend property is 'Text' (type 'String')
Tools
Note: Binding to a path of a property that has NULL value is a valid expression and does not generate an error message (for e.g.
UI Automation binding to a property of the data context that is NULL).
Adjust the trace level (.NET 3.5 and higher)
DebugDataBinding.html[2/16/2014 3:05:07 PM]

NET3.5 has a new feature that allows you to set the level of details of trace messages to None, Low, Medium or High.
To set the trace level you have to include an extra namespace to your XAML:

xmlns:diag="clr-namespace:System.Diagnostics;assembly=WindowsBase">

<TextBlock Text="{Binding ElementName=stack, Path=InvalidPath,
diag:PresentationTraceSources.TraceLevel=High}" />
</StackPanel>
</Window>

The following snipped shows how to adjust the trace level by code:

PresentationTraceSources.DataBindingSource.Listeners.Add(
new ConsoleTraceListener());

PresentationTraceSources.DataBindingSource.Switch.Level = SourceLevels.All;

Method 2: Use a ValueConverter to break into the debugger

A simple trick is to write a value converter that does nothins except breaking into the debugger. All you need to do now is to add this
converter to the binding expression that fails and you can easily see the values that should be bound.

/// <summary>
/// This converter does nothing except breaking the
/// debugger into the convert method
/// </summary>
public class DatabindingDebugConverter : IValueConverter
{
{
Debugger.Break();
return value;
}

{
Debugger.Break();
return value;
}
}

To use the converter in XAML, reference the namespace of the assembly that contains the converter and add an instance of it to the
resources of your window.


xmlns:local="clr-namespace:DebugDataBinding"

<Window.Resources>
<local:DatabindingDebugConverter x:Key="debugConverter" />
</Window.Resources>

<TextBlock Text="{Binding ElementName=stack, Path=ActualWidth,
Converter={StaticResource debugConverter}}" />
</StackPanel>
</Window>

► Tutorial ► C Sharp Tutorial ► ASP Net Tutorial ► VB Net

Last modified: 2009-06-08 08:31:10

Show all comments
No one proofreads these articles, do they?

J
No, it's just me writing and publish them. But I am anxious to provide technically correct information. If
Christian
someone notices a mistake, I will correct it.
Moser
I believe 'J' was referring to the second bullet point of the introduction:
drewed
"The DataBinding expression is valid, but it . Then use Method 2 to resolve"
But it what?
does "nothins" except....

IC
Need A example to bind data from sql server to controls...

Vishal

Hi Vishal,
Christian
you cannot bind data from an SQL database directly to WPF controls. You need to load the data into
Moser
objects first. This is because WPF binding depends on properties. You can use LINQ to SQL, Entity
Framework or Typed Datasets to nao your data in objects.
I hope this helps.
Another solution is to implement a trace listener that you add to the DataBindingSources
Ben
TraceListenerCollection in PresentationTraceSources. You can override the TraceEvent methods
implemented by the trace listener and either throw an exception or call Debugger.Break() to break into
the debugger whenever a data binding error occurs.
Thanks ... very helpful

Richard
very useful
Elia
Is it possible to bind the XML directly?

sathish
Salam :)
MAF
No you can't, you can use LINQ to XML or use an instance of XmlDataProvider.
very nice article

Farzad
specially the second part
Another solution is to declare ExceptionValidationRule in Binding.ValidationRules. It causes all

Ricibald
exceptions thrown in the databinding process to be reported as validation errors.
Fantastic. You should work for MS and this should be in MSDN Library!
Tony Wall
Another solution is to implement a trace listener that you add to the DataBindingSources
Ben
TraceListenerCollection in PresentationTraceSources. You can override the TraceEvent methods
implemented by the trace listener and either throw an exception or call Debugger.Break() to break into
the debugger whenever a data binding error occurs.
Ricibald: Can you post an example of how this is done? Also will all this work with Silverlight 4.0?
Eric

A similar post written long back - http://www.beacosta.com/blog/?p=52

akjoshi
Hi Christian,
Bala
Could you please let me know how and where Path=ActualWidth is getting is used in the above
example 2
Thanks a million! This helped us solve a similar problem with Silverlight 4.0. We were trying to bind an
Lily
IsChecked property of a ToggleButton to an IsChecked custom DependencyProperty of a custom
control.
Thank you very much for this cool idea. To ensure that the ValueConverter is indeed "reached", use the
WPF-Coder
following data binding:
{Binding RelativeSource={RelativeSource Self},Converter={StaticResource debugConverter}}
Cheers, Ingo.
WOW its gud but j= "chuitya". what is that

deepak
Thanks for a great tip. I had a problem with Blend though. I can use the debug converter in VS, but if I
Yossu
add it using the Blend interface, Blend crashes. This happens consistently with this converter, on any
control. Blend behaves fine with other converters.
Any ideas? Thanks again
i am new to wpf.i think their is no proper decoupling between code behind and design code
vv
So you can leave the converter in place during development, and strip out later, use this approach
Allen
where you see if a debugger is in fact attached to the process (OTHERWISE, your app halts and waits
patiently for you in this routine!):
/// <summary>
/// Public method Convert(object value, Type targetType, object parameter, CultureInfo culture)
/// </summary>
/// <param name="value"></param>
/// <param name="targetType"></param>
/// <param name="parameter"></param>
/// <param name="culture"></param>
/// <returns></returns>

if (Debugger.IsAttached)
Debugger.Break();
else
Logger.DebugFormat("Binding value in {0} = {1}",

"DatabindingDebugConverter::Convert", value);
return value;
Do u have any tutorial on C#,asp.net,wcf,SilverLight or any of these?If not then please provide me the
sun
useful links
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Popular Data Binding Expressions
Home
Data Binding
Popular Data Binding Expressions Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Popular DataBinding Expressions
Custom Controls
Layout
DataContext Bindings
Input
Each control in WPF has a DataContext property. It's meant to be bound to an object that contains the data to be displayed.
Data Binding
The DataContext property is inherited along the logical tree.
Styling
{Binding} Binds object in the DataContext
Localization Binds the Name property of the object in the
{Binding Name}
DataContext
Interaction
Binds the Length property of the Name
Resources
{Binding Name.Length}
property of the object in the DataContext.
2D Graphics
3D Graphics
RelativeSource Binding
Animation
The relative source mode of the binding extension helps you to bind to an object with an relative relation to you. You don't
Multimedia know your or its abolute position, but you know if it's the previous or next item, two levels above you or of an specific type.
Documents
Bind to your self. Helpful to access your own
{Binding RelativeSource={RelativeSource Self}}
Windows 7 properties.
{Binding Text, RelativeSource={RelativeSource Self}} Binds Text property of the target element.
Interoperability
{Binding IsSelected, RelativeSource={RelativeSource
Binds to the IsSelected property of a parent
Performance Mode=FindAncestor,AncestorType={x:Type
element of type ListBoxItem.
ListBoxItem}}}
Expression Blend
Tools
UI Automation
Current Item of Collection Bindings
The slash is a special operator that lets you access the current item of a collection view.
Binds to the current item of a collection in the

{Binding /}
BindingExpressions.html[2/16/2014 3:05:42 PM]

data context.
Binds to the current item of a collection from

{Binding Customers/} the Customer property within the data
context.
Binds to the Name property of the current item

{Binding Customers/Name} of the Customer collection within the data
context.
► Tutorial ► After Effects ► Book Binding ► Book Printing

Last modified: 2009-12-23 07:45:26

Show all comments
if have examples that more understand.

mr.Ha
If learn English understand better :)

Ilya
I logged in just to say LOL

Saqib
I have gases
Yo
THANKS A LOT
Atul Raina
Current Item? I've not heard of that usage. Very interesting.

ErkDog
More examples
More
Might I suggest adding some examples with type-qualified properties in the binding path? This is
Mike
sometimes necessary to work around ambiguous matches caused by member name collisions. For
Strobel
example, say you have a 'Customer' class that has two 'Name' properties--one defined by the class itself
and another defined by an 'IEntity' interface that Customer implements. To bind to the correct property,
you would need to qualify it with the declaring type:

{Binding Path=(entities:Customer.Name).Length}
{Binding Path=(entities:IEntity.Name).Length}
This syntax is especially useful if you are using a tool like ReSharper, which can provide smart completion
for PropertyPath expressions in Xaml, but only if the first property in the path can be resolved at design
time. You also get some level of compile-time verification that your PropertyPath expressions are correct.
Binding a System.Data.DataTable
Tod
{Binding Path=[my_column_name]}
Nice post
Vikas
very nice examples

kiran more
Is possible a binding to a static property?

zinov
why it's look different then what i know?but thanks for the post
loque
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | How to Bind EnumValues
Home
Data Binding
How to Bind EnumValues Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to Bind to Values of an Enum
Custom Controls
Layout
Input
Data Binding
Styling
You cannot directly bind the values of an enum to a WPF list control, because the enum type does not provide a property that
Localization returns all values. The only way to get the names is to call the GetNames() method. But how to call a method from XAML?
Interaction The trick is to use an ObjectDataProvider, that allows us to specify the name of a method and their parameters and he invokes it
from XAML. The result can be used by using a normal data binding
Resources
2D Graphics

3D Graphics xmlns:sys="clr-namespace:System;assembly=mscorlib"
Animation

<Window.Resources>
Multimedia <ObjectDataProvider x:Key="aligmnments"
MethodName="GetNames" ObjectType="{x:Type sys:Enum}">
Documents
<ObjectDataProvider.MethodParameters>
Windows 7 <x:Type TypeName="VerticalAlignment" />
</ObjectDataProvider.MethodParameters>
Interoperability </ObjectDataProvider>
</Window.Resources>
Performance

Expression Blend

Tools <ComboBox ItemsSource="{Binding Source={StaticResource aligmnments}}" />

UI Automation
► Tutorial ► Photoshop CS4 ► Book Printing ► Book Binding

BindEnumValues.html[2/16/2014 3:06:01 PM]

Last modified: 2009-06-12 17:42:05

Show all comments
I was just wondering if we could use IValueConverter in order to bind enums.

Pavan
I think this is incomplete example. what is TypeName argument in

Ravi
<ObjectDataProvider.MethodParameters>
<x:Type TypeName="VerticalAlignment" />
</ObjectDataProvider.MethodParameters>
Hi Ravi,
Christian
it's not incomplete. The ObjectDataProvider calls the static method "GetNames()" on the "Enum" type.
Moser
This method requires a type object as parameter. This is resolved by the <x:Type /> markup
extension. It resolves a type object by a specified name. It's equal to typeof(VerticalAlignment) in C#.
I don't think it's very smart to bind a control to enumeration members at all. For one, it doesn't allow
tsahi
localization of the GUI. And secondly, the user will see things like ReallyBigNumber instead of the
string "Really Big Number", which is something he can understand more easily.
Personally, I like this solution for binding enum values:
Anubisascends
http://www.ageektrapped.com/blog/the-missing-net-7-displaying-enums-in-wpf/
This allows you to handle localization an more 'user-friendly' display values.
test
tesdt
Name
E-Mail (optional)
Comment
Post Comment


WPF Tutorial | Elegant way for INotifyPropertyChanged
Home
Data Binding
Elegant way for INotifyPropertyChanged Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
An elegant way to implement INotifyPropertyChanged
Custom Controls
Layout
Introduction
Input
A very common and popular way to synchronize data between the model and the view in WPF is using DataBinding. The value of the
Data Binding model is transferred to the view once, when the binding is initialized. But for every subsequent change, the model must notify the
binding to transfer the value again. This is done by implementing the INotifyPropertyChanged interface on the model.
Styling
In the setter of every bound property there must be some code to raise the PropertyChanged event, passing the name of the
Localization
modified property as a string. This has some disadvantages:
Interaction
You cannot use Auto-properties
Resources The property name is passed as a string. This brings ugly errors, when you forgot to change the string after a rename.
Every property needs extra code
2D Graphics
3D Graphics
The basic way to do it
Animation

Multimedia
private string _name;
Documents
public string Name
Windows 7 {
Interoperability
get { return _name; }
set
Performance {
_name = value;
Expression Blend
PropertyChanged("Name");
Tools }
}
UI Automation
private void PropertyChanged(string prop)
{
if( PropertyChanged != null )
INotifyPropertyChanged.html[2/16/2014 3:06:37 PM]

{
PropertyChanged(this, new PropertyChangedEventArgs(prop);
}
}

A more elegant way to do it

The basic implementation requires two lines of code in the setter and the property name is passed as a string, which is not very
robust. A more elegant solution is to use the power of expression trees to get the property name out of a lambda expression. The
result looks like this:

public string Name
{
set { PropertyChanged.ChangeAndNotify(ref _name, value, () => Name); }
}

public static bool ChangeAndNotify<T>(this PropertyChangedEventHandler handler,
ref T field, T value, Expression<Func<T>> memberExpression)
{
if (memberExpression == null)
{
throw new ArgumentNullException("memberExpression");
}
var body = memberExpression.Body as MemberExpression;
if (body == null)
{
throw new ArgumentException("Lambda must return a property.");
}
if (EqualityComparer<T>.Default.Equals(field, value))
{
return false;
}

var vmExpression = body.Expression as ConstantExpression;
if (vmExpression != null)
{
LambdaExpression lambda = Expression.Lambda(vmExpression);
Delegate vmFunc = lambda.Compile();
object sender = vmFunc.DynamicInvoke();

if( handler != null)
{
handler(sender, new PropertyChangedEventArgs(body.Member.Name));
}
}

field = value;
return true;

}

The solution is ispired by the following articles:
http://blog.decarufel.net/2009/07/how-to-use-inotifypropertychanged-type_22.html
http://stackoverflow.com/questions/1315621/implementing-inotifypropertychanged-does-a-better-way-exist<7a>
Last modified: 2011-03-03 20:28:18

Show all comments
The property value needs to be set before the notification.

Adrian Cole
I am testing this out now.

Jared
Barneck
Thanks,
Jared
Http://www.rhyous.com
What about using Reflection, like "MethodBase.GetCurrentMethod", for giving name of the
Manu Reva
property.
Do we expect performance issue ? or it is just too ugly :-)
Denis What about when you obfuscate the code?

González
If I was debugging this code. I would appreciate the basic way

Jim Yost
Name
E-Mail (optional)
Comment

Post Comment

WPF Tutorial | Evaluate a localization mechanism
Home
Localization
Evaluate a localization mechanism Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to evaluate a localization mechanism
Custom Controls
Layout
Criterias for evaluation
Input
To choose an appropriate localization mechanism you have to find one that meets the requirements and your companys established
Data Binding translation process.
Styling Criterias to compare the localization mechanisms among each others:
Localization Dynamic language switching

Interaction Usage in XAML and Code
Types of applicable resources
Resources
Ease and flexibility of use
2D Graphics Translation performance
3D Graphics
Animation
Different WPF translation mechanisms compared
Multimedia Localization using a MarkupExtension
Localization using Satellite Assemblies
Documents
Windows 7
Interoperability ► Tutorial ► Pro Engineer ► Pro E CAD ► Sketch Pro

Performance
Expression Blend Last modified: 2010-02-25 08:31:07

Tools
UI Automation
Show all comments
EvaluateLocalizationMechanism.html[2/16/2014 3:06:56 PM]

WPF Tutorial | Evaluate a localization mechanism
I am learning WPF from this amazing Website, I started from the beginning and here I am, i would like to
Maher...
thank you Cristain , Thank you very much
Hi.. I'm very eager to know more about WPF, cause I'm thinking if I can use it in my thesis.. I hope I could
24ml
Learn here more.. but thank you for this new Knowledge :)
Name
E-Mail (optional)
Comment
Post Comment
EvaluateLocalizationMechanism.html[2/16/2014 3:06:56 PM]

WPF Tutorial | Localization using a MarkupExtension
Home
Localization
Localization using a MarkupExtension Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Localization of a WPF application using a custom MarkupExtension
Custom Controls
Layout
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents
The Idea
Windows 7
A simple and effective way to localize application resources is to write a custom MarkupExtension that provides a localized value. The extension
Interoperability
takes a parameter in the constructor that is the unique resource key. When the DepdendencyProperty asks for the value, the markup extension looks
Performance up the value from a generic resource provider. This gives you the flexibility to reuse the resource management and translation process that is already
established within your company.
Expression Blend
Using a custom markup extension has some advantages
Tools
Lightweight and flexible solution
UI Automation
Dynamic language switch at runtime
Works with any kind of resource providers.
Other Implementations
The idea of using a markup extension for localization is not unique by me. There are also other similar implementations out there. Here you find some
links:
LocalizeMarkupExtension.html[2/16/2014 3:07:34 PM]

LocalizeExtension by Bernhard Millauer
Resx MarkupExtension by Grant Frisken
How to use it
The usage of the markup extension is very simple. Just replace the string you want to localize by {l:Translate resourceKey}.

<TextBlock Text="{l:Translate CustomerForm.FirstName}" />

Implementation details of the translation infrastructure

The translation infrastructure consists of the folling parts
Translation manager

The translation manager is a static class that manages the current language and notifies all markup extensions, to update their values when the
language changes. It also provides access to translated resources. The resources itself are provided by a generic translation provider.
Translate markup extension

The tanslate markup extension knows the resource key and provides the translated value. It listens to the LanguageChanged event of the
translation manager and updates its value. This event handler is implemented by the weak event pattern to prevent memory leaks.
Translation provider

The translation provider is a class that provides the translated resources. It has to implement the ITranslationProvider and can access
any kind of resources you like. For e.g. ResX, XML or text files.

public class TranslateExtension : MarkupExtension
{
private string _key;

public TranslateExtension(string key)
{
_key = key;
}

[ConstructorArgument("key")]
public string Key
{
get { return _key; }
set { _key = value;}
}

{
var binding = new Binding("Value")
{
Source = new TranslationData(_key)
};
return binding.ProvideValue(serviceProvider);
}
}

public class TranslationData : IWeakEventListener,
INotifyPropertyChanged, IDisposable
{

private string _key;

public TranslationData( string key)
{
_key = key;
LanguageChangedEventManager.AddListener(
TranslationManager.Instance, this);
}

~TranslationData()
{
Dispose(false);
}

public void Dispose()
{
Dispose(true);
GC.SuppressFinalize(this);
}

protected virtual void Dispose(bool disposing)
{
if (disposing)
{
LanguageChangedEventManager.RemoveListener(
TranslationManager.Instance, this);
}
}

public object Value
{
get
{
return TranslationManager.Instance.Translate(_key);
}
}

public bool ReceiveWeakEvent(Type managerType,
object sender, EventArgs e)
{
if (managerType == typeof(LanguageChangedEventManager))
{
OnLanguageChanged(sender, e);
return true;
}
return false;
}

private void OnLanguageChanged(object sender, EventArgs e)
{
if( PropertyChanged != null )
{
PropertyChanged( this, new PropertyChangedEventArgs("Value"));
}
}

public event PropertyChangedEventHandler PropertyChanged;

}

public class TranslationManager
{
private static TranslationManager _translationManager;

public event EventHandler LanguageChanged;

public CultureInfo CurrentLanguage
{
get { return Thread.CurrentThread.CurrentUICulture; }
set
{
if( value != Thread.CurrentThread.CurrentUICulture)
{
Thread.CurrentThread.CurrentUICulture = value;
OnLanguageChanged();
}
}
}

public IEnumerable<CultureInfo> Languages
{
get
{
if( TranslationProvider != null)
{
return TranslationProvider.Languages;
}
return Enumerable.Empty<CultureInfo>();
}
}

public static TranslationManager Instance
{
get
{
if (_translationManager == null)
_translationManager = new TranslationManager();
return _translationManager;
}
}

public ITranslationProvider TranslationProvider { get; set; }

private void OnLanguageChanged()
{
if (LanguageChanged != null)
{
LanguageChanged(this, EventArgs.Empty);
}
}

public object Translate(string key)
{
if( TranslationProvider!= null)
{
object translatedValue =TranslationProvider.Translate(key);

if( translatedValue != null)
{
return translatedValue;
}
}
return string.Format("!{0}!", key);
}
}

Last modified: 2010-05-25 22:11:25

Show all comments
I created a translator project and have generated a dll.

Juliana
I created another one and am trying to use the translation.
Could tell me if I have to do some configuration, so the project recognizes the project resource translator?
@Gnought: Your solution is working, because the "removeListener" isn't executed, isn't it?
Sebastian
in your solution it will be called, if dispose is called with "disposing=true"
if (disposing)
// Code to dispose the managed resources of the class
LanguageChangedEventManager.RemoveListener(TranslationManager.Instance, this);
but the finalizer calls the dispose with "false".
another question:
shouldn't the "removeListener" function be called, after closing and destroying a form that uses the specific
MarkupExtension. If you create the same Window 3 times. The Listener will be added 3 times in a row. And will
only be removed after closing the application. It this intended?
Is it possible to have design time support? I would like to see the default text (en-US locale) during design time in
Bo
Visual Studio instead of the "!TEXT_KEY!" syntax.
Skjoett
Is it possible to have design time support? I would like to see the default text (en-US locale) during design time in
Bo
Visual Studio instead of the "!TEXT_KEY!" syntax.
Skjoett
@Sebastian, did you try?

Gnought
Closing and destroying a form will call Dispose() method which calls Disposing(true) so the listener will still listen 1
event.
Why is this better than simply using something like
Steven
xmlns:resx="clr-namespace:MyApp.Properties"
Text="{x:Static resx:Resources.Title}
Great article, thanks for that!
Doc
But I still wonder, is there an easy way to create this {Translator Resource Binding} dynamically in the code?
Awesome article! I was struggling to get a dynamic way to switch languages and did not want to deal with
Steve G.
LocBaml. Your classes work great.
Wonderful article.
Griz
FYI, From code I was able to use
TextBox.Text = TranslationManager.Instance.Translate(tranlationKey) as string;
Continuing... to get the value in the current culture.
Griz
And to bind from code, this worked
var binding = new Binding("Value")
Source = new TranslationData(tranlationKey)
};
BindingOperations.SetBinding(TextBox, TextBox.TextProperty, binding);
which both methods were taken from the Translate classes in the sample.
Can you tell more about the memory management in this example? Why do you use WeakEventListener instead
Spook
of simple delegation? And why one shall implement both Finalize and Dispose methods? I am not familiar with
such resource allocation and collection issues :(
Do I have to do any aditional linking to get the .resource files or the .dll they are in linked to the assembly? My
Flo
app continiosly tells me it can't find <Namespace>.Resource.resources but the files are created in the bin
directory and then correctly packed into a dll which is found in the debug directory.
lg flo
Is there a reason why in your sample project the languages are displayed in the combobox as 'German' and

Wom
'Dutch' while in my own project it just stays 'nl' and 'de'?
Hi
Klaus
Is there a way to use this extension in a multibinding?
I want to have a label that consists of a text from the markup extension followed by a text that comes from a
second control (im my example: datagrid.items.count.
The resulting label should be "Number of records: 123" where "Number of records:"
comes from the extension and "123" is the number of records in a datagrid on the same window
Regards
Hi Klaus,
Christian
since the TranslationExtension returns a binding, you can use it like a binding in a multibinding. If you are using
Moser
.NET 4.0 you can profit of the new bindable <Run> within a <TextBlock> to combine fragments to one
string.
Greetings
Christian
I like that very much - Small, lean straight forward. Thanks a lot for sharing - learned some new concepts on your
Stefan
code!
Nice work Christian. Can you tell me, though, why the languages in my sample-project display in the ComboBox
James
as "en" and "de" while they display in your project as "English" and
Hurst
"German"? I've been digging and searching and can't figure out why! I would expect the binding (to
that ComboBox) to use the ToString() method on the CultureInfo objects by default, which yields the
"de" and "en" values. The solution that comes to my mind is to add a ValueConverter.
But I would like to know how you got yours to automatically show the EnglishName property in that ComboBox?!

Thank you for your advice, James Hurst
Hey James,
Manuel
I'm not sure if this will help you but I did it with a ValueConverter which gets applied on each item like so in xaml
Strausz
notation:
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Converter={StaticResource TranslationConverter}}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
Where TranslationConverter is a simple converter which will translate the values given by the combobox by using
the TranslationManager directly. Could be useful for other things as well, I suppose.
A great article.

Hari
I have one question on the use of this markup extension with binding.
For ex.
We often have situtations to bind Text property to view model property
<TextBlock Text="{Binding CustomerType}" />
Assuming we need translation for CustomerType
<TextBlock Text="{l:Translate {Binding CustomerType}}" /> does not work.
I could use a value converter to do this. However, I would like keep the option open as the value converter may
be used for converting from a specific object to string. Also, if we use value converters, dynamic language
switching will not work
I observed that if you choose the .Net Framework 4 instead of 3.5, as in the example code, the combobox for the
jones
language selection shows only the short names of the culture (de, en) instead of the complete name (Deutsch,
English).
Can you please show, how to display the full name when using .net Framework 4?
ØªØ§Ù�Ø§ØªÙ�Ø§ØªÙ�
‫ا تئنت‬
Hi Christian,
apo
great job! is your code restricted to any license?
Hi Christian,
apo
great job! is your code restricted to any license?
How about if i want to use the translation manager in different assemblies (which consists of different resource
Great
files?
article.
Example:
Assembly.exe (resource.de.resx:MyString="Foo A")
AssemblyA.dll (resource.de.resx:MyString="Foo B")
AssemblyB.dll (resource.de.resx:MyString="Foo C")
Great post!
Beck
Do you know of a way to show a default value on the designer window, currently it is littered with the key values?

Thanks in advance
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Drag & Drop
Home
Interaction
Drag & Drop Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Drag and Drop in WPF
Custom Controls
Layout
Introduction
Input
Drag&Drop can drasticly improve the productiviy and user experience of a software. But only a few programmers provide drag and
Data Binding drop functionality in their applications, because they think its much more dificult than it really is. This article shows how simple drag
and drop can be implemented in WPF.
Styling
Localization
Drag&Drop in 6 Steps
Interaction
Resources
1. Detect a drag as a combinatination of MouseMove and MouseLeftButtonDown
2. Find the data you want to drag and create a DataObject that contains the format, the data and the allowed effects.
2D Graphics 3. Initiate the dragging by calling DoDragDrop()
3D Graphics 4. Set the AllowDrop property to True on the elements you want to allow dropping.
5. Register a handler to the DragEnter event to detect a dragging over the drop location. Check the format and the data by
Animation
calling GetDataPresent() on the event args. If the data can be dropped, set the Effect property on the event args to display
Multimedia the appropriate mouse cursor.
6. When the user releases the mouse button the DragDrop event is called. Get the data by calling the GetData() method on the
Documents
Data object provided in the event args.
Windows 7
...and that's all the magic.
Interoperability
Performance
Drag
Expression Blend
To start the drag operation, we have to detect a mouse move while the left mouse button is pressed. To do this we have to hook up
Tools handlers on the PreviewMouseMove and PreviewMouseLeftButtonDown events.
UI Automation To prevent occasionally drags, its a good design to not start the drag operation until the user has moved the mouse cursor by a
couple of pixels. WPF provides a constant that contains the amount of pixel that Windows uses.
When the drag is initiated, we need to specify the data we want to drag. In our case its the data of the ListViewItem we dragged.
We find the ListViewItem in the OriginalSource of the mouse event args. By calling
DragAndDrop.html[2/16/2014 3:07:48 PM]

ItemContainerGenerator.ItemFromContainer we get the data behind the ListViewItem.
Create a DataObject to transport the data to the drop location. The constructor takes two arguments. A string that describes the
format and the data we want to drag.

<ListView x:Name="DragList"
PreviewMouseLeftButtonDown="List_PreviewMouseLeftButtonDown"
PreviewMouseMove="List_MouseMove"/>

private void List_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
// Store the mouse position
startPoint = e.GetPosition(null);
}

private void List_MouseMove(object sender, MouseEventArgs e)
{
// Get the current mouse position
Point mousePos = e.GetPosition(null);
Vector diff = startPoint - mousePos;

if (e.LeftButton == MouseButtonState.Pressed &&
Math.Abs(diff.X) > SystemParameters.MinimumHorizontalDragDistance ||
Math.Abs(diff.Y) > SystemParameters.MinimumVerticalDragDistance )
{
// Get the dragged ListViewItem
ListView listView = sender as ListView;
ListViewItem listViewItem =
FindAnchestor<ListViewItem>((DependencyObject)e.OriginalSource);

// Find the data behind the ListViewItem
Contact contact = (Contact)listView.ItemContainerGenerator.
ItemFromContainer(listViewItem);

// Initialize the drag & drop operation
DataObject dragData = new DataObject("myFormat", contact );
DragDrop.DoDragDrop(listViewItem, dragData, DragDropEffects.Move);
}
}

// Helper to search up the VisualTree
private static T FindAnchestor<T>(DependencyObject current)
where T : DependencyObject
{
do
{
if( current is T )
{
return (T)current;
}

current = VisualTreeHelper.GetParent(current);
}
while (current != null);
return null;
}

Drop
To make an element be a drop location, set the AllowDrop property to true. When the user drags an item over the element, the
DragEnter event is called. In this event you can analyze the data and decide if a drop is allowed or not.
When the user releases the mouse button the Drop event is called. The data is available in the DataObject provided in the
DragEventArgs.

<ListView x:Name="DropList"
Drop="DropList_Drop"
DragEnter="DropList_DragEnter"
AllowDrop="True" />

private void DropList_DragEnter(object sender, DragEventArgs e)
{
if (!e.Data.GetDataPresent("myFormat") ||
sender == e.Source)
{
e.Effects = DragDropEffects.None;
}
}

private void DropList_Drop(object sender, DragEventArgs e)
{
if (e.Data.GetDataPresent("myFormat"))
{
Contact contact = e.Data.GetData("myFormat") as Contact;
ListView listView = sender as ListView;
listView.Items.Add(contact);
}
}

► Tutorial ► ActionScript ► Flash 8 ► Flash CS3

Last modified: 2011-04-19 16:59:14


Show all comments
I tried the same thing in the RightButton click but at that time DragOver event is not fired.. How can i
David C
resolve this problem ?
Very Good.
ZeePrime
Warning with the if, you miss a couple of brackets as && has precedence over ||
Math.Abs(diff.Y) > SystemParameters.MinimumVerticalDragDistance )
how can i go for multiple drag and drop?? say i want to select three items @ a time from Drag_list and
kamlendra
drop them into Drop_list.
Hi,
oc
I am trying out your code but in Datagrid not in Listview. I couldn't figure it out the 'Contact' in this line
Contact contact = (Contact)listView.ItemContainerGenerator.
what does it stands for ?
Regards
I agree with Olivier as for the missing parentheses in the mouseMove conditions. You should correct it in
david
the main article :p
Hi Christian,
NIkhil
Please elaborate what is Contact used in 4 places in this example?
Contact contact = (Contact)listView.ItemContainerGenerator.ItemFromContainer(listViewItem);
Contact contact = e.Data.GetData("myFormat") as Contact;
Thanks in advance
Sweet and simple. Thanks for the wealth of info on your site.
KornMuffin
@oc - just use a string instead of the Contact class if you don't want to create your own Contact class.
i can smell poo and a small amount of wee too.

tooma
i can smell poo and a small amount of wee too.

tooma
Why i am getting this exception everytime?

seiko
Element already has a logical parent. It must be detached from the old parent before it is attached to a
new one.
on line
listView.Items.Add(contact); ??
Somebody may know that?
Hi,
bizzare
Im a newbie to WPF and i dont know if this question even makes sense here but i dint know where else to
post it! I need to select two or more items from a list box and then enable a button. Can you please help
me as to how i could do it?Thanks!
Hi,
bizzare
I m using very similar drag and drop functionality in my WPF app , while i wish to drag item from
Abhishek...
combobox to textbox , when im doing so , the combobox always get closed and i can't select any items
from it to drag towards textbox.
Hi,
bizzare
Hi,
bizzare
Contact is just a class (domain/poco)
Tom Pester
public class Contact
public Contact(string firstname, string lastname)
Firstname = firstname;
Lastname = lastname;

public string Firstname { get; set; }
public string Lastname { get; set; }
public override string ToString()
return string.Format("Firstname: {0}, Lastname: {1}", Firstname, Lastname);
To get the code working I had to change the code from (this is a bug IMO)

Math.Abs(diff.Y) > SystemParameters.MinimumVerticalDragDistance
to
(
Math.Abs(diff.Y) > SystemParameters.MinimumVerticalDragDistance
I also got null reference exceptions and had to check the listViewItem for null:
ListViewItem listViewItem =
FindAnchestor<ListViewItem>((DependencyObject) e.OriginalSource);
if (listViewItem == null) return;
I think its due to a timing issue if you do a drag and drop very fast or execute the code on a fast
computer?
Thanks for this minimal sample. It's excellent to get started from.
Hi!
Lasoty
Please show mi how look the Contact class.
TXH
Hi!
Lasoty
Please show mi how look the Contact class.
TXH
Hi!!
Guest
I am able to drag the control. but i have to drop the control to dynamically created Panel or Canvas. How
i should proceed? Pls help me

Hi!!
Guest
Hi!!
Guest
Hi!!
Guest
Hi!!
Guest
Hi,
Raman
I have tried this program, just used the class "People" instead of "Contact" and it
wors fine. Here is the code that I have tried for the "People":
public class Person
private string _relationshipType;
public string Name
set
_name = value;
public string RelationshipType
get { return _relationshipType; }
set { _relationshipType = value; }
public Person(string name, string relationshiptype)
this._name = name;
this._relationshipType = relationshiptype;

}
public class People : ObservableCollection<Person>
public People()
Add(new Person("Sean", "Friend"));
Add(new Person("Chris", "Friend"));
Add(new Person("Peter", "Brother"));
Add(new Person("Jeremy", "Brother"));
Add(new Person("Kevin", "Brother"));
Regards
Hello,
Patrick
I tried to implement this and the button state is never pressed. Also my Clickevents don't trigger anymore.
So drag and drop works or the Clickevent never both.
regards
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | MergedDictionaries
Home
Resources
MergedDictionaries Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Merged ResourceDictionaries
Custom Controls
Layout
Problems loading merged resource dictionaries in .NET 4.0
Input
I experienced a problem, when I am trying to merge resource dictionaries at app-level. As soon as I changed the target framework
Data Binding from 3.5 to 4.0 they don't get loaded anymore. It seems as if they have changed something in the behavior of
MergedResourceDictionaries in .NET 4.0.
Styling
Localization
I found a way how to fix this problem. Just add a dummy default style in the resource dictionary where you merge all resources
together. See the following example:
Interaction
This is the official bug description from Microsoft:
Resources
On the creation of every object in XAML, if a default style is present (i.e. style w/ a key of Type) that style should be applied.
As you can
2D Graphics imagine there are several performance optimizations to make that (implied) lookup a light weight as possible.
One of them is that we
don’t look inside Resource Dictionaries unless they are flagged as “containing default Styles”.
There is a bug: if all your default styles are
3D Graphics
nested in merged dictionaries three levels deep (or deeper) the top dictionary does not get flagged so the search skips it.
The work
Animation around is to put a default Style to something, anything, <Style TargetType="x:Dummy" /> in the root Dictionary.
Multimedia Bug entry on Microsoft Connect
Documents
<Application.Resources>
Windows 7 <ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
Interoperability
<ResourceDictionary Source="Styles/DefaultStyle.xaml"/>
Performance </ResourceDictionary.MergedDictionaries>
Expression Blend </Application.Resources>
Tools

UI Automation
<ResourceDictionary

MergedDictionaryPerformance.html[2/16/2014 3:08:25 PM]

<ResourceDictionary Source="DefaultStyle/Button.xaml"/>
</ResourceDictionary.MergedDictionaries>

<Style TargetType="{x:Type Rectangle}" />


Improve the performance of merged ResourceDictionaries

Each time a control references a ResourceDictionary XAML creates a new instance of it. So if you have a custom control library
with 30 controls in it and each control references a common dictionary you create 30 identical resource dictionaries!

<SharedResourceDictionary Source="/MyControlLibrary;component/Themes/Brushes.xaml"
/>
</ResourceDictionary.MergedDictionaries>

To get rid of this problem, I created the SharedResourceDictionary. You can use it the same way as a conventional
ResourceDictionary. The only suptile difference is, that if it is instanced multiple times, the resources are loaded only once.

[assembly: XmlnsDefinition("http://schemas.microsoft.com/winfx/2006/xaml/presentation",
"WPFTutorial.Utils")]

/// <summary>
/// The shared resource dictionary is a specialized resource dictionary
/// that loads it content only once. If a second instance with the same source
/// is created, it only merges the resources from the cache.
/// </summary>
public class SharedResourceDictionary : ResourceDictionary
{
/// <summary>
/// Internal cache of loaded dictionaries
/// </summary>
public static Dictionary<Uri, ResourceDictionary> _sharedDictionaries =
new Dictionary<Uri, ResourceDictionary>();

/// <summary>
/// Local member of the source uri
/// </summary>
private Uri _sourceUri;

/// <summary>
/// Gets or sets the uniform resource identifier (URI) to load resources from.
/// </summary>
public new Uri Source
{
get { return _sourceUri; }
set
{

_sourceUri = value;

if (!_sharedDictionaries.ContainsKey(value))
{
// If the dictionary is not yet loaded, load it by setting
// the source of the base class
base.Source = value;

// add it to the cache
_sharedDictionaries.Add(value, this);
}
else
{
// If the dictionary is already loaded, get it from the cache
MergedDictionaries.Add(_sharedDictionaries[value]);
}
}
}
}


Last modified: 2011-03-14 08:47:50

Show all comments
Seems great, I'll check it and post results here.
AVEbrahimi
I've very long startup time in my big WPF project...
Looks nice, but is this SharedResourceDictionary Blend "friendly"?

Andrew
Hi Andrew,
Christian
Moser
No, unfortunately the current versions of Blend cannot deal with it :-( I am searching for another
solution that is fast and also supported by Blend.
Looks like I've found a solution which address the same issue as yours, but it is a Blend friendly - check
Andrew
it out http://www.drwpf.com/blog/Home/tabid/36/EntryID/10/Default.aspx - in section "Manage a
Collection of Resource Dictionaries in Code and Merge them at the Element Level" there is class
"SharedResources".

Hi Andrew,
DJanjicek
since totday I'm using MergedDictionaries in my Silverlight project and I'm facing huge performance
problems. The app is consuming almost 1GB of memory after a few clicks. Your solution could help me
out of this trouble but I have no idea how to implement your code and how to use it.
Could you help me with this?
I agree with DJanjicek.
Sergey
Andrew, could you share an example of using your class?
Just be aware... we were using the SharedResourceDictionary in our project, until we found out that it
Cameron
was holding onto XAML pages that had been closed, and thus were not being garbage collected.
_sourceUri = new Uri(value.OriginalString); allows garbage collection.

HDW
Also wrapping access to _sharedDictionaries in lock (((ICollection)_sharedDictionaries).SyncRoot) and

wrapping access to MergedDictionaries in lock (((ICollection)MergedDictionaries).SyncRoot) makes the
class thread safe.
SharedResourceDictionary seems not be compatible with the {ThemeDictionary ...} markup extensions.
fmunkert
An InvalidOperationException is thrown which states that ThemeDictionaryExtension can be used with
ResourceDictionary only.
There might be other code in WPF which does not work if you derive from ResourceDictionary.
Thanks Christian,
Lee Campbell
FYI: I have added a colleagues expansion on the problem referencing this post on this site
http://leecampbell.blogspot.com/2010/05/mergeddictionaries-performance-problems.html
I'm having some issues with this solution in the designer. I am trying to use the designer in VS2010.
Mike
Using this, I get an error when using the designer, and I can't get any code completion. Any ideas, if
this works in the designer?
Same here. I'm receiving a NotSupportedException when using SharedResourceDictionary on design

Fran Herrera
time. When running the app, everything seems to work. VS2010Express.
The code mentioned above to fix garbage collection throws exceptions:
jep
_sourceUri = new Uri(value.OriginalString); allows garbage collection.

Any solution to this?
i m working with Silverlight 4.
shemesh
1) isn't this behavior (of making a new instance for each control reference) is a memory leak? shouldn't
this be addressed by Microsoft?
2)could you post a code that allows GC and thread safe?
If you want use the MergedDictionary and working Designer, just implement this :
EinMitleser
public bool IsInDesignMode
get
return
(bool)
DependencyPropertyDescriptor.FromProperty(DesignerProperties.IsInDesignModeProperty,
typeof(DependencyObject)).Metadata.DefaultValue;
Hello,
EinMitleser
if you want to use this class in your project without loosing the designer, just impemelent this static
prop into the class:
private static bool IsInDesignMode
get
return (bool)
DependencyPropertyDescriptor.FromProperty(DesignerProperties.IsInDesignModeProperty,
typeof(DependencyObject)).Metadata.DefaultValue;
--- thats the new getter:
if (IsInDesignMode)
return base.Source;
return _sourceUri
And this put in front of the old setter-code :
if (IsInDesignMode)
base.Source = value;
return;

The problem is the memory at runtime(yes ms just cookin with water, like all others too/do)...and thanks
to mr. moser for his little work...
I forgott to write the try catch sourrund the base.Source=value

Ups
ya its very useful for us.Its a great one for beginners.

Arun
Does anyone have this working in Silverlight 4? I am getting an exception when it tries to do
Mary Ellen
"MergedDictionaries.Add" --> InvalidOperationException: Element is already the child of another
element.
Any help is appreciated.
I'm also trying to get this working in SL4. Anyone know of a good example?
Coop
nice article.... Thanks!!

bobs
In order to overcome the designer issue I used a Powershell script in a Pre and Post Build event to
David
change ResourceDictionary to SharedResourceDictionary at build time.
Compton
Hi Christian,
Kaushal
We are experiencing problem is display of context of ViewBox after installing .Net 4.0 framweowrk.
Viewbox contains some chart or tabular data. Problem is that some text get invisible on randoam basis.
Cant google any suitable solution.
Looking forward for your help.
Hi Christian,
Kaushal
We are experiencing problem is display of context of ViewBox after installing .Net 4.0 framweowrk.
Viewbox contains some chart or tabular data. Problem is that some text get invisible on randoam basis.
Cant google any suitable solution.
Looking forward for your help.
Hi Christian, Its really a good article. But when i am planning to use it, it shows me an compilation error
Vikas
state Error 13 The tag 'SharedResourceDictionary' does not exist in XML namespace '[My Name
Dangwal
Space]'. Line 6 Position 10. [somefile.xaml] 6 10[ ProjectName]
Could you please tell me if i am missing something. I just created same class suggested by you.

Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Read WPF resources from WinForms
Home
Resources
Read WPF resources from WinForms Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to read WPF ResourceDictionaries from WinForms
Custom Controls
When you add resources dictionaries to an WPF project the build action is automatically set to Page. This means that the compiler
Layout generates a BAML stream and adds it to the resources of the assembly.
Input Since WPF has the built-in functionality to read a BAML stream but its API is not public, we have to write a little helper class that access
the internal method by using reflection.
Data Binding

Styling
public static class BamlReader
Localization {
public static object Load(Stream stream)
Interaction {
Resources
ParserContext pc = new ParserContext();
MethodInfo loadBamlMethod = typeof(XamlReader).GetMethod("LoadBaml",
2D Graphics BindingFlags.NonPublic | BindingFlags.Static)
return loadBamlMethod.Invoke(null, new object[] { stream, pc, null, false });
3D Graphics
}
Animation }

Multimedia

Documents StreamResourceInfo sri = System.Windows.Application.GetResourceStream(
new Uri("/MyAssemblyName;component/MyResourceDict.xaml", UriKind.Relative));
Windows 7
ResourceDictionary resources = (ResourceDictionary)BamlReader.Load(sri.Stream);
Interoperability

Performance
Expression Blend
► Tutorial ► Learn Quick Books ► Read Books ► Basics
Tools
UI Automation
Last modified: 2009-07-10 13:39:59
ReadWPFResourcesFromWinForms.html[2/16/2014 3:08:41 PM]

WPF Tutorial | Read WPF resources from WinForms
Show all comments
It would have been nice if you took a example and explained step by step. But still its a good article
Goo
Hi, could you explain me how to get/read the xaml content of the form I designed in C#? Please send
Sean
me email if you could
That's a clear use of the BMALView. And for Goo, it's almost clear no need for a SbS Tutorial; all u have
Blood
to do is to read about the BAMLView (google it or go to mocrosoft website)
HaZaRd
Name
E-Mail (optional)
Comment
Post Comment
ReadWPFResourcesFromWinForms.html[2/16/2014 3:08:41 PM]

WPF Tutorial | Set DynamicResource from Code
Home
Resources
Set DynamicResource from Code Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to assign a dynamic resource link programmatically
Custom Controls
Normally you assign resources in XAML by using the StaticResource or DynamicResource extension. But how to do it
Layout programmatically?

The static behavior is simple. Just find the resource by using the TryFindResource() method and set it to the property of your
Input
choice. But if you want to have it dynamically updated, the following code snipped is your solutions:
Data Binding

Styling frameworkElement.SetResourceReference(dependencyProperty, resourceKey);

Localization
Interaction
Resources ► Tutorial ► ActionScript ► Flash Player 8 ► Adobe Flash

2D Graphics
Last modified: 2010-06-15 21:41:07
3D Graphics
Animation
Multimedia
Documents
Show all comments
Windows 7
Interoperability Commented on 8.July 2010
owsome
Performance Tod
Expression Blend
Tools
While, as we can see, this way requires a framework element to work on.
Hugo Gu
UI Automation
Do you know how to make it on a GridViewColumn? You know, the GridViewColumn is derived from
DependencyObject and don't have that SetResourceReference method.
Thank you very much.
DynamicResourceCode.html[2/16/2014 3:09:23 PM]

WPF Tutorial | Set DynamicResource from Code
Thanks for sharing.

CyberAngel
Name
E-Mail (optional)
Comment
Post Comment
DynamicResourceCode.html[2/16/2014 3:09:23 PM]

WPF Tutorial | Loading BAML
Home
Resources
Loading BAML Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to load BAML resources
Custom Controls
Layout
What is BAML?
Input
WPF is based on XAML an XML dialect to describe object graphs. This is very powerful but parsing an XAML file at runtime is quite
Data Binding expensive. So the MarkupCompiler converts the XAML file to a more compact binary version called BAML. The BAML stream then
is stored to the resources of the assembly and loaded within the InitializeComponent method.
Styling
The BAML API is something unique of WPF and was not public until .NET 4.0. Now it's available through the Baml2006Reader
Localization
implementation. The following code shows how to load a BAML stream in .NET 3.5 and 4.0
Interaction
Resources Load an object from a BAML stream

2D Graphics
Load a BAML stream in .NET 3.5 (by using reflection):
3D Graphics

Animation var pc = new ParserContext();
var readerType = presentationFrameworkAssembly
Multimedia .GetType("System.Windows.Markup.XamlReader");
var method = readerType.GetMethod("LoadBaml",
Documents
BindingFlags.NonPublic | BindingFlags.Static);
Windows 7 return method.Invoke(null, new object[] {stream, pc, null, false});

Interoperability

Performance
Load a BAML stream in .NET 4.0:

Expression Blend
var reader = new Baml2006Reader(stream);
Tools var writer = new XamlObjectWriter(reader.SchemaContext);
while(reader.Read())
UI Automation
{
writer.WriteNode(reader);
}
return writer.Result;
baml.html[2/16/2014 3:09:35 PM]

WPF Tutorial | Loading BAML


Last modified: 2011-03-14 20:49:21

Show all comments
It is very helpful !!! Thanks

Andrey
Name
E-Mail (optional)
Comment
Post Comment
baml.html[2/16/2014 3:09:35 PM]

WPF Tutorial | Draw excactly on physical device pixels
Home
2D Graphics
Draw excactly on physical device pixels Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Draw lines excactly on physical device pixels
Custom Controls
Layout
Why do my lines appear so blurry?
Input
When you draw a line in WPF you will experience that they often appear blurry. The reason for this is the antialiasing system that
Data Binding spreads the line over multiple pixels if it doesn't align with physical device pixels.
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics
The following example shows a usercontrol that overrides the OnRender method for custom drawing a rectange to the
Animation drawingContext. Even if all points are integer values and my screen has a resolution of 96dpi the lines appear blurry. Why?
Multimedia
protected override void OnRender(DrawingContext drawingContext)
Documents {
Windows 7
Pen pen = new Pen(Brushes.Black, 1);
Rect rect = new Rect(20,20, 50, 60);
Interoperability
drawingContext.DrawRectangle(null, pen, rect);
Performance
}
Expression Blend

Tools
UI Automation Resolution independence

WPF is resoultion independent. This means you specify the size of an user interface element in inches, not in pixels. A logical unit in
WPF is 1/96 of an inch. This scale is chosen, because most screens have a resolution of 96dpi. So in most cases 1 logical unit maches
to 1 physical pixel. But if the screen resolution changes, this rule is no longer valid.
DrawOnPhysicalDevicePixels.html[2/16/2014 3:09:57 PM]

Align the edges not the center points

The reason why the lines appear blurry, is that our points are center points of the lines not edges. With a pen width of 1 the edges are
drawn excactly between two pixels.
A first approach is to round each point to an integer value (snap to a logical pixel) an give it an offset of half the pen width. This
ensures, that the edges of the line align with logical pixels. But this assumes, that logical and physical device pixels are the same. This
is only true if the screen resolution is 96dpi, no scale transform is applied and our origin lays on a logical pixel.
Using SnapToDevicePixels for controls

All WPF controls provide a property SnapToDevicePixels. If set to true, the control ensures the all edges are drawn excactly on
physical device pixels. But unfortunately this feature is only available on control level.
Using GuidelineSets for custom drawing

Our first approach to snap all points to logical pixels is easy but it has a lot of assumptions that must be true to get the expected
result. Fortunately the developers of the milcore (MIL stands for media integration layer, that's WPFs rendering engine) give us a way
to guide the rendering engine to align a logical coordinate excatly on a physical device pixels. To achieve this, we need to create a
GuidelineSet. The GuidelineSet contains a list of logical X and Y coordinates that we want the engine to align them to
physical device pixels.

If we look at the implementation of SnapToDevicePixels we see that it does excatly the same.

protected override void OnRender(DrawingContext drawingContext)
{
Pen pen = new Pen(Brushes.Black, 1);
Rect rect = new Rect(20,20, 50, 60);

double halfPenWidth = pen.Thickness / 2;

// Create a guidelines set
GuidelineSet guidelines = new GuidelineSet();
guidelines.GuidelinesX.Add(rect.Left + halfPenWidth);
guidelines.GuidelinesX.Add(rect.Right + halfPenWidth);
guidelines.GuidelinesY.Add(rect.Top + halfPenWidth);
guidelines.GuidelinesY.Add(rect.Bottom + halfPenWidth);

drawingContext.PushGuidelineSet(guidelines);
drawingContext.DrawRectangle(null, pen, rect);
drawingContext.Pop();
}

The example above is the same as at the beginning of the article. But now we create a GuidelinesSet. To the set we add a
horizontal or vertical guidelines for each logical coordinate that we want to have aligned with physical pixels. And that is not the
center point, but the edge of our lines. Therefore we add half the penwidth to each point.


Before we draw the rectange on the DrawingContext we push the guidelines to the stack. The result are lines that perfecly match
to our physical device pixels
Adjust the penwidth to the screen resolution

The last thing we need to consider is that the width of the pen is still defined in logical units. If we want to keep the pen width to one
pixel (think a moment if you really want to have this) you can scale the pen width with the ration between your screen resolution and
WPF's logical units which is 1/96.
The following sample shows you how to do this.
Matrix m = PresentationSource.FromVisual(this)
.CompositionTarget.TransformToDevice;
double dpiFactor = 1/m.M11;

Pen scaledPen = new Pen( Brushes.Black, 1 * dpiFactor );

Last modified: 2008-10-24 02:15:02

Show all comments
I have a problem with WPF, maybe you could help me a little bit. I tried to draw on my window using
Juan
your method with the OnRender method, but nothing appears on my screen.
Hi Juan,
Christian
I have experienced the same problem. It seems that the OnRender() method does not work on
Moser
Windows. Create a custom control that derives from Control and add it to your window. Override the
OnRender() in your control. This will work.
I need to draw a grid which resembles a graph-sheet(along with minor grids), on that i need to plot line
Sam
graph. I tried to the above technique, but some horizantal lines are still alaising. It does not alias on
1280x1024 resolution, but on all other resolutions it aliases. Also its takes very long to paint. Please help
me on how can I do this so that this works for all resolutions and is paints very fast.

Thanks,
Sam
Great article! Very useful. One additional thought is that if you are considering scaling your stroke
Cory Plotts
thicknesses to be physical units at the creation of the Pen ... you might want to also do that when
setting up the guidelines. That is:
double halfPenWidth = pen.Thickness / 2 * dpiFactor;
And that implicitly brings up another point ... there is no reason that you have to do this for just 1 pixel
stroke thicknesses ... although the benefits there are the most striking!
hi Christian Moser thanx alot for such explanation, though i have a question, does this also work when
zafer
im SkewTransforming a control, cause the edges get very sharp and i want them to be smooth.
thanx alot,
Zafer
This seems like the optimal method to get rid of anti-aliasing. I think it's ironic to rely on owner drawn
Yury
functions to achieve this when the goal of WPF is specifically to provide an alternative to custom
drawing.
I have a problem with life. Can you help me out with that?
Mzithra D....
You'd be better taking these stupid comments off each page on turning it into a forum, it makes your
Zaggle...
site look pretty stupid IMO
Take the time to add a signup system to keep idiots take away from what is a great site
x
Hi Sam,
HatemAmin
You can use the "DrawingBrush" to do such thing, please visit http://msdn.microsoft.com/en-
us/library/aa480159.aspx
How can I draw lines & text with the crispiness using C++ or Delphi? I hate .Net and refuse to use WPF
Johnny...
or any other crappy Microsoft technologies.
How about performing this on Silverlight 4. Is it possible? How?

Igor...

You can turn off anti-aliasing with RenderOptions.SetEdgeMode(). Use this to set the edge mode of a
new_to_WPF
Canvas object to EdgeMode.Aliased. After that, anything you draw to the Canvas will not be blurry
(except text).
I recently stumbled upon a strange phenomenon:
Nebogipfel
This Code in an Image.OnRender(dc) override
GuidelineSet gs = new GuidelineSet();

gs.GuidelinesX.Add(500.5); // Arbitrary Integer + 0.5 works
gs.GuidelinesY.Add(500.5); // Arbitrary Integer + 0.5 works
dc.PushGuidelineSet(gs);
Brush b = Brushes.Red;
for (int i = 1; i < 300; i++)
dc.DrawRectangle(null, new Pen(b, 1), new System.Windows.Rect(0, 0, i, i));
b = b == Brushes.Red ? Brushes.Blue : Brushes.Red;
dc.Pop();
produces perfectly pixel snapped Rectangles. It seems it takes only one Guideline in each X and Y to
work. If one of the guideline gets removed, the corresponding axis gets blurred again whilst the other
stays crisp.
Is here some blackbox magic going on? Or am I just stupid. Note that both options might apply ;)
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Geometry Transformer
Home
2D Graphics
Geometry Transformer Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
WPF Geometry Transformation Tool
Custom Controls
The geometry transformer is a simple tool I wrote to scale-, translate- and rotate-transform a geometry in the path mini language.
Layout
Simply paste the geometry string into the input textbox and specify the transform parameters. After pressing "Transform" the output
Input textbox shows the translated geometry string. This is very useful to transform simple geometries like an expanded/collapsed chevron
used in an expander template.
Data Binding
Click here to download the Geometry Transformer
Styling

Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents
Windows 7
Interoperability
Performance
Expression Blend
Tools
UI Automation
Last modified: 2008-10-28 15:09:03
GeometryTransformer.html[2/16/2014 3:10:34 PM]

Show all comments
Hmmm, I checked a "popular" article and reading without comprehension on a mini language, then I
x
noticed the search engine deceiving comments :D
can you please tell me the logic for this? i want to implement this in a vector drawing application
wpf
This is nice. Can you make the source available please?

micaleel
It'll be nice if there is source code too...

Jawahar
With WPF, you can tranform elements by using RenderTransform.
mastermind
you can rotate, scale, and move them freely. I'm sorry I have no further information, I haven't tried it yet.
Look here for example:
http://www.codeguru.com/csharp/csharp/cs_misc/userinterface/article.php/c12221/
Perfect!! Was looking for the path of a chevron and I even got the tool to rotate it as a bonus! :D Thanks
Yuri
a lot.
<StackPanel OverridesDefaultStyle=\"True\">
hi
<Button>
<Button.Background>
<SolidColorBrush x:Name=\"MyBrush\" Color=\"Orange\" >
</SolidColorBrush>
</Button.Background>
<Button.Triggers>
<EventTrigger RoutedEvent=\"Button.Click\">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName=\"MyAnimatedBrush\"
Storyboard.TargetProperty=\"(Brush.Opacity)\"
From=\"1\" To=\"0\" Duration=\"0:0:5\" AutoReverse=\"True\" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>

</Button>
</StackPanel>
Excellent Artical i have ever seen

Haribabu
even my 3 year old child would created this type of scrap application.
rude
it is good could i have material for this

jogi
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Images
Home
2D Graphics
Images Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Images in WPF
Custom Controls
Layout
How to set the Icon of a Window
Input
If you try to set the Window.Icon from Codebehind, you probably get the error ImageSource for Icon property must be an icon
Data Binding file.. You can use the following snippet to do the trick:
Styling
var icon = BitmapFrame.Create(Application.GetResourceStream(
Localization
new Uri("MyAppIcon.ico", UriKind.RelativeOrAbsolute)).Stream);
Interaction

Resources Note: You can get an "Image format is unrecognized" exception under XP, if the icon only contains compressed PNG files. In this case
you have to recreate the icon without compression.
2D Graphics
3D Graphics
How to create a Thumbnail of an Image
Animation

Multimedia private ImageSource GetThumbnail( string fileName )
{
Documents
byte[] buffer = File.ReadAllBytes(fileName);
Windows 7 MemoryStream memoryStream = new MemoryStream(buffer);

Interoperability
BitmapImage bitmap = new BitmapImage();
Performance bitmap.BeginInit();
bitmap.DecodePixelWidth = 80;
Expression Blend bitmap.DecodePixelHeight = 60;
bitmap.StreamSource = memoryStream;
Tools
bitmap.EndInit();
UI Automation bitmap.Freeze();

return bitmap;
}

Images.html[2/16/2014 3:10:48 PM]


How to automatically crop an image

The following method allows you to automatically crop an image to it's content.

public static ImageSource AutoCropBitmap(BitmapSource source)
{
if (source == null)
throw new ArgumentException("source");

if (source.Format != PixelFormats.Bgra32)
source = new FormatConvertedBitmap(source,
PixelFormats.Bgra32, null, 0);

int width = source.PixelWidth;
int height = source.PixelHeight;
int bytesPerPixel = source.Format.BitsPerPixel / 8;
int stride = width * bytesPerPixel;

var pixelBuffer = new byte[height * stride];
source.CopyPixels(pixelBuffer, stride, 0);

int cropTop = height, cropBottom = 0, cropLeft = width, cropRight = 0;

for (int y = 0; y < height; y++)
{
for (int x = 0; x < width; x++)
{
int offset = (y * stride + x * bytesPerPixel);
byte blue = pixelBuffer[offset];
byte green = pixelBuffer[offset + 1];
byte red = pixelBuffer[offset + 2];
byte alpha = pixelBuffer[offset + 3];

//TODO: Define a threshold when a pixel has a content
bool hasContent = alpha > 10;

if (hasContent)
{
cropLeft = Math.Min(x, cropLeft);
cropRight = Math.Max(x, cropRight);
cropTop = Math.Min(y, cropTop);
cropBottom = Math.Max(y, cropBottom);
}
}
}

return new CroppedBitmap(source,
new Int32Rect(cropLeft, cropTop, cropRight - cropLeft,
cropBottom - cropTop));
}

Images.html[2/16/2014 3:10:48 PM]

How to flip an image horizontally or vertically

The easiest way to flip an image in WPF is to use a TransformedBitmap. It's a wrapper around a BitmapImage that takes a
generic Transform object.

var flippedImage = new TransformedBitmap(originalImage, new ScaleTransform( -1,1));


Last modified: 2011-03-01 08:43:30

Show all comments
Very nice code. I have a question though, say you have a 3 images (png, jpeg, etc). One is the regular
Curtis
image, one for mouseover and one for mousedown. Is there any way in Expression 3 or code to do an
event while still maintaining the button aspect. Meaning, is there a way to make a rollover event using
3 images?
Hi Curtis,
Christian
I did not exactly understood your question. Is it correct, that you would like to build a button that has a
Moser
normal, a mouseover and a pressed appearance?
If that was your question, you can create a style with triggers. Triggers are conditions within a style, who
can switch the source of the image, when the mouse hovers over the button or the button is pressed.
I hope this helps.
Greetings
Christian
Hi,
Nanda
Very good code, however are there any examples on image move in the canvas. For example I have a
football image and have placed in the canvas, when ever I move my mouse it should move within the
canvas and shouldn't go outside.
yeah excellent code

Gourav
Images.html[2/16/2014 3:10:48 PM]

Good code but you are wasting much memory, because of:
Christian
bitmap.StreamSource = memoryStream;
That is a reference on the stream which will be available until the Image itself is destryoed, so you are
holding the Memory for the real Image AND the thumbnail!
Better solution for me is to creating a
WriteableBitmap bmp = new WriteAbleBitmap(bitmap);
And Dispose the stream:
memorystream.close();
memorystream.Dispose();
memorystream = null;
(Better Solution is using the "Using" statement)
and returning only the thumbnail!
ps.: Some Websites recomment that you freeze() the Bitmaps to confirm that the memory is beeing
released after use
Show outputs of above examples

M.Sreekanth
How do I move an image with code ie, I want to center an image inside a grid keeping the image
Hector
hight/width ratio
Excellent Christian Moser,
Ayyappa
We need elaborate description and Examples.
INDIA
Greetings,
Ayyappan,
INDIA,
banyansoft.blogspot.com
Name
E-Mail (optional)
Comment
Post Comment
Images.html[2/16/2014 3:10:48 PM]

WPF Tutorial | How to get a Bitmap from a Visual
Home
2D Graphics
How to get a Bitmap from a Visual Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to get a Bitmap from a Visual
Custom Controls

Layout public void SaveImage(Visual visual, int width, int height, string filePath)
{
Input RenderTargetBitmap bitmap = new RenderTargetBitmap(width, height, 96, 96,
Data Binding PixelFormats.Pbgra32);
bitmap.Render(visual);
Styling
PngBitmapEncoder image = new PngBitmapEncoder();
Localization
image.Frames.Add(BitmapFrame.Create(bitmap));
Interaction using (Stream fs = File.Create(filePath))
{
Resources
image.Save(fs);
2D Graphics }
}
3D Graphics

Animation
Multimedia
Documents
Windows 7
Last modified: 2009-07-13 11:28:57
Interoperability Copyright (c) by Christian Moser, 2011.
Performance
Expression Blend Comments on this article

Tools
Show all comments
UI Automation
Awesome post!! thats what I was looking for.
Sachin
Thanks.
BitmapFromVisual.html[2/16/2014 3:11:30 PM]

WPF Tutorial | How to get a Bitmap from a Visual
Rahul Nice One!!!

Mehta
Thanks a lot !!!!

Kc
Name
E-Mail (optional)
Comment
Post Comment
BitmapFromVisual.html[2/16/2014 3:11:30 PM]

WPF Tutorial | DrawRoundedRectangle
Home
2D Graphics
DrawRoundedRectangle Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
DrawRoundedRectangle with individual radius for each corner
Custom Controls
Layout
Input
Data Binding
Styling
drawingContext.DrawRoundedRectangle() has an ugly limitation, that you can set the corner radius only for all four corners
Localization at the time. This function extends the drawing context by a new overload of the DrawRoundedRectangle() method, that allows
it to set the corner radius for each corner individually.
Interaction

Resources
/// <summary>
2D Graphics /// Draws a rounded rectangle with four individual corner radius
/// </summary>
3D Graphics public static void DrawRoundedRectangle(this DrawingContext dc, Brush brush,
Pen pen, Rect rect, CornerRadius cornerRadius)
Animation
{
Multimedia var geometry = new StreamGeometry();
using (var context = geometry.Open())
Documents
{
Windows 7 bool isStroked = pen != null;
const bool isSmoothJoin = true;
Interoperability

Performance context.BeginFigure(rect.TopLeft + new Vector(0, cornerRadius.TopLeft), brush
!= null, true);
Expression Blend context.ArcTo(new Point(rect.TopLeft.X + cornerRadius.TopLeft, rect.TopLeft.Y),
Tools
new Size(cornerRadius.TopLeft, cornerRadius.TopLeft),
UI Automation 90, false, SweepDirection.Clockwise, isStroked, isSmoothJoin);
context.LineTo(rect.TopRight - new Vector(cornerRadius.TopRight, 0), isStroked,
isSmoothJoin);
context.ArcTo(new Point(rect.TopRight.X, rect.TopRight.Y +
cornerRadius.TopRight),
DrawRoundedRectangle.html[2/16/2014 3:11:43 PM]
new Size(cornerRadius.TopRight, cornerRadius.TopRight),

90, false, SweepDirection.Clockwise, isStroked, isSmoothJoin);
context.LineTo(rect.BottomRight - new Vector(0, cornerRadius.BottomRight),
isStroked, isSmoothJoin);
context.ArcTo(new Point(rect.BottomRight.X - cornerRadius.BottomRight,
rect.BottomRight.Y),
new Size(cornerRadius.BottomRight, cornerRadius.BottomRight),
context.LineTo(rect.BottomLeft + new Vector(cornerRadius.BottomLeft, 0),
isStroked, isSmoothJoin);
context.ArcTo(new Point(rect.BottomLeft.X, rect.BottomLeft.Y -
cornerRadius.BottomLeft),
new Size(cornerRadius.BottomLeft, cornerRadius.BottomLeft),

context.Close();
}
dc.DrawGeometry(brush, pen, geometry);
}

► Tutorial ► Draw ► Adobe Illustrator ► Photoshop Vector

Last modified: 2010-11-01 16:20:37

Show all comments
lklkl
m,m,
lklkl
m,m,
Deepak this is for good

Badesara
Very nice, this is just what I needed!

Kristof...
nothing to understanu... ch*u...

Darshan

very difficult to understand there is no 2D
Poda
nice one
shweta
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Introduction to WPF 3D
Home
3D Graphics
Introduction to WPF 3D Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Introduction to WPF 3D
Custom Controls
Layout
3D Graphic Basics
Input
The basic idea of creating 3D graphics is to have a three dimensional model of an object. Because our screen is only two dimensional,
Data Binding we define a camera that takes a picture of the object. The picture is a projection of the object to a planar surface. This projection is
rendered into an bitmap by the 3D rendering engine. The engine determines the color for every pixel by calculating the amount of
Styling
light that is reflected by any light sources to the projection surface by the objects in the 3D space.
Localization
All surfaces of objects have a material and a brush. The material defines how much light is reflected for a specific angle and the
brush defines the color. A brush can either be a simple color or a gradient or even an image called texture.
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents
Windows 7
Interoperability
Performance
Expression Blend
Tools A world of triangles

UI Automation
In the world of 3D graphics, all objects are described by a set of triangles. But why triangles? The reason for this is that a triangle is the
most granular geometry to describe a planar surface. The rendering engine can calculate the color of each triangle depending on its
material and angle to the lights in the scene. If we would build our world on rectangles, the points don't need to be plane. The
surface will be a lot more complex to calculate and render.
IntroductionTo3D.html[2/16/2014 3:12:17 PM]

A surface of a 3D object is called a mesh. A mesh is defined by a number of 3D points. These points are called vertices. The vertices
are joined together by a winding pattern to define the triangles. Every triangle has a front and a back side. Only the front side is
rendered. The front side is defined by the winding order of the points. WPF uses a counter clockwise winding pattern. You can
remember this with a simple mnemonic called the "right hand rule". This means if you close your right hand to a thumb-up gesture,
your finger make a counter clockwise move while the thumb shows up. The fingers show the winding order, while the thumb
indicates the upper-side of the triangle.
A right handed coordinate system

WPF uses a right-handed coordinate system. This means that if you hold the fingers of your right hand as shown on the picture, the
fingers indicate the positive direction of the tree axes.
Elements of a 3D scene
Viewport3D
The viewport is the control that builds the gate between the 2D and the 3D world.
Camera
Every 3D scene has excactly one camera. The camera defines the Position and the LookDirection and the
UpDirection of the viewer. WPF supports orthographical and perspective cameras.
3D Models
A 3D model defines an object in the scene. It has a Geometry that is the mesh and a Material that can be a diffuse,
specular or emmisive material. The material itself has a brush.

Lights
Without any lights you see nothing. So we need to place at least one light in our scene to illuminate our models. WPF supports
different kind of lights, like:
AmbientLight
DirectionalLight
PointLight
SpotLight
Hello 3D-World - A Simple Cube

The following example shows how to create a basic cube mesh with 8 vertices that are wired up in 12 triangles that form the shape of
the cube.
<Viewport3D>
<Viewport3D.Camera>
<PerspectiveCamera Position="-40,40,40" LookDirection="40,-40,-40 "
UpDirection="0,0,1" />
</Viewport3D.Camera>
<ModelVisual3D>
<ModelVisual3D.Content>
<Model3DGroup>
<DirectionalLight Color="White" Direction="-1,-1,-3" />
<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D Positions="0,0,0 10,0,0 10,10,0 0,10,0 0,0,10
10,0,10 10,10,10 0,10,10"
TriangleIndices="0 1 3 1 2 3 0 4 3 4 7 3 4 6 7 4 5 6
0 4 1 1 4 5 1 2 6 6 5 1 2 3 7 7 6 2"/>
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<DiffuseMaterial Brush="Red"/>
</GeometryModel3D.Material>
</GeometryModel3D>
</Model3DGroup>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>


► Tutorial ► Java Web Tutorial ► Learn Quick Books ► Coding Learning

Last modified: 2009-07-04 16:21:17

Show all comments
You have a special web-Site....And thank about the perfect information.
Debug
how now how to paint Star or polygon in the code (in WPF) and I have only
the width and height of the star or polygon.
It very important me and I need it S-O-S.
Thank
Debug.....
This is good i think this help to all developer who want to work on WPF
Shekhar
Great work !!
Achilles
need more, plz continue

tsingroo
This is good. But I like to know how to design 3D objects using Expression Blend.
Jawahar
Hey, good tutorial....well i developed a browser with this 3D cube concept but currently only single
Saurabh
phase of the browser is active to show the single URL and all other phases shows its screen shot....pls.
tell me how to enable or load different URL's on each phase...is it ur area of working or not...
232
rer
Very good article

simran
Ok so how about events, multiple geometries in the same viewport, storyboards and different lighting
Mega
types? a lil disappointed with this extremely limited example of what wpf 3d can do. guess this is not

the place to find out how to trigger an event when a mouse is clicked on a face of a mesh or another
mesh within the viewport
Caro,
Rafael
podes me ajudar?
tenho uma serie de pontos e preciso plotar uma superfÃcie e rotaciona-la e aplicar zoom.
No aguardo.
Friend,
Rafael
can you help me?
I have a series of plot points and need a surface and rotate it and zoom.
Waiting in the wings.
Very Very Good And Esay To DO.

Rahul
I'll try this and after i will lets you know.

Rajendra
i want to write the PROPEQUITY in 3d and import XAML, can you tell me wht is the xaml code. pls ....
Chetan
xxgk wwprs <a href="http://www.gabbysporn.com">free adult videos</a> zgehnu g pe q cnr

free adult...
scbu ysyey [URL=http://www.gabbysporn.com - porno[/URL - eoetve e ts y fgd
Supa nice
Johnson
<Viewport3D>
kondsreddy
<Viewport3D.Camera>
<PerspectiveCamera Position="-40,40,40" LookDirection="40,-40,-40 "

UpDirection="0,0,1" />
<ModelVisual3D>
<Model3DGroup>
<DirectionalLight Color="White" Direction="-1,-1,-3" />
<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D Positions="0,0,0 10,0,0 10,10,0 0,10,0 0,0,10

10,0,10 10,10,10 0,10,10"
TriangleIndices="0 1 3 1 2 3 0 4 3 4 7 3 4 6 7 4 5 6
0 4 1 1 4 5 1 2 6 6 5 1 2 3 7 7 6 2"/>

</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<DiffuseMaterial Brush="Red"/>
</GeometryModel3D.Material>
</GeometryModel3D>
</Model3DGroup>
</ModelVisual3D>
</Viewport3D>
hmm
at
very nice it's impressive

Onur
Md. Nasim nice document

Uddin
hello, I am new to 3D and WPF together,
jenny
i tried to create simple 2 buttons in Viewport3D, like this:
--------------------------------------------------------------
<Viewport3D Width="300" Height="300" >
<Viewport3D.Children>
<Viewport2DVisual3D>
<Viewport2DVisual3D.Geometry>
<MeshGeometry3D
Positions="-1,-1,0 1,-1,0 1,1,0 -1,1,0"
TextureCoordinates="0,1 1,1 1,0 0,0"
TriangleIndices="0,1,2 2,3,0"
/>
</Viewport2DVisual3D.Geometry>
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"
Brush="Red"/>
</Viewport2DVisual3D.Material>

<Canvas Height="300" Width="300">
<Button Canvas.Left="0" Canvas.Top="0" Height="60"

Width="60" Content="one" />

Width="40" Content="two" />
</Canvas>
</Viewport2DVisual3D>
<ModelVisual3D>
<SpotLight Color="White" Position="0,0,3" Direction="0,0,-1"

Range="50"
OuterConeAngle="59" InnerConeAngle="0" />
</ModelVisual3D>
</Viewport3D.Children>

<Viewport3D.Camera>
<PerspectiveCamera FarPlaneDistance="20"
LookDirection="0,0,-1"
UpDirection="0,1,1"
NearPlaneDistance="1"
Position="0,0,5"
FieldOfView="45"
/>
</Viewport3D>
----------------------------------------------------------------------
i can't understand why when i change the properties of one button its affecting how i see the other
button, for example when i change button's "two" height from 60 to 100 , button
"one" becomes smaller???
please help me understand,

tnx jenny
jenny
--------------------------------------------------------------
<MeshGeometry3D
Positions="-1,-1,0 1,-1,0 1,1,0 -1,1,0"
/>
Brush="Red"/>


</Canvas>
<ModelVisual3D>

Range="50"

</ModelVisual3D>

<Viewport3D.Camera>
UpDirection="0,1,1"
Position="0,0,5"
FieldOfView="45"
/>
</Viewport3D>
----------------------------------------------------------------------
tnx jenny
jenny
--------------------------------------------------------------
<MeshGeometry3D
Positions="-1,-1,0 1,-1,0 1,1,0 -1,1,0"

/>
Brush="Red"/>


</Canvas>
<ModelVisual3D>

Range="50"
</ModelVisual3D>

<Viewport3D.Camera>
UpDirection="0,1,1"
Position="0,0,5"

FieldOfView="45"
/>
</Viewport3D>
----------------------------------------------------------------------
tnx jenny
jenny
--------------------------------------------------------------
<MeshGeometry3D
Positions="-1,-1,0 1,-1,0 1,1,0 -1,1,0"
/>
Brush="Red"/>


</Canvas>
<ModelVisual3D>

Range="50"
</ModelVisual3D>

<Viewport3D.Camera>
UpDirection="0,1,1"
Position="0,0,5"
FieldOfView="45"
/>
</Viewport3D>
----------------------------------------------------------------------
tnx jenny

Hi Everyone,
BindraBindu
Really! this is very nice article.
Here I have also another example, how to create 3D shape in WPF. Please check out the following
links for more details .............
http://www.mindstick.com/Articles/fdec9740-4e4c-49c2-8395-6e610950f3c4/?Create%203-
D%20cube%20in%20WPF
Thanks !!!!!!!
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Debugging Animations
Home
Animation
Debugging Animations Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Debugging style and template Errors
Custom Controls
Layout
Common Errors
Input If you get the following error: Cannot animate ... on an immutable object instance. it could be that you are run
into one of the following issues:
Data Binding
You are animating a dependency property without having a value set
Styling
You are animating a dependency property who's value is resolved by a DynamicResource
Localization You are animating a dependency property who's current value is defined in another assembly that is not merged into the
Interaction
resource dictionary.
You are animating a value that is currently databound
Resources You have an invalid property path specified.
2D Graphics
3D Graphics
► Tutorial ► C Sharp Tutorial ► C C++ Programming ► Visual C++
Animation
Multimedia
Last modified: 2011-03-24 17:42:20
Documents Copyright (c) by Christian Moser, 2011.
Windows 7
Interoperability Comments on this article

Performance
Show all comments
Expression Blend
Tools
Thanks for putting this up, it helped.
Dmitry
UI Automation
siva its good but give more information
DebuggingAnimations.html[2/16/2014 3:12:34 PM]

WPF Tutorial | Debugging Animations
krishna...
This Content is Useful. But it is not enough. Need More Info

Thangavel
This is no brainer that most of us will try to set color in storyboard and get this exception. not only you
Not Crishna
havent mentioned it but you also dont say what to do.... and yeah - what does "without setting a local
value" means really? local to what? typical jew stuff. saying but not telling. thanks
I have a question
alan
@Not Crishna - Local Value = for example: property value set in xaml or call SetValue directly in code for
Stefan
example. Basically, the WPF framework calls SetValue(...) for a given DP when used in bindings directly
instead of the property, that's why the breeakpoint set in the DP setter sometimes doesn't get hit.
@Christian M - Thanks man. If only I could have had this 1 year ago... :)
Name
E-Mail (optional)
Comment
Post Comment
DebuggingAnimations.html[2/16/2014 3:12:34 PM]

WPF Tutorial | Adjust the Frame Rate
Home
Animation
Adjust the Frame Rate Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to control the frame rate for WPF animations
Custom Controls
Animations are very cool, but they can cause a high CPU load. One reason could be a missing hardware acceleration due to a old
Layout graphics adapter or a software rendering constraint. Another reason could be the the high frame rate of animations that is set to 60
fps by default.
Input
You can easily lower the framerate for all animations by overriding the DesiredFrameRate property of the timeline. Just add the
Data Binding
following code to your project and play around with the setting to find a good tradeoff between performance and aesthetic.
Styling

Localization Timeline.DesiredFrameRateProperty.OverrideMetadata(typeof(Timeline),
new FrameworkPropertyMetadata { DefaultValue = 30 });
Interaction
Resources

Or you can set the framerate individually for each animation in XAML, using the following code:
2D Graphics
3D Graphics
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:0.5"
From="1.0" To="0.5" Timeline.DesiredFrameRate="30" />
Animation

Multimedia
Documents
► Tutorial ► ActionScript ► Flash 8 ► Flash CS3
Windows 7
Interoperability
Last modified: 2010-03-02 00:31:02
Performance Copyright (c) by Christian Moser, 2011.
Expression Blend
Tools Comments on this article
UI Automation
Show all comments
Good tutorial for WPF

karthik
FrameRate.html[2/16/2014 3:13:10 PM]

Thank you for this. And seeing it's defined by a property, we can even define this individually for
RomanK
animations (e.g. to make soft animations smoother or reduce CPU load on fast animations). In XAML
this can look like this:
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:0.5" From="1.0" To="0.5"

Timeline.DesiredFrameRate="30" />
Why not add this to your tutorial?
Christian Thanks Roman! I added your XAML example.

Moser
Adjusting frame rates was always a mess for me being a novice flash programmer , the way you
Atul Raina
expressed the topic out here would help me in getting through. Thanks a lot and your knowledge
share is appreciating
Nice tutorial
Iyappan Mani
klam zy el fol wallahy , ana msh 3aref a2olko eh > < ento nas zy el fol , 5llo balko mn nfsko w isa
3bdeen tb3n
htb2o 7d kowyes
klam zy el fol wallahy , ana msh 3aref a2olko eh > < ento nas zy el fol , 5llo balko mn nfsko w isa
3bdeen tb3n
htb2o 7d kowyes
Does a round gauge control (controls for WPF) uses animation to move the indicator??? thanks
Qualitatserz...
MOSER
MOSEY
Good
subbu

Hi
Rev
Cool Article, but I have real big problem with animations.(its about framrates)
Hi
raj
Cool Article, but I have real big problem with animations.(its about framrates)
GOOD TUTORIAL..
shivraj...
its good but how to add in user control please tell

Pradip
swetha Thank you..nice tutorial

sreepada
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Inline Images in a FlowDocument
Home
Documents
Inline Images in a FlowDocument Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to inline Images in a FlowDocument
Custom Controls
Layout
Introduction
Input
Sometimes you want to deploy, share or load just a plain XAML file containing a FlowDocument. Then you want to put in some inline
Data Binding images. HTML provides a functionality to express the image as Base64 encoded CDATA section, but WPF does not have such a
functionality.
Styling
Localization
I found a solution how to do this, by creating a custom InlineImage element, that does the trick. The following example shows
how to do it.
Interaction

Resources <FlowDocument>
<InlineImage Width="100" Height="100" Stretch="Fill">
2D Graphics
<![CDATA[iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAB3RJTUUH2AQP
3D Graphics SFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAAnOSURBVHjaxVcLcBvVFT1vV
ki3Hju3GCQnGjkObONQkJkxCSIHQQGnIdEr5TFs+LaGl7RRCSUvDp8nglH4mDGQ6EwZIm=]]>
Animation </InlineImage>
Multimedia
</FlowDocument>

Documents
Windows 7
Implementation of the InlineImage Control
Interoperability

Performance namespace XamlInlineImageDemo
{
Expression Blend
[assembly: XmlnsDefinition("http://schemas.microsoft.com/winfx/2006/xaml/presentation",
Tools
"XamlInlineImageDemo")]
UI Automation
[ContentProperty("Base64Source")]
public class InlineImage : BlockUIContainer
{
#region DependencyProperty 'Width'
InlineImagesXaml.html[2/16/2014 3:13:23 PM]


/// <summary>
/// Gets or sets the width.
/// </summary>
public double Width
{
get { return (double)GetValue(WidthProperty); }
set { SetValue(WidthProperty, value); }
}

/// <summary>
/// Registers a dependency property to get or set the width
/// </summary>
public static readonly DependencyProperty WidthProperty =
DependencyProperty.Register("Width", typeof(double),
typeof(InlineImage),
new FrameworkPropertyMetadata(Double.NaN));

#endregion

#region DependencyProperty 'Height'

/// <summary>
/// Gets or sets the height.
/// </summary>
public double Height
{
get { return (double)GetValue(HeightProperty); }
set { SetValue(HeightProperty, value); }
}

/// <summary>
/// Registers a dependency property to get or set the height
/// </summary>
public static readonly DependencyProperty HeightProperty =
DependencyProperty.Register("Height", typeof(double),
new FrameworkPropertyMetadata(Double.NaN));

#endregion

#region DependencyProperty 'Stretch'

/// <summary>
/// Gets or sets the stretch behavior.
/// </summary>
public Stretch Stretch
{
get { return (Stretch)GetValue(StretchProperty); }
set { SetValue(StretchProperty, value); }
}

/// <summary>
/// Registers a dependency property to get or set the stretch behavior
/// </summary>
public static readonly DependencyProperty StretchProperty =
DependencyProperty.Register("Stretch", typeof(Stretch),
new FrameworkPropertyMetadata(Stretch.Uniform));

#endregion

#region DependencyProperty 'StretchDirection'

/// <summary>
/// Gets or sets the stretch direction.
/// </summary>
public StretchDirection StretchDirection
{
get { return (StretchDirection)GetValue(StretchDirectionProperty); }
set { SetValue(StretchDirectionProperty, value); }
}

/// <summary>
/// Registers a dependency property to get or set the stretch direction
/// </summary>
public static readonly DependencyProperty StretchDirectionProperty =
DependencyProperty.Register("StretchDirection", typeof(StretchDirection),
new FrameworkPropertyMetadata(StretchDirection.Both));

#endregion

#region DependencyProperty 'Base64Source'

/// <summary>
/// Gets or sets the base64 source.
/// </summary>
public string Base64Source
{
get { return (string)GetValue(Base64SourceProperty); }
set { SetValue(Base64SourceProperty, value); }
}

/// <summary>
/// Registers a dependency property to get or set the base64 source
/// </summary>
public static readonly DependencyProperty Base64SourceProperty =
DependencyProperty.Register("Base64Source", typeof(string),
new FrameworkPropertyMetadata(null, OnBase64SourceChanged));

#endregion

#region Private Members

private static void OnBase64SourceChanged(DependencyObject sender,
{
var inlineImage = (InlineImage)sender;
var stream = new

MemoryStream(Convert.FromBase64String(inlineImage.Base64Source));

var bitmapImage = new BitmapImage();
bitmapImage.BeginInit();
bitmapImage.StreamSource = stream;
bitmapImage.EndInit();

var image =new Image {
Source = bitmapImage,
Stretch = inlineImage.Stretch,
StretchDirection = inlineImage.StretchDirection,
};

if (!double.IsNaN(inlineImage.Width))
{
image.Width = inlineImage.Width;
}

if (!double.IsNaN(inlineImage.Height))
{
image.Height = inlineImage.Height;
}

inlineImage.Child = image;
}

#endregion

}
}


Last modified: 2010-07-15 08:22:33

Show all comments
0
o
aa
Aa
Very good tutorial
MooningGloub

Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | FlowDocuments
Home
Documents
FlowDocuments Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to use FlowDocuments
Custom Controls
Layout
How to save or load a FlowDocument embedded images
Input
There is a way to save and load a flow document including all embedded images by putting them into a XamlPackage. The
Data Binding following sample shows how to do this:
Styling
// Save
Localization
var source = new FlowDocument();
Interaction var range = new TextRange(source.ContentStart, source.ContentEnd);
using (var stream = File.Create("output.pak"))
Resources {
2D Graphics
range.Save(stream, DataFormats.XamlPackage);
}
3D Graphics

Animation
// Load
Multimedia using(var stream = File.OpenRead("output.pak"))
Documents
{
var target = new FlowDocument();
Windows 7 var range = new TextRange(target.ContentStart, target.ContentEnd);
range.Load(stream, DataFormats.XamlPackage);
Interoperability
}
Performance

Expression Blend
Tools
How to navigate by hyperlinks
UI Automation If you have a FlowDocument that contains Hyperlinks and you want to perform some action when the user clicks on the link, you can
use hook up to the RoutedEvent Hyperlink.RequestNavigateEvent. The following code snippet shows you how to do it:

<Window x:Class="HyperlinksInFlowDocument.Window1"
FlowDocuments.html[2/16/2014 3:13:37 PM]

<Grid>
<FlowDocumentReader>
<FlowDocument>
<Paragraph>
<Hyperlink NavigateUri="http://www.google.ch">Google</Hyperlink>
</Paragraph>
</FlowDocument>
</FlowDocumentReader>
</Grid>
</Window>

public Window1()
{
AddHandler(Hyperlink.RequestNavigateEvent, new
RoutedEventHandler(OnNavigationRequest));
}

public void OnNavigationRequest(object sender, RoutedEventArgs e)
{
var source = e.OriginalSource as Hyperlink;
if (source != null)
Process.Start(source.NavigateUri.ToString());
}

► Tutorial ► 3D Max Tutorials ► Lightwave 3D ► Rhino 3D

Last modified: 2010-07-08 17:45:05

Show all comments
Thanks! Very Useful

Umar
Thanks
Soundar
thanks
tarun

Thanks !!
Anil
Hi!Thanks
ngocanhk6apro
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Task Dialog
Home
Windows 7
Task Dialog Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to use the Windows Vista TaskDialog in WPF
Custom Controls
Layout
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents
Windows 7
Interoperability
Introduction
Performance Windows Vista comes with an new standard dialog box called task dialog. The TaskDialog was developed as part of Windows Vista's
"clarity" offensive to improve the user experience. It provides a lot more features than the original message box.
Expression Blend
The TaskDialog is part of the comctrl32.dll library and only available on Windows Vista or later, its not part of WPF or the .NET
Tools framework. To use it from managed code, we need to write a interop wrapper.
UI Automation This article is not finished yet... :-(
TaskDialog.html[2/16/2014 3:14:14 PM]


Last modified: 2009-02-10 09:05:09

Show all comments
When is it going to be finished?

AlSki
looking forward to the article being finished.

vrd
You can use the Vista Bridge Library and/or the Windows API Code Pack:
Mani
http://code.msdn.microsoft.com/VistaBridge
http://code.msdn.microsoft.com/WindowsAPICodePack
HTH, Mani
really looking foward to this...
Austin
if i want to create an App with taskdialog, do i create the lib myself or can i download it from
somewhere and use it?
pretty much
cortisol
amitabh we are waiting for it buddy..

ghosh
You could release the source code of this application (screenshot) for
Flavio
download?
use Ookii dialog. it is good to use.

YJ
In addition to Manis comment from 12.August 2009...
Christian
There is a nice tutorial available as PDF on how to use the WinAPICodePack and its components:
http://www.hinzberg.net/api7/api7/downlaods_files/windows7api.pdf

Have fun!
Please update it tutorial. I am going mad implementing the API. Please!

Anonymous
It contains an incomplete information of taskdialog

rajesh
can I create a Font application (same as the application we click to change font its size and style) in
swat
WPF????? And if yes How??????
Hi,
Sreekumar
Can you please complete this article........
Danke fÃ¼r den Link zur Windows7api.pdf, war sehr hilfreich. Spitzen Homepage, immer
Tiberius
ein Quell an Inspiration fÃ¼r mich!
2 years and nothing comes. asshole

yourMother
Look under http://www.codeproject.com/KB/WPF/WPFTaskDialogVistaAndXP.aspx
Lmaa
There is Code for you
Can u please complete this atical, and show how to use it.
Ahtesham
reagrds thanks.
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Glass Windows
Home
Windows 7
Glass Windows Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to extend the Aero Glass into the Client area
Custom Controls
Layout
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
Introduction
Multimedia
Windows Vista has a new default theme called Aero glass. In Aero glass, the title bar of a window and the frame is drawn transculent.
Documents
This gives the UI a clean and lightweight look. This nice feaure is provided by a service that is called the desktop window manager
Windows 7 (DWM).
Interoperability
Performance Extending the Glass

Expression Blend By default the blurry glass effect is only on the title bar and the frame, but the client area is drawn opaque. But there is a simple way
to extend the glass into the client area by using the DWM's API.
Tools
First thing you need to do is to include some Win32 functions from the dwmapi.dll library.
UI Automation

using System.Runtime.InteropServices;
using System.Windows.Interop;
using System.Windows.Media;
ExtendGlass.html[2/16/2014 3:14:34 PM]

using System.Windows;

[StructLayout(LayoutKind.Sequential)]
struct MARGINS
{
public int cxLeftWidth;
public int cxRightWidth;
public int cyTopHeight;
public int cyBottomHeight;
}

[DllImport("dwmapi.dll")]
static extern int
DwmExtendFrameIntoClientArea(IntPtr hWnd, ref MARGINS pMarInset);

[DllImport("dwmapi.dll")]
extern static int DwmIsCompositionEnabled(ref int en);

I have written a helper method that does all the stuff to extend the glass by the specified amount of pixels on each border of the
window.

/// <summary>
/// Extends the glass area into the client area of the window
/// </summary>
/// <param name="window"></param>
/// <param name="top"></param>
public static void ExtendGlass(Window window, Thickness thikness)
{
try
{
int isGlassEnabled = 0;
DwmIsCompositionEnabled(ref isGlassEnabled);
if (Environment.OSVersion.Version.Major > 5 && isGlassEnabled > 0)
{
// Get the window handle
WindowInteropHelper helper = new WindowInteropHelper(window);
HwndSource mainWindowSrc = (HwndSource)HwndSource.
FromHwnd(helper.Handle);
mainWindowSrc.CompositionTarget.BackgroundColor =
Colors.Transparent;

// Get the dpi of the screen
System.Drawing.Graphics desktop =
System.Drawing.Graphics.FromHwnd(mainWindowSrc.Handle);
float dpiX = desktop.DpiX / 96;
float dpiY = desktop.DpiY / 96;

// Set Margins
MARGINS margins = new MARGINS();
margins.cxLeftWidth = (int)(thikness.Left * dpiX);
margins.cxRightWidth = (int)(thikness.Right * dpiX);
margins.cyBottomHeight = (int)(thikness.Bottom * dpiY);

margins.cyTopHeight = (int)(thikness.Top * dpiY);

window.Background = Brushes.Transparent;

int hr = DwmExtendFrameIntoClientArea(mainWindowSrc.Handle,
ref margins);
}
else
{
window.Background = SystemColors.WindowBrush;
}
}
catch (DllNotFoundException)
{

}
}

Next thing you need to do is calling the ExtendGlass in the OnSourceInitialized callback. Because that is the time the
window handle has been created.

protected override void OnSourceInitialized(EventArgs e)
{
base.OnSourceInitialized(e);
GlassHelper.ExtendGlass(this, LayoutRoot.Margin);
}

Since the user (or the system) can enable or disable the glass effect while the application is running, we need to hook up a callback in
the WndProc to undo or initialize the glass extension dynamically.

private IntPtr WndProc(IntPtr hwnd, int msg, IntPtr wParam,
IntPtr lParam, ref bool handled)
{
if (msg == GlassHelper.WM_DWMCOMPOSITIONCHANGED)
{
GlassHelper.ExtendGlass(this, LayoutRoot.Margin);
handled = true;
}
return IntPtr.Zero;
}

► Tutorial ► Photoshop CS4 ► Glass Buttons ► Photoshop Vector

Last modified: 2009-12-16 16:45:09


Show all comments
Is it just me, or does Expression Blend 3 (RC) completely ignore the fact that there's a System.Drawing
Tim
namespace? I can't make the code work, and it's just this one single part that is holding me up. It says
there's no "Drawing" namespace in the "System" namespace. (???)
PS -- I got it working by removing the DPI detection (a workaround, not a fix, of course), and then it
Tim
started working like a charm. thanks so much for the helper class! Lovely how it pulls the margin right
off of my LayoutRoot!!
Hi Tim,
Christian
The System.Drawing namespace is defined in a separate assembly called "System.Drawing". You
Moser
probably forgot to add a reference to that assembly. In Blend it's a bit tricky to do this. But in Visual
Studio just right-click of the "References" folder in your project and choose "Add Reference..." then
select the tab ".NET" and find the "System.Drawing" entry.
I hope this helps.
Greetings
Christian
Thanks-- I'm still a bit new to C#, and my experience with Java isn't helping much at times like this :)
Tim
Thanks for the tip-- I will be sure to make use of it.
By the way, do you know if there's a way to render text with the Vista/Win7 blur behind it? That is, the
effect used on the gadget list when you try to add to the sidebar/desktop, or in the titlebar of a
window? I've read about this for doing straight-up C/++ application programming, but I don't know if
there is a way to specify such things given the interface that Blend gives you. And it would be slightly
backwards if I had to programatically render the text instead of using the xaml/gui editor.
If not, I can live with it :P (or fake the effect, either way!) Thanks muchly for sharing your expertise.
Hi Tim,
Christian
Moser
check out this Expression Blend Behavior: http://gallery.expression.microsoft.com/en-us/GlassBehavior
Greetings
Christian
Perfect. Thanks again. This is what I imagined it should be like :)

Tim

Reading over the MSDN documentation, it looks as if the whole client area will have the Aero Glass
Matt
drawn under it if you set the margins to -1.
Wilkinson
http://msdn.microsoft.com/en-us/library/aa969537%28VS.85%29.aspx#frameextend
Implementation in VB.NET:
Ankit
Malhotra
Imports System.Drawing
Imports System.Runtime.InteropServices
Public Class Form1
<DllImport("dwmapi.dll", CharSet:=CharSet.Auto)> _
Public Shared Sub DwmExtendFrameIntoClientArea(ByVal hWnd As System.IntPtr, ByRef pMargins As

Printing.Margins)
End Sub
Private Glass_brush As SolidBrush = New SolidBrush(Color.Black)
Private border_extensions As Printing.Margins = New Printing.Margins
'Public Structure Margins
' Public Left As Integer
' Public Right As Integer
' Public Top As Integer
' Public Bottom As Integer
'End Structure
Public Sub New()
InitializeComponent()
border_extensions.Top = 300 'amount of border extension required from top border
border_extensions.Left = 300 'amount of border extension required from left border
border_extensions.Right = 300 'amount of border extension required from right border
border_extensions.Bottom = 300 'amount of border extension required from the bottom border
DwmExtendFrameIntoClientArea(Me.Handle, border_extensions)
End Sub
Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
e.Graphics.FillRectangle(Glass_brush, New System.Drawing.Rectangle(0, 0, 300, 300))
'' painting the areas in client regions in black..if these fall in the margins described u would get
'' glass effect!
End Sub
End Class
It seems overkill to do anything based just plainly on operating system such as vista. I work at a massive
Chris Jacobs
organisation and they wouldn't touch it. I havent used it so no comment, i like the glass effect. But
seriously solutions should and need to be for XP and above, not just for vista. home users use vista
organisations tend to stay away. And thats a fact. Why have a nice window that looks crap when
majority of users use it.

why does my buttons and images look weird? my pictures have no transparency and my buttons don't
mitzaodx
show like buttons... they look weird..??
Fixed the buttons. I changed the color from black to navy and used a pannel to get the aero feel. I just
mitzaodx
want to know is there a way that the icons displayed in a listview can be full scale? when i set it to
32x32 they look very bad, can it be that the icons look like vista desktop icons? with that kind of select
effect?
thank,s
saman
Fixed the buttons. I changed the color from black to navy and used a pannel to get the aero feel. I just
mitzaodx
want to know is there a way that the icons displayed in a listview can be full scale? when i set it to
32x32 they look very bad, can it be that the icons look like vista desktop icons? with that kind of select
effect?
Hi, i have a problem with "complete" implementation of this. Could You please post a link to complete
Michał
source code of GlassHelper and sample Window that is to make use of it ? Thanks in advance, Michal
Hi Christian. Worked almost as expected ;-)

Tschaena
Hi Christian, thanks for a great tutorial. It works beautifully but I'm curious, just how does this look on
Eon
XP? Also, I was wondering if you know a technique to also extend the ability to drag a window by
clicking on the title bar over the entire new glass region. Even though the glass looks seamless I am still
only able to drag a window by the region up at the top.
Hey--do this work on Win 3.1?

Bob
yes, this do work on 3.1. I am currently getting it to work on DOS

Jill
cxv
vcxv
Any possible eay to achive this with XP

Bill

Do this work with DOS 1.1

Bob 2
Oh.. Jill.. is doing it.. mad poor guy

Bob 2
thats stolen from another site... faggot

QWERT
Thanks. very nice paper

Simba
There are a couple of lines of code missing in your example to make it perfect.
Evans
First:
public const int WM_DWMCOMPOSITIONCHANGED = 0x031E;
needs to be declared in the GlassHelper class.
Secondly:
In order for the WndProc procedure to run in WPF the following lines should be added to the windows
load event since WPF windows don't have a hWnd
HwndSource source = HwndSource.FromHwnd(new WindowInteropHelper(this).Handle);
source.AddHook(new HwndSourceHook(WndProc));
Otherwise the example is a nice one.
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Jumplists
Home
Windows 7
Jumplists Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to add Tasks to Jumplists in .NET 4.0 and Windows 7
Custom Controls
Layout
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
Introduction
Multimedia
Windows 7 provides a new taskbar feature for applications called jumplists. They appear, when you right-click on a application icon in
Documents the taskbar. By default you see a list of recent files opened and two entries to launch and detach the application.
Windows 7 .NET 4.0 provides a managed API that allows you to easily manipulate the entries in the jumplist.
Interoperability
Performance How to add a Task to the Jumplist

Expression Blend A jumplist is nothing more than a categorizes list of links to files that can be launched by the user. The links are called JumpTasks.
Tools
They can be parametrized with a title, description, icon, filepath and command line arguments.
In the following sample I create a new JumpList and add a task to the list that launches the sample application, but with a
UI Automation
command line argument. If the application is launched with an argument, it shows a MessageBox instead.

public partial class App : Application
{
Jumplists.html[2/16/2014 3:15:10 PM]

{

if (e.Args.Count() > 0)
{
MessageBox.Show("You have the latest version.");
Shutdown();
}

JumpTask task = new JumpTask
{
Title = "Check for Updates",
Arguments = "/update",
Description = "Cheks for Software Updates",
CustomCategory = "Actions",
IconResourcePath = Assembly.GetEntryAssembly().CodeBase,
ApplicationPath = Assembly.GetEntryAssembly().CodeBase
};

JumpList jumpList = new JumpList();
jumpList.JumpItems.Add(task);
jumpList.ShowFrequentCategory = false;
jumpList.ShowRecentCategory = false;

JumpList.SetJumpList(Application.Current, jumpList);
}
}


Last modified: 2009-12-16 13:50:20

Show all comments
is there only work in WPF?
Andira
how about Form?
Muttakim
is there only work in WPF?
Andira
how about Form?
Muttakim
It does also work in Windows Forms under a .NET 4.x and Win7 environment.
Mario Fraiß

Any way you can implement this to standard run time?
Martin
e.g. Have a command on the list (Red) that changes the background color of the form to Red?
can jumplist support custom event like just calling a method inside the owner
K
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Top 11 WPF Performance Tips
Home
Performance
Top 11 WPF Performance Tips Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Top 11 WPF Performance Tips
Custom Controls
Windows Presentation Foundation provides a very confortable way to develop rich user experiences. A drop shadow for example can
Layout added by inserting two simple lines of XML. But this simplicity can also mislead us to overuse them. This leads to performance issues.
The following tipps may help you to avoid or fix them.
Input
Data Binding
1. Dispatch expensive calls either within the UI thread with a lower DispatcherPriority by calling
Styling Dispatcher.BeginInvoke() or to a background thread by using a BackgroundWorker to keep the UI responsive.
Localization 2. Fix binding errors because they consume a lot of time, trying to resolve the path error, including searching for attached
properties. You can find them by looking for System.Windows.Data Error in the Visual Studio output log.
Interaction
3. Reduce the number of visuals by removing unneeded elements, combining layout panels and simplifying templates. This
Resources keeps the memory footprint small and improves the rendering performance.
4. Prevent Software Rendering. The use of transparent windows by setting AllowsTransparency to true or using old
2D Graphics
BitmapEffects can cause WPF to render the UI in software on Windows XP, which is much slower.
3D Graphics 5. Load resources when needed. Even thow it's the most comfortable way to merge all resources on application level it can
also cost performance by loading all resources at startup. A better approach is to load only often used resources and load the
Animation
other on view level.
Multimedia 6. Virtualize lists and views by using a VirtualizingStackPanel as ItemsPanel for lists. This only creates the visible
elements at load time. All other elements are lazy created when they get visible. Be aware that grouping or
Documents
CanContextScrol="True" prevents virtualization!
Windows 7 7. Enable Container Recycling. Virtualization brings a lot of performance improvements, but the containers will be disposed
Interoperability and re created, this is the default. But you can gain more performance by recycle containers by setting
VirtualizingStackPanel.VirtualizationMode="Recycling"
Performance
8. Freeze Freezables by calling Freeze() in code or PresentationOptions:Freeze="true" in XAML. This reduces
Expression Blend memory consumption and improves performance, because the system don't need to monitor for changes.
9. Disable Assembly localization if you don't need it. By using the [NeutralResourcesLanguageAttribute]. This
Tools
prevents an expensive lookup for satelite assemblies
UI Automation 10. Lower the framerate of animations by setting Storyboard.DesiredFrameRate to lower the CPU load. The default is
60 frames/second
11. Use StreamGeometries instead of PathGeometries if possible to draw complex 2D geometries, because they are much
more efficient and consume less memory.
10PerformanceTips.html[2/16/2014 3:15:25 PM]

Other articles about WPF performance

Improve application startup performance (Jossef Goldberg)
WPF Performance Tools

There are two interesting tools to trace your WPF application and narrow down performance leaks:
Snoop to check the number of visuals.

WPF Performance Suite to trace events and rendering time

Last modified: 2011-03-02 17:32:34

Show all comments
haha, almost there.. 49 to go

Rafa
Good Tips, dont write anything and always fast:))
oyeeee
Come on I'm waiting for the other 49 dude!!!!!!!

Brad.A
I look also for other 49 :)

Alexej
After you couldn't find 50 performance tips, you switched to a Top 10.
Roman
And now you're showing us a Top 9 ??
It would be better if you completed articles before posting them.
Besides that, useful information. Thanks!
Hi Roman,
Christian Moser
sorry for that. I added the missing 10th :-)

Great article, keep up the good work, your blog is a very informative and useful.
Ben Dover
Thanks for the tips mate, they're useful for me. I'm just starting a migration from Winforms to WPF.
Alejandro Nagy
On a side note, is sad to see what jealousy does to people...why don't they try to make a great
resource page like this one...then we'll see if they find 50 tips to share.
Some of nice tips.Thanks
Radenko Zec
Moore's Law implies that we should be able to ignore these performance issues. Unfortunately, there's
Marv Luse
Marv's Law: the resource requirements of Windows doubles every 15 or 20 minutes. Thaaaat's
wwwhhhyyy duuuh-buuu-yoooo peeeee eeeeef iiiiiiiisssss sssssoooooooo ssssssslloooooowwwww.
What about WPFPerf Suite for .Net 4.0?

RaeNO
How much cash .. mind sharing..lol..J/K.. keep up the hunting for us. you should call this WPF HUB
Mysticool
It works in Silverlight
Denis
12. x:Name only the elements you need to use from code-behind or want to "Control2Control" bind.
Great post!
Elad Katz
Just one comment though - Freezable object are for thread safety and not as u said..
http://blogs.microsoft.co.il/blogs/eladkatz/archive/2010/11/18/freezable-objects-it-s-about-thread-
safety.aspx
Good Tutorial for beginners. Thanks a lot Christian...

Jeya
Nilesh Good Stuff, man!

Makwana
Which will be better ?...to write code in c# or xaml to get good peformance
Tinoy Malayil
hi

jai
Tip 5: What is the word Thow? Pretty sure this doesnt even exist in the americanized incorrect version
Darren Bruce
of the english language
small correction in 6:
Musab Ahmed
ScrollViewer.CanContentScroll="False" instead of CanContextScrol="True"
Ali
Tip 4: "setting AllowsTransparency to true can cause WPF to render the UI in software on
len
Windows XP, which is much slower." -- Is it still true for now? Is there any fix for it?
I don't know what these guys are talking about !

Bean
I don't know what these guys are talking about !

Bean
good
adee.
Great Stuff man..

Lakmal
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Addins
Home
Expression Blend
Addins Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Expression Blend 2 AddIns
Custom Controls
Layout
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents
Windows 7
Introduction
Interoperability Expression Blend has an add-in model that allows developers to write add-ins to extend its functionality. Unfortunately this is mainly
unknown to most users of blend. A prominent example is the intellisense addin for blend.
Performance
Expression Blend
Popular Addins
Tools
Unify - AddIn Manager for Expression Blend
UI Automation
PluginManager - Loads all addins from a directory
Colorful - Access color palettes from Adobe Kuler
Blendsense - Brings IntelliSense to Expression Blend
BlendAddins.html[2/16/2014 3:16:01 PM]

WPF Tutorial | Addins
How to Load and Run an AddIn

To load and run an addin into expression, just pass a command parameter -addin followed the name of the add-in dll. You don't
need any registration of plug-ins, but you can load only one addin on the same time. To get over this limitation you can use an add-
in manager that dynamically loads multiple plugins even without restarting the tool.
C:\Program Files\Microsoft Expression\Blend 2\Blend.exe /addin:NameOfTheAddin.dll

► Tutorial ► Blender ► Pro Engineer ► 3D Image

Last modified: 2009-10-13 12:22:50

Show all comments
Twain, stopping the transaction and extracting a confession, then leaving Twain bound in Pseudoderm. ,
Mr.Carrot67
This total includes 52 new measures. ,

SouthWind83
Therefore we agree with Dr. ,

Faggot97
Name
E-Mail (optional)
Comment
Post Comment
BlendAddins.html[2/16/2014 3:16:01 PM]

WPF Tutorial | How to Import Photoshop Files
Home
Expression Blend
How to Import Photoshop Files Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to Import Photoshop Files into WPF
Custom Controls
Layout
Introduction
Input
In a WPF project you often have to deal with assets that are created by a designer. They are often part of Adobe Illustrator or
Data Binding Photoshop files. There are two ways to achieve this goal. You can
Styling Directly Import Photoshop Files in Expression Blend

Localization
This is the most simple approach if you have Expression Blend 3. Drawbacks are, that you can only import vector shapes as
Path elements. If you want to add these shapes into the resources, you have to manually extract the geometries.
Interaction
Import Photoshop Files in Expression Design and Export to XAML
Resources
This approach requires Expression Design to be installed but works already with Version 2.0. The workflow is a bit more
complex, but you can choose if you want to export your shapes as Paths or Geometries.
2D Graphics
3D Graphics
Preparing the Photoshop File
Animation
If you create graphical assets that should be integrated to a WPF project you should think of the following rules to make the import
Multimedia
easier.
Documents
Combine multiple vector shapes to one shape
Windows 7 Don't use layer effects, because they are mostly ignored by the converter
Interoperability Set the color dept to 8Bit. Higher color depts cause errors on import
Performance
Expression Blend
Directly Import Photoshop Files in Expression Blend
Tools The following tutorial explains how to directly import an Adobe Photoshop file into WPF.
UI Automation 1. Start Expression Blend and open an empty WPF project
ImportFromPhotoshop.html[2/16/2014 3:16:16 PM]

2. Choose "Import Adobe Photoshop File..." from the "File" menu.
3. Select the file you want to import to Blend

4. Check or uncheck the layers you want to import and click [OK].
5. Blend imports the file now. Each layer will create a new Image or Path element. The images will automatically be added to
a separate folder in your project.

How to convert Path to Resources
To convert imported Path objects to Geometry objects that can be consumes as resources you have to do the following steps:
1. Copy the content of the "Data" attribute to the clipboard
2. Create a StreamGeometry object and paste the content between the opening and closing tag. Give the geometry a
unique key.
Import Photoshop Files in Expression Design and Export to XAML

The following tutorial explains how to import Adobe Photoshop Files in Expression Design and Export to XAML to use it in Expression
Blend.
1. Start Expression Blend and open the desired Photoshop File

2. Check or uncheck the layers you want to import and click [OK].
3. Open the Options Dialog in "Edit->Options->Clipboard(XAML)" and choose if you want to export shapes as Canvas or
Resource Dictionaries.

4. Select the objects you want to export and choose "Copy XAML" in the Edit menu.
5. Go back to Expression Blend andpPaste the XAML snippet from the clipboard.

► Tutorial ► Adobe Photoshop 6 ► Photoshop CS4 ► Photoshop Brushes

Last modified: 2009-09-15 21:30:08

Show all comments
Again, your tutorials are imbued with visuals making it extremely easy to read and understand. Excellent
Jeffrey
work!
Hi You are amazing keep your good work...

Pandiarajan
nice work
satish v
Christian
You really just copyed this haha?

Jake
hi mose, whether you copied it or not, that does not matter, but it is helping others or not, that matters,
anoop
and of course these are very helpful.
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Prototyping with SketchFlow
Home
Expression Blend
Prototyping with SketchFlow Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Prototyping with Expression Blend 3 + SketchFlow
Custom Controls
Layout
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents Introduction
Windows 7
Software is getting even more complex, interactive and dynamic. It's nearly impossible, for a developer to find the best solution at first
Interoperability time. If you start writing code without testing the concept, you can throw away a lot of valuable time by following a suboptimal
approach.
Performance
Expression Blend
The idea of SketchFlow
Tools
The idea of SketchFlow is to combine the simpleness and informality of sketching with paper and pencil with the dynamic of
UI Automation
interactive prototypes. Most prototyping tools focus on creating high quality assets, but the main purpose of most prototypes is to
proove the interaction design of your software and not to impress your management.
To address this point the Team of SketchFlow has created special styles for controls that look as if they where drawn by pencil. This
focus the discussion on real interaction problems instead of discussing about details like colors or fonts and suggests that the screen
SketchFlow.html[2/16/2014 3:16:29 PM]

design is still changeable with a small effort.
Workspace setup
Expression Blend 3 includes a workspace management feature that allows you to hide all panels you don't need to sketch your
prototype. You can save your settings by choosing "Save as new Workspace" from the "Windows" menu.
Create a new SketchFlow project

In Blend 3.0 you find two new project types to create prototypes for WPF or Silverlight.

Create and connect screens
Drop sketchy controls onto screens

In the asset library you will find a new category "SketchFlow". It contains a section called "Sketch Styles". It contains special styles for
most WPF or Silverlight controls that look like they are drawn by hand.

Extract common parts to component screens

If you have a part that is used on multiple screens, like a navigation or a login box, you can extract it to a component screen. This
screen can be referenced on multiple screens. If you modify the component screen, the changes are reflected to all screens.

Wire-up navigation
Add sample data

A prototype needs to provide sample data to make it understandable. In flash prototypes, sample data is often just a bunch of
textblocks and images. In SketchFlow we have a sample data generator, that creates real data sources that can be bound to lists and
elements as real data. Selection, scrolling and sorting all works.

In the Data panel you find a database icon. It allows you to create a new sample data source.
Give the sample data source a name and specify the scope of visibility. This can be only on this screen or within the whole prototype.
This can be useful, if you want to use the same demo data on multiple screens.
After creating the demo data source, you can define how a data record should look like. You can add properties or most popular
types and choose from a variety of sample data types. There are URL's, e-mail adresses, bild text (lorem ipsum), images, and much
mure...

Add assets from Photoshop, Illustrator or PowerPoint

Test prototype and get feedback


Generate prototype documentation

When you have finished your prototype, you can generate a design documentation by a single click. It includes the a table of content,
the flow map and screenshots of all screens and components. It's not meant to use it as a complete documentation, but it's a good
start to build on.

► Tutorial ► Photoshop Brushes ► Tablet Drawing ► Photoshop Vector

Last modified: 2009-11-05 22:54:08

Show all comments
Excellent work...
Mukesh
That's an impressive way to get out something for customers, i am always influenced by the RAD
Atul Raina
tools.Awesome introduction, that is a building block for my quest to explore WPF
and now in german ...

321213
atul very good work , i like the way of guiding.

kumar...

Okay, you've convinced me to use SketchFlow to debug my WPF app interaction/behavior first, then
Jason
beautify it. Seems really easy, and fast, and it can still look sophisticate by leveraging Photoshop files!
Thanks for a great site, it's very useful!
Okay, you've convinced me to use SketchFlow to debug my WPF app interaction/behavior first, then
jasonb
beautify it. Seems really easy, and fast, and it can still look sophisticate by leveraging Photoshop files!
Thanks for a great site, it's very useful!
Nice approach to explain sketchflow with wpf

Anindita
Another good one - this may sway me from Balsamiq Mockups!

Battered...
Thank you - this was very helpful in getting me started. Clear, concise and just enough info to point me in
Shazzas
the right direction.
Orale Carlitos! Me parece una buena introduccion a esto. Me parece que es una buena manera de darle
El Gran...
un pepinillo al cliente.
Very nice post! I'm loving WPF more and more because of you! Thank you very much!
Genesis
Great post - got me started with SketchFlow in no time at all.
SilverBlend
What is the difference between the applications created by WPF and WPF Sketchflow?? I know sketchflow
sanchayita
is used to match the hand made prototype.. But what I wanted to know is, except that, we can create
everything in WPF sketch application which we can in WPF application?? Please clarify if I am wrong..
Please give your views on the applications created by WPF and WPF Sketchflow and what are the
differences.. Thanks..
Name
E-Mail (optional)
Comment
Post Comment


WPF Tutorial | XAML Converters
Home
Tools
XAML Converters Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
XAML Converters
Custom Controls
The following list shows converters developed by the WPF community to convert different formats to XAML or vice versa.
Layout
Adobe Illustrator XAML Export Plugin
Input
Adobe Photoshop to XAML Converter
Data Binding Blender XAML Export Plugin
Lightwave XAML Export Plugin
Styling
Visio XAML Export
Localization 3D Studio Max to XAML Converter
Maya to XAML Converter
Interaction
Flash to XAML Converter
Resources SVG to XAML Converter
2D Graphics WMF/EMF to XAML Converter
3D Graphics
Animation
Multimedia

Documents Last modified: 2009-02-28 22:19:15

Windows 7
Interoperability
Performance Comments on this article
Expression Blend Show all comments
Tools
UI Automation Photoshop link is no longer valid. Would be great if anyone knew of one to post it.
Austin
Hi Austin,
XAMLConverters.html[2/16/2014 3:17:06 PM]

Christian
you can use Expression Blend 3 to convert Photoshop Files into XAML. You can download a 60 days
Moser
trial version from here: www.microsoft.com/expression
There is a tool that converts Adobe Flash/SWF files to Silverlight/XAML - SilverX (http://www.silverx.net).
Roman
Maybe this link can be useful too..
i want to convert my wpf application to asp.net.
shuchita
kindly help me.
saxena
Shuchita,
Mike Strobel
WPF and ASP.NET are fundamentally different platforms. One runs on the client, one runs on the
server. One is stateful, the other is stateless. I would definitely not recommend trying to "port" a WPF
application to ASP.NET. The opportunities for code reuse at the UX level are virtually nonexistent. If
you do not require the application to run on a server, but merely in a browser, you may want to
consider porting the application to Silverlight instead. The conversion may still be a long process, but it
would be somewhat less painful, and probably easier than rewriting the application from scratch for
ASP.NET.
Cheers,
Mike
Please post a link to a XAML to SVG converter.

Julian
I am writing a document in MS Word 2007 and using Expression Blend and Design to do the graphics.
Robert Smith
Is there a "XAML to WordML" converter available? Or do you have any other suggestions?
Thanks,
R. Smith
Columbia, MD.
Hi, Good Information

Jayesh...
Hi,
Sethu
i have a help document of my software in word2007 which contains tables, images , words and some
symbols included. Now need a convertor to convert to xbap application help me to find it.
Thanx,
Sethu
Mumbai

I wrote the Google Sketchup Xaml Exporter - an addin for Google Sketchup (Rubi script, actually) that
Itai Bar-Haim
exports scenes to Xaml. http://itaibh.blogspot.com/2009/12/xaml-exporter-for-sketchup-round-2.html
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Graphical Designers
Home
Tools
Graphical Designers Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Graphical WPF Designers
Custom Controls
Mobiform Aurora XAML Designer
Layout
ZAM 3D (3D XAML Tool by Electric Rain)
Input
Data Binding
► Tutorial ► App UI Design ► User Interface ► Interface Design
Styling

Localization
Last modified: 2010-06-03 11:11:19
Resources
2D Graphics
3D Graphics
Show all comments
Animation
Multimedia
Nice, but try to include the more porpular ms products eg. Expression Blend etc.
Documents Abdulmajeed
Windows 7 Commented on 20.August 2009
Interoperability The link to Mobiform Aurora does not work.

Bjoneskc
Performance
Expression Blend
Below is the latest link:
Tools Bjoneskc
http://www.dotnetuidevelopment.com/aurora.htm
UI Automation
Cool, We Need Some Templates and Themes...

Leon Ramesh
GraphicalDesigners.html[2/16/2014 3:17:27 PM]

WPF Tutorial | Graphical Designers
Name
E-Mail (optional)
Comment
Post Comment
GraphicalDesigners.html[2/16/2014 3:17:27 PM]

WPF Tutorial | Utilities
Home
Tools
Utilities Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Debugging and Development Utilities
Custom Controls
WPF Inspector - visual debugging for WPF
Layout
XAML Power Toys
Input Mole for Visual Studio
Snoop - A collection of visual debugging helpers
Data Binding
StyleSnooper - View styles of controls
Styling Show me the template
ProtoXAML - A stencil UI skin for WPF paper prototypes
Localization
Crack.NET - A runtime debugging and scripting tool to access internals of .NET applications
Interaction Pistachio - Resource Visualizer
XAML Type explorer
Resources
2D Graphics
3D Graphics

Animation
Multimedia Last modified: 2010-06-29 22:21:44

Documents
Windows 7

Interoperability
Performance Show all comments
Expression Blend Commented on 2.May 2010
Tools excellent tutorial to start and learn thanks

nilesh
UI Automation
Any Theaming Tool...????

Bob
DnDUtilities.html[2/16/2014 3:18:10 PM]

WPF Tutorial | Utilities
Hari Very nice article. And cute web theam

Haran
Is there any Free Online Book .for Web Application through WPF.
Kuldeep
Name
E-Mail (optional)
Comment
Post Comment
DnDUtilities.html[2/16/2014 3:18:10 PM]

WPF Tutorial | XAML Editors
Home
Tools
XAML Editors Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
XAML Editors
Custom Controls
XAML Editor (by Lary Bell)
Layout
XAML PadX (extended)
Input XAML Hack
KaXaml
Data Binding
Styling
Localization ► Tutorial ► Photoshop CS4 ► Photoshop Action ► Adobe Photoshop

Interaction
Resources Last modified: 2010-07-15 15:45:08

2D Graphics
3D Graphics
Animation
Multimedia Show all comments
Documents Commented on 8.March 2010
Windows 7 wat is xaml???i gota google it i guess!!!

fahad
Interoperability
Performance
@fahad Take a look under Fundamentals > XAML on this website. ^^
Ben
Expression Blend
Tools Commented on 21.November 2010
UI Automation
Rakesh Dora , plz maintain sanctity of the forum and behave urself.
Ramesh
hello, i work as a Business Analyst, but i have the task to prototype using an external IDE by Mobiform's
mumshad
XAMLEditors.html[2/16/2014 3:18:24 PM]

WPF Tutorial | XAML Editors
aurora in xaml, am looking on how navigation can be implemented using only xaml. Such a good resource
and i will study WPF too
Thanks In Advance
hello, i work as a Business Analyst, but i have the task to prototype using an external IDE by Mobiform's
mumshad
aurora in xaml, am looking on how navigation can be implemented using only xaml. Such a good resource
and i will study WPF too
Thanks In Advance
Name
E-Mail (optional)
Comment
Post Comment
XAMLEditors.html[2/16/2014 3:18:24 PM]

Home
Styling
Control Templates Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Control Templates
Custom Controls
Layout
Introduction
Input
Controls in WPF are separated into logic, that defines the states, events and properties and template, that defines the visual
Data Binding appearance of the control. The wireup between the logic and the template is done by DataBinding.
Styling Each control has a default template. This gives the control a basic appearance. The default template is typically shipped together with
the control and available for all common windows themes. It is by convention wrapped into a style, that is identified by value of the
Localization
DefaultStyleKey property that every control has.
Interaction
The template is defined by a dependency property called Template. By setting this property to another instance of a control
Resources template, you can completely replace the appearance (visual tree) of a control.
2D Graphics
3D Graphics
Animation
Multimedia
Documents
Windows 7
Interoperability
Performance
Expression Blend
Tools
UI Automation
The control template is often included in a style that contains other property settings. The following code sample shows a simple
control template for a button with an ellipse shape.
templates-2.html[2/16/2014 3:18:59 PM]


<Style x:Key="DialogButtonStyle" TargetType="Button">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="{TemplateBinding Background}"
Stroke="{TemplateBinding BorderBrush}"/>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<Button Style="{StaticResource DialogButtonStyle}" />

A Button without and with a custom control template
ContentPresenter
When you create a custom control template and you want to define a placeholder that renders the content, you can use the
ContentPresenter. By default it adds the content of the Content property to the visual tree of the template. To display the
content of another property you can set the ContentSource to the name of the property you like.
Triggers
{RelativeSource TemplatedParent} not working in DataTriggers of a ControlTemplate
If you want to bind to a property of a property on your control like Data.IsLoaded you cannot use a normal Trigger, since it does
not support this notation, you have to use a DataTrigger.
But when you are using a DataTrigger, with {RelativeSource TemplatedParent} it will not work. The reason is, that
TemplatedParent can only be used within the ControlTemplate. It is not working in the Trigger section. You have to use the
{RelativeSource Self} instead.

What if a Binding working or a Setter is not applied when using a control template
There is something you need to know when setting a value of an element within a control template: The value does have a lower
precendence as the local value! So if you are setting the local value in the constructor of the contained element, you cannot override
it within the controltemplate. But if you use the element directly in your view, it will work. So be aware of this behavior!.

Here you can find more information about DependencyProperty value precendence: Dependency Property Value Precedence

Last modified: 2010-04-27 16:48:31

Show all comments
you people I really not getting why you are congrat this guy ! This site is uglying explaning WPF ! just
ouais
good to run away and find real explanation from programmer !
seems really interesting thanks for your efforts to make this material available for us
i
Nice one
Arjun
Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}"
Asha.MP
in the above properties we can specify the colors also, what is the meaning of TemplateBinding in the
above property??
nice...
siva
Great Article , thanks for your efforts :)

Praveen
very nice.
bala
good one

sri
if u dont mind , can u thrown some light on visualstatemanager as well.. ?

prassanth
Many many thanks for this article...

Ankit
Gurpreet Great explaination ! thanks

Singh
Thanks buddy good articles
Tejas
Janynne Great explanation and i liked the figure, so clear!

Gomes
These comments are laughably fake.

anon
Thanks, Nice explanation

Paras
Great. And where do i have to write the style-tag down, now?

Anon
So Clear very nicely explained

Mayank
please show, how to focus and enable the elliptic button

jones
So Clear nice
bm
Thank you! This tutorial is awesome!

Dmitry
I want to create Template for TextBox. How can I aceess RelativeSource TEXT property.
Alibaba

@Alibaba: If I am understanding you correctly, you would not use RelativeSource to bind to the text
stigma
property. You would use "{TemplateBinding Text}". For example:
<TextBlock Text="{TemplateBinding Text}"/>
Using a TextBox inside a TextBox ControlTemplate, however, I have found to be very unhelpful. Try
using: <ScrollViewer x:Name="PART_ContentHost"/> If you name the ScrollViewer
exactly as I have here, the text will be bound to it. No other work required.
Life Saver :)
Ziad
Machi awesome article...Thanks !!!

johnson
Viva linux!!
Gonzalo
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Apply a DataTemplate
Home
Controls
ListBox
Apply a DataTemplate Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to apply a DataTemplate to a ListBox
Custom Controls
Layout
Introducing DataTemplates
Input
All controls deriving from ItemsControl have a DataTemplate that specifies how an object bound to an item is presented to the
Data Binding user. The default template renders a single line of text per item - as we know a listbox from HTML or WinForms.
Styling But WPF allows us to put whatever we like into a DataTemplate. If we want to display a list of customers we can provide a data
template that shows an image for each customer next to its name and age. In my opinion this is one of the most powerful features in
Localization
WPF.
Interaction

Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents
Windows 7
Interoperability
Performance
Expression Blend
Tools
In the following steps I will show you how to create such an DataTemplate
UI Automation
Bind the data to the ListBox

We bind a list of employees to the listbox. Because the listbox does not know anything about our employee class, it calls the
ListBoxDataTemplate.html[2/16/2014 3:19:14 PM]

ToString() method. The result is not yet very pleasing.

<ListBox Margin="10" ItemsSource="{Binding}"/>
</Grid>

Override the ToString() method to improve the display

What we do next is to overriding the ToString() method to provide some useful information instead of just the type name. But a string
is not really what we call a cool user experience.

public override string ToString()
{
return string.Format("{0} {1} ({2}), {3})",
Firstname, Lastname, Age, Role);
}

Create a DataTemplate
The ultimate flexibility is to create your own DataTemplate. A data template can consist of multiple controls like images, textblocks,
etc. It han have a flexible width and height, background color and shape. There are no limits for your creativity.
An easy way to create a data template is to use Expression Blend. Open the context menu of your list box and choose "Edit Other
Templates" -> "Edit Generated Items" -> "Create Empty".

Blend will ask you to specify a name for your DataTemplate because it will define it in the resources of either the Application, the
current document of an external resource dictionary. The name you specify is the key for the resource dictionary.
After you press OK, you will be in the editor to design the data template. The item data (in our sample an employee) is set to the
DataContext, so you can easily access all properties of the employee by using databinding.

<DataTemplate x:Key="EmployeeDataTemplate">
<Grid>

<ColumnDefinition Width="60"/>
<Border Margin="5" BorderBrush="Black" BorderThickness="1">
<Image Source="{Binding Path=Image}" Stretch="Fill" Width="50" Height="50" />
</Border>
<StackPanel Grid.Column="1" Margin="5">
<StackPanel Orientation="Horizontal" TextBlock.FontWeight="Bold" >
<TextBlock Text="{Binding Path=Firstname, FallbackValue=FirstName}" />
<TextBlock Text="{Binding Path=Lastname, FallbackValue=LastName}"
Padding="3,0,0,0"/>
</StackPanel>
<TextBlock Text="{Binding Path=Age, FallbackValue=Age}" />
<TextBlock Text="{Binding Path=Role, FallbackValue=Role}" />
</StackPanel>
</Grid>
</DataTemplate>

► Tutorial ► Learn Quick Books ► Data Networking ► Coding Learning

Last modified: 2008-10-24 01:06:02

Show all comments
I had some problem trying to get this one to work.

bax
I suspect people are having problems with this example because there's no data to bind to... Maybe
ThomC
a code snippet that populates a collection when the form loads. This would also reinforce data
binding concepts and implementation.
useless.
Avishek
This is funny. I've spent several days searching how to bind data to a listbox. Of all the brilliant
Frank
authors on the web, not one has the same solution and none make sense.
I saw all of these examples in MSDN before,but the good things is that if it's the first time you want to
Mahmood
learn that concept ,it will be more easier to start from here.

\"We bind a list of employees to the listbox\"... WHERE?

Bob
I have understood DataTemplate, but how it is used as itemSource of ListBox?
Yogesh
Also how it is binded to Employee objects?
How do you bind the data with the listbox itself? I tried
macias
ItemsSource={Binding Path=Employees}
assuming there is such property as Employees but it does not work (for me at least).
A good example to create a data template for a beginner. But how to set the template to the listbox.
Mukil
'An easy way to create a data template is to use Expression Blend. Open the context menu of your
W
list box and choose "Edit Other Templates" -> "Edit Generated Items" -> "Create Empty".'
!!!Can't find the menuitem of Edit Other Templates!!!
W. Are you right clicking? The example isn't to teach you how to bind data. He has other examples
Andy
for that. What is left out of the example is telling your itemscontrol to use your DataTemplate. You
can bind by setting the ItemSource of the ItemsControl.
I generally bind in the code... if x:Name="MyControl" then in the code MyControl.ItemsSource where
ItemsSource is an Observable collection of the object you want to use.
Very nice example!! Keep it up!

BoboSurabaya
I couldnt get it to work until my class in the Observable collection had public access properties (inside
Ken
of directly accessing "public string Name" for example). When I did that it worked. Hope this helps.
Its a awsome and helpful tutorial Thanks for helping

nomy
would there be any sample for same..? though it looks like gud sample but may be difficult for a
crazycopboy
beginner..
How would you bind the data template to XML in C#?

WPFed

How would you bind the data template to XML in C#?

WPFed
sirs, this is what i wants. can you please send all the code to me please
IndianBoy
it's good and so helpfull thx

umut
Sir,would you please paste the complete version of source code here instead of some code snippet. I
Justin
think that would be more helpful. Thanks!
yep. paste the complete Source Code! Please!

WPFNoob
And how to apply a DataTemplate to a ListBox? - like you promised in the Headline. Would be nice if
Beginner
you could paste the complete Source Code :)
Thanks for the stuff and great explanation.

Ishkhan
very good
babu
Very Nice Explanation.

NagarjunaReddy
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Strech an Item
Home
Controls
ListBox
Strech an Item Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to strech an WPF ListBox Item to span the whole width
Custom Controls
If you create a data template with a right-aligned element (like the age in our exmple), it only spans over the needed width, because
Layout the content of a listbox is left-aligned by default.
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics
This is the DataTemplate I created for this example.
Animation

Multimedia <Style TargetType="ListBox" x:Key="strechedItemStyle">
<Setter Property="ItemTemplate">
Documents
<Setter.Value>
Windows 7 <DataTemplate>
<Grid Background="#330000FF">
Interoperability <Grid.ColumnDefinitions>
Performance
Expression Blend </Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" HorizontalAlignment="Left"
Tools
Grid.Column="0"/>
UI Automation <TextBlock Text="{Binding Age}" HorizontalAlignment="Right"
Grid.Column="1"/>
</Grid>
</DataTemplate>
</Setter.Value>
StrechListBoxItem.html[2/16/2014 3:19:51 PM]

</Setter>
</Style>

To make the listbox item span the whole width of the listbox you need to set the HorizontalContentAlignment property to
Stretch.
This is the way to set it directly on the listbox element:

<ListBox x:Name="listBox" Margin="20"
Style="{StaticResource strechedItemStyle}"
HorizontalContentAlignment="Stretch" />

If you want to set this property within a style you can do it with the following lines of code

<Style TargetType="ListBox" x:Key="strechedItemStyle">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>


Last modified: 2009-11-17 13:24:58

Show all comments
I understand the concept of styles with this, but I didnt understand how you made the number to come to
Se122
the left, and the text to stay on left.
Hi,
Patrick
How can i apply animation for a selected listitem? Such as the zone out the selected itme.

Se122,
Garry
He was able to accomplish that by setting up a grid in the datatemplate with 2 columns. 1 Column for the
text aligned to the left and one column for the numbers aligned to the right.
<Grid Background="#330000FF">
<TextBlock Text="{Binding Name}" HorizontalAlignment="Left" Grid.Column="0"/>
<TextBlock Text="{Binding Age}" HorizontalAlignment="Right" Grid.Column="1"/>
</Grid>
Hi I followed the example on this page to get right aligned in a text box, but having troubles
someone
Note, I'm printing it as a FlowDocument
It's right aligned in Blend
It's right aligned when I print preview
It's right aligned when I print to XPS
It's LEFT aligned when I print to printer
I also see if I do a .show() first, then print, it prints right aligned. But it's left aligned if I print directly
Any ideas?
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Selected Item Background
Home
Controls
ListBox
Selected Item Background Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Change the Background of a selected ListBox Item
Custom Controls
If you select an item in a listbox it gets the default selection color (usually blue) as background. Even if you specify a custom data
Layout template.
The reason is that the blue background (or gray if the control is not focussed) is drawn outside of the data template. So you
have no chance to override it from within the data template.
Input
Data Binding
Styling
Localization
Interaction
Resources
2D Graphics
The color used to draw the blue and gray background are system colors. So the easiest way to get rid of these backgrounds is to
3D Graphics
locally override the highlight and control brushes of the system colors.
Animation
The best way to do this is to create a style for the listbox. Place the style in the resources of a parent element. For e.g.
Multimedia Window.Resources
Documents
Windows 7
Interoperability
Performance
Expression Blend
Tools
UI Automation

<Style x:Key="myListboxStyle">
<Style.Resources>
ListBoxSelectionBackground.html[2/16/2014 3:20:06 PM]


<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red"
/>

<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Green"
/>
</Style.Resources>
</Style>

The following XAML snippet shows how to apply the style to the listbox.

<ListBox Style="{StaticResource myListboxStyle}" />
</Grid>

► Tutorial ► Photoshop CS4 ► Photoshop Brushes ► Photoshop Editing

Last modified: 2008-10-24 01:37:10

Show all comments
On registering a mobile casino account you'd better have a computer at hand in addition to your
DSCN2258
phone but it is not obligatory in some cases.;
NICE! pure zammel!

Berti
Great solution. This is exactly waht i was lookin 4

LearnerOfXAML
Hey thanks a lot!! Its d perfect solution....

Shrads
Thanks a lot! I spent 1+ days trying to solve this, thought it was hidden style overriding my setting,
Larry
never thought of system colors!
Indeed neat. Thank you.
kpatil
To add more, If you want to change the TextColor use

HighlightTextBrushKey
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
Thanks a lot for your great stuff! I like this solution, too:
iris
http://wildermuth.com/2007/04/17/Changing_the_Selected_Style_of_ListBox_s_in_XAML
That is a neat solution! avoid re-templating overkill is awesome...

Hj
Is not an 'Elegant' solution because it replaces a system color key, so that change will be applied to all
Homer
controls that use this key...
@Homer:
Neztnerol
No, it only replaces the system color key for the control that uses the style template "myListboxStyle"
So it only applies to the control that adds the property:
Style="{StaticResource myListboxStyle}"
nice Explanation...in kannada to say "Tumba Chenagide":-)

das
I,
Gally
I'm looking for an other solution on windows phone 7 with Silverlight because <Style.Resources>
doesn't exist.
Have you any idea ?
Hello tutorial Admin...

Haribabu
You have written tutorial well but y can't you extend topic some more briefly... For example in mouse
input why can't you explain mouse events at least few
Just what I was looking for and so neatly done. Thanks Christian
Karin
Thanks. I love you :)

bizon
GRANDE!!!!
Alfredo...
Exactly what I was looking for! New to WPF and your site is the main site when I need to out figure
Mustafa

out something with WPF
thanks. very helpful :)

avmfree
Thanks for the solution. It works great in this form, but I would like to use a custom color (instead the
smafuboj
wpf's built-in colors).
I tried this, but it doesn't work:
...

<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" >
<SolidColorBrush.Color R="0" G="154" B="213" />
</SolidColorBrush>
...
Is there any way to solve my problem? Thanks for help!
Simple and nice solutions!
Armando
Rocha
Thanks
Aditya Kiran...
Hey Thanks alot.. your site is damn good. it is very helpful.
I'm trying top apply the same thing on a ListView but it doesn't work.
Frank
I've heard it could be due to the fact that this isn't supported on Windows 7. Any truth to this ? Is
there another way to accomplish this ?
Thanks for your solutions :)

DoNguyen
Thank for your help. thanks

Hamidreza...
I was tryin to diasble selection of node in treeview.. tis helped me to achieve it by givin d highlight
HK
colour brush same as d background colour of my window.. thanks alot..
Name
E-Mail (optional)
Comment

Post Comment

WPF Tutorial | Layout of Items
Home
Controls
ListBox
Layout of Items Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Change the arrangement of items in a listbox
Custom Controls
All WPF controls deriving from ItemsControl provide an ItemsPanel property that allows you to replace the internal layout
Layout panel that arranges the items.
Input
Data Binding Horizontal

Styling
We override the ItemsPanel property and set it to a StackPanel layout manager with an orientation set to Horizontal. We
Localization use an VirtualizingStackPanel that works just like a normal StackPanel, except that is does only create the items that are
visible. If you scroll it automatically creates the new items that become visible and recycles the hidden.
Interaction
Resources
2D Graphics
3D Graphics

Animation
<ListBox>
Multimedia <ListBox.ItemsPanel>
<ItemsPanelTemplate>
Documents
<VirtualizingStackPanel Orientation="Horizontal" />
Windows 7 </ItemsPanelTemplate>
</ListBox.ItemsPanel>
Interoperability </ListBox>

Performance

Expression Blend
Wrapped
Tools
Using a WrapPanel to layout the items row by row is a bit more complex. Since the layout panel is wrapped by a
UI Automation
ScrollContentPresenter (as seen by the scrolbar of the exmple above) the available width is infinite. So the WrapPanel does
not see a reason to wrap to a new line.
What we need to do is to set the width of the warp panel to the ActualWidth if the internal ScrollContentPresenter. The
ScrollContentPresenter can be found by using the FindAncestor mode of the relative source extension.
ListBoxItemsArrange.html[2/16/2014 3:20:41 PM]


<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>


Last modified: 2009-10-07 14:32:12

Show all comments
very simple to study by using this tips

eldose
good
janu
Very good, very very good!

hero
Dear Christian,
Adnan
I've tried this and it is working fine, but the time whenever i use any theme its not working (all items in listbox
appearing in vertical order), and when i remove the theme reference it is working fine.
I am using
<Application x:Class="Application"
StartupUri="Login.xaml">

<Application.Resources>
<ResourceDictionary Source="Themes/ExpressionLight.xaml" />
</Application.Resources>
</Application>
in 10 years of computing I have never commented on a technical article that I've read. This is the first, and it's
dave
only because it's genius. Thanks for being concise, and getting this way overcomplicated thing to work.
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Remove the Icon
Home
Controls
Window
Remove the Icon Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
How to remove the icon of a WPF window
Custom Controls
Layout
Input
Data Binding
Styling
Localization
Interaction
Resources Unfortumately WPF does not provide any function to remove the icon of a window. One solution could be setting the icon to a
transparent icon. But this way the extra space between the window border and title remains.
2D Graphics
The better approach is to use a function provided by the Win32 API to remove the icon.
3D Graphics

Animation public partial class Window1 : Window
{
Multimedia
public Window1()
Documents {
Windows 7 }

Interoperability
protected override void OnSourceInitialized(EventArgs e)
Performance {
IconHelper.RemoveIcon(this);
Expression Blend
}
Tools }

UI Automation

public static class IconHelper
{
[DllImport("user32.dll")]
RemoveIcon.html[2/16/2014 3:20:53 PM]

static extern int GetWindowLong(IntPtr hwnd, int index);

static extern int SetWindowLong(IntPtr hwnd, int index, int newStyle);

static extern bool SetWindowPos(IntPtr hwnd, IntPtr hwndInsertAfter,
int x, int y, int width, int height, uint flags);

static extern IntPtr SendMessage(IntPtr hwnd, uint msg,
IntPtr wParam, IntPtr lParam);

const int GWL_EXSTYLE = -20;
const int WS_EX_DLGMODALFRAME = 0x0001;
const int SWP_NOSIZE = 0x0001;
const int SWP_NOMOVE = 0x0002;
const int SWP_NOZORDER = 0x0004;
const int SWP_FRAMECHANGED = 0x0020;
const uint WM_SETICON = 0x0080;

public static void RemoveIcon(Window window)
{
// Get this window's handle
IntPtr hwnd = new WindowInteropHelper(window).Handle;

// Change the extended window style to not show a window icon
int extendedStyle = GetWindowLong(hwnd, GWL_EXSTYLE);
SetWindowLong(hwnd, GWL_EXSTYLE, extendedStyle | WS_EX_DLGMODALFRAME);

// Update the window's non-client area to reflect the changes
SetWindowPos(hwnd, IntPtr.Zero, 0, 0, 0, 0, SWP_NOMOVE |
SWP_NOSIZE | SWP_NOZORDER | SWP_FRAMECHANGED);
}

}

► Tutorial ► Photoshop CS4 ► Photoshop Action ► Photoshop Vector

Last modified: 0000-00-00 00:00:00

Show all comments
This was a good article. I hat going into the Win32 stuff so having a class like this means I can add to
Ketan
any future projects that require this functionality.
Thanks

Does it work in Windows versions less then Vista (XP, Server 2003)?
konstantin
I was trying to do this on XP Professional and it did not appear to work. Maybe I am missing something
Steve
(I do that on occasion).
I still get the default windows icon on my window but no longer get the context menu (that shows
Restore, Move, Size, Minimize, etc). I basically copied the code from here and used it in my application.
Nothing was changed and I double checked that I did not get a copy/paste error.
does not work in Xp.

Alex
SendMessage(hwnd, WM_SETICON, IntPtr.Zero, IntPtr.Zero) can remove the Icon from XP

Kevinclcn
itz awesome....but one problem i am facing is ,when i run the exe of project the default icon comes at
shradz
that place...can u help me for this
itz awesome....but one problem i am facing is ,when i run the exe of project the default icon comes at
shradz
that place...can u help me for this
Thank you for this great trick!
RomanK
Do you by chance also know how to remove the window title?
Excellent approach, exactly what i was looking for!

Caian
Another way to do it:
SomeOne
<Window x:Class="Transparent.Window1"
Icon="transparent.png"
Title="Window1" SizeToContent="WidthAndHeight">
The SendMessage solution does not remove the icon in VisualStudio 2010 in XP.
Gorkster

The "transparent.png" approach does not remove the space reserved for the icon even thought there is
Gorkster
no icon showing.
a trick of lazy:
Max
WindowStyle="ToolWindow"
SetWindowLong by itself doesn't work on Vista x64 (VS2010) on remote desktop.
midspace
Requires both SetWindowLong and SendMessage.
re: WindowStyle="ToolWindow"
Jesse
Yes, that will remove the icon, but it also changes the style of the buttons in the caption bar.
Chisholm
Name
E-Mail (optional)
Comment
Post Comment

WPF Tutorial | Localization using Satelite Assemblies
Home
Localization
Localization using Satelite Assemblies Share... Feed About Christian Moser

Home
WPF Inspector
Getting started
Fundamentals
User Experience
Patterns
Controls
Localization using Satelite Assemblies
Custom Controls
MSDN Documentation about Localization
Layout
► Tutorial ► Pro Engineer ► Pro E CAD ► Sketch Pro
Input

Data Binding
Last modified: 2010-02-25 07:57:28
Styling
Localization
Interaction
Resources
2D Graphics
3D Graphics
Animation
Multimedia
Documents
Windows 7
Interoperability
Performance
Expression Blend
Tools
UI Automation
LocalizationUsingSateliteAssemblies.html[2/16/2014 3:21:08 PM]

Index of Locally Available Projects:: WPF Tutorials 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Index of Locally Available Projects:: WPF Tutorials 2

Uploaded by

Copyright:

Available Formats

List of available projects - HTTrack Website Copier

HTTrack Website Copier - Open Source offline browser

Index of locally available projects:

Mirror and index made by HTTrack Website Copier [XR&CO'2008]

index.html[2/16/2014 2:22:30 PM]

Home Share... Feed About Christian Moser

WPF Inspector Welcome to the WPF Tutorial Tip of the Day

Custom Controls Popular Articles

To learn more visit: www.xamlinspector.com Grid Panel

index.html[2/16/2014 2:23:07 PM]

Copyright (c) by Christian Moser, 2011.

index.html[2/16/2014 2:23:07 PM]

Home Share... Feed About Christian Moser

WPF Inspector Welcome to the WPF Tutorial Tip of the Day

Performance WPF Inspector

Expression Blend List of 3rd-Party Controls

Tools Query Screen Resolutions

To learn more visit: www.xamlinspector.com Undo/Redo

Home.html[2/16/2014 2:23:26 PM]

Copyright (c) by Christian Moser, 2011.

Home.html[2/16/2014 2:23:26 PM]

rss.html[2/16/2014 2:23:27 PM]

rss.html[2/16/2014 2:23:27 PM]

#0000ff;">&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;</span><span style="color: #800000;">&gt;

rss.html[2/16/2014 2:23:27 PM]

href="http://www.codeproject.com/KB/WPF/WPF_3D_Bar_chart_control.aspx">Free 3D Chart</a></li> <li><a

rss.html[2/16/2014 2:23:27 PM]

href="http://www.infragistics.com/dotnet/netadvantage/wpf/xamTabControl.aspx#Overview ">Infragistics Tab

rss.html[2/16/2014 2:23:27 PM]

rss.html[2/16/2014 2:23:27 PM]

rss.html[2/16/2014 2:23:27 PM]

<span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #2b91af; font-weight:

rss.html[2/16/2014 2:23:27 PM]

font-weight: bold;">return</span> closure.<span style="color: #0000FF;">Monitors</span>.<span style="color:

rss.html[2/16/2014 2:23:27 PM]

src="images/book_wpfunleashed.jpg" style="width: 150px;"></td>

rss.html[2/16/2014 2:23:27 PM]

rss.html[2/16/2014 2:23:27 PM]

style="color: #0600FF; font-weight: bold;">default</span><span style="color: #000000;">&#40;</span>T<span

rss.html[2/16/2014 2:23:27 PM]

weight: bold;">return</span> _originalValue.<span style="color: #0000FF;">Equals</span><span style="color:

rss.html[2/16/2014 2:23:27 PM]

<span style="color: #000000;">&#40;</span>_originalList<span style="color: #000000;">&#91;</span>index<span

rss.html[2/16/2014 2:23:27 PM]

style="color: #0000ff; font-weight: bold;">new</span></a> EventArgs<span style="color: #008000;">&lt;

rss.html[2/16/2014 2:23:27 PM]

#0000FF;">Count</span>; <span style="color: #000000;">&#125;</span>

rss.html[2/16/2014 2:23:27 PM]

rss.html[2/16/2014 2:23:27 PM]

style="color: #800000;">&lt;Grid<span style="color: #800000;">&gt;</span></span></span> <span style="color:

rss.html[2/16/2014 2:23:27 PM]

#ff0000;">Content</span>=<span style="color: #0000ff;">&quot;E-Mail:&quot;</span><span style="color:

rss.html[2/16/2014 2:23:27 PM]

<span style="color: #ff0000;">Content</span>=<span style="color: #0000ff;">&quot;Right&quot;</span> Grid.<span

rss.html[2/16/2014 2:23:27 PM]

rss.html[2/16/2014 2:23:27 PM]

rss.html[2/16/2014 2:23:27 PM]

#800000;">&lt;RichTextBox</span>.ContextMenu<span style="color: #800000;">&gt;</span></span>

rss.html[2/16/2014 2:23:27 PM]

#800000;"><span style="color: #800000;">&lt;/Grid</span>.ContextMenu<span style="color: #800000;">&gt;

rss.html[2/16/2014 2:23:27 PM]

class="xaml xaml" style="font-family: courier new,courier,monospace;"> <span style="color: #800000;"><span

rss.html[2/16/2014 2:23:27 PM]

#0000ff;">"http://schemas.microsoft.com/winfx/2006/xaml"</span><span style="color: #800000;">>

style="color: #0600FF; font-weight: bold;">default</span><span style="color: #000000;">(</span>T<span

<span style="color: #000000;">(</span>_originalList<span style="color: #000000;">[</span>index<span

style="color: #0000ff; font-weight: bold;">new</span></a> EventArgs<span style="color: #008000;"><

#0000FF;">Count</span>; <span style="color: #000000;">}</span>

style="color: #800000;"><Grid<span style="color: #800000;">></span></span></span> <span style="color:

#ff0000;">Content</span>=<span style="color: #0000ff;">"E-Mail:"</span><span style="color:

<span style="color: #ff0000;">Content</span>=<span style="color: #0000ff;">"Right"</span> Grid.<span

#800000;"><RichTextBox</span>.ContextMenu<span style="color: #800000;">></span></span>

#800000;"><span style="color: #800000;"></Grid</span>.ContextMenu<span style="color: #800000;">>

style="color: #0600FF; font-weight: bold;">void</span> DropList_Drop<span style="color: #000000;">(</span>

hummmmm usefull 4 me & my frnds