Back to Home

5 Tricks you should know in WPF – PART 1

December 02, 20144 minutes read
5 Tricks you should know in WPF – PART 1

1. Write C# Code in XAML

We all know that XAML is a design language which helps in building user interface. But how many of us know, that, it is possible to write C# code inside XAML. This can be achived using x:Code. This attribute allows placement of code within a XAML production.

The code within the x:Code XAML directive element is still interpreted within the general XML namespace and the XAML namespaces provided. Therefore, it is usually necessary to enclose the code used for x:Code inside a CDATA segment.

<Button Content="Click me"
private void Button_Click(object sender, RoutedEventArgs e)
MessageBox.Show("hey, I am from XAML");

Even though XAML has the flexibility to add C# to it, it is not recommended to follow this approach. Because WPF always prefer developers to separate design code and business code as much as possible. Remember why we follow MVVM !!!. Also it does not support intellisense, that will make difficult in write code. In other hand, using directives cannot be declared so we need to use fully qualified names.

2. LINQ to Visual Tree

There are various situations where we need to traverse the visual tree and get the element that we are looking for. Traversing a visual tree is not so straight forward. But how about applying LINQ queries over visual objects in WPF. I hope you remember the XML way of traversing. (XElement.Descendants).

Colin Eberhardt written a nice article on it.

// get all the TextBox's which have a Grid as direct parent
var itemsFluent = this.Descendants&amp;lt;TextBox&amp;gt;()
.Where(i =&amp;gt; i.Ancestors().FirstOrDefault() is Grid);

var itemsQuery = from v in this.Descendants&amp;lt;TextBox&amp;gt;()
where v.Ancestors().FirstOrDefault() is Grid
select v;

// get all the StackPanels that are within another StackPanel visual tree
var items2Fluent = this.Descendants&amp;lt;StackPanel&amp;gt;()

var items2Query = from i in
(from v in this.Descendants&amp;lt;StackPanel&amp;gt;()
select v).Descendants&amp;lt;StackPanel&amp;gt;()
select i;


3. Design Time Attributes

Have you ever wonder what is mc:Ignorable=”d”, which usually declared automatically in your page root element? These namespace provides XAML definitions that will ignored by the XAML processor during run time. This is really helpful for XAML designers, especially who works with Expression Blend.

The d:DesignHeight and d:DesignWidth sets a fixed height and width for the element at designtime.

<UserControl x:Class="WpfApplication16.UserControl1"
d:DesignHeight="300" d:DesignWidth="300">
<Grid >


If designers want to work with sample data, it is possible with setting a design time DataContext. This datacontext will not be processed during run time.

<local:ViewModel x:Key="DesignTimeViewModel" />
<Grid d:DataContext="{StaticResource DesignTimeViewModel}">
<TextBlock Text="test" />

4. IsMouseOver and IsMouseDirectlyOver

Some times, we may not even consider the differences between these two properties. Using these properties without understanding it may impact the UI logic. The IsMouseOver property for a user interface element indicates whether the mouse is currently located over the element or any of its children.

For example, for a Button contained in a StackPanel, when the user moves the mouse over the Button, IsMouseOver will be true for both the Button and the StackPanel. The IsMouseDirectlyOver, on the other hand, indicates whether the mouse is over a control and not over any of its children. So in this case, IsMouseDirectlyOver will be true for Button and false for StackPanel.

5. Name and x:Name

x:Name is a designer generated variable, used mainly to reference elements. When you give an element the x:Name XAML attribute, “the specified x:Name becomes the name of a field that is created in the underlying code when XAML is processed, and that field holds a reference to the object.”

Name is the existing string property of a FrameworkElement, listed as any other WPF element property in the form of a XAML attribute. So the control which not inherited from Framework Element cannot use Name attribute. but can use x:Name attribute. So it is always better to use x:Name which covers everything.