How to Scroll to Selected Datagrid Item

If you programmatically select an item on a WPF datagrid, you may need to scroll to make sure that item is visible. One line of code will take care of that for you.

myGrid.ScrollIntoView(myGrid.SelectedItem);

That should do it.

Happy Coding!

BuzzNet Tags: wpf,datagrid,scroll,scrollIntoView,selection

WPF- What’s Going On With My DataGrid Checkbox?

This is a very common mistake and I found myself committing it recently.

Sometimes you will find yourself wanting to create a datagrid column that contains a checkbox. The simplest way of doing this is by defining a DataGridCheckBoxColumn.

<DataGridCheckBoxColumn Binding="{Binding IsSelected}"/>

There are some situations when you might want to use a DataGridTemplateColumn instead because you want to tweak some visuals or add other controls inside the cell.

<DataGridTemplateColumn Width="30">
     <DataGridTemplateColumn.CellTemplate>
          <DataTemplate>
               <CheckBox IsChecked="{Binding IsSelected}"/>
          </DataTemplate>
     </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

When people do this, they sometimes find that the bindings don’t work properly. If they click on the checkbox, they notice that the property they are binding to (in this case IsSelected) does not update until you click somewhere else in the cell. Some people even miss this and just think the binding does not work at all. I ran across a case where a developer had two datagrid columns side by side, one was the DataGridCheckBoxColumn and the other one was a DataGridTemplateColumn like the ones above. The developer was convinced that something was going on because the binding was working for one and not the other.

If you run into this, don’t worry. The binding is working. It’s just not updating the bound property at the correct time. To fix this, simply make the following tweak to the binding statement. This should now cause the property to change immediately once the checkbox is checked (once the IsChecked property changes).

<DataGridTemplateColumn Width="30">
     <DataGridTemplateColumn.CellTemplate>
          <DataTemplate>
               <CheckBox IsChecked="{Binding IsSelected, UpdateSourceTrigger=PropertyChanged}"/>
          </DataTemplate>
     </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

That’s it. Hope this helps.

Happy Coding!

BuzzNet Tags: datagrid,wpf,DataGridTemplateColumn,DataGridCheckBoxColumn,checkbox,UpdateSourceTrigger,Data Binding,xaml,CellTemplate,DataTemplate

WPF Tooltip

Adding a tooltip to a control in WPF is pretty simple. Here is the basic syntax.

<Button Content="Button" ToolTip="This is a tooltip"/> 

There are various properties that can be adjusted to tweak the behavior of the tooltip. This is done via the TooltipService attached property.

<Button Content="Button" ToolTip="This is a tooltip"
                ToolTipService.HasDropShadow="False">
            
</Button>

The properties that can be tweaked on the TooltipService are:

BetweenShowDelay	This value specifies how much time (in milliseconds) the user has to move from the control that is displaying the tooltip to another one without having to wait for it’s InitialShowDelay. Essentially, if I set this value to X, once I see the tooltip on my control, I have X milliseconds to hover over another control that has a tooltip and that other tooltip will show up immediately.
HasDropShadow	Specifies if the tooltip has a dropshadow.
HorizontalOffset	Offset from the left of the area that is specifies for the tooltip.
InitialShowDelay	How long it takes for the tooltip to open (in milliseconds).
IsEnabled	Determines whether the tooltip gets displayed.
IsOpen	Gets whether the tooltip is open.
Placement	Sets the orientation of the tooltip when it opens
PlacementRectangle	Gets or sets the rectangle area in which the tooltip is displayed
ShowDuration	Specifies the amount of time the tooltip is displayed
ShowOnDisabled	Specifies if the tooltip is displayed when the parent object is disabled
ToolTip	Gets or sets the content of the tooltip
VerticalOffset	Offset from the top of the area that is specifies for the tooltip.

You can any visual element as the content of a tooltip by defining in a nested element rather than an attribute.

        <Button Content="Button">            
            <ToolTipService.ToolTip>
                <Rectangle Fill="Red" Height="20" Width="20"/>
            </ToolTipService.ToolTip>
        </Button>

Happy Tooltiping!

IceRocket Tags: wpf,tooltip,ToolTipService,tooltip service,betweenshowdelay,verticalOffset,attached property,InitialShowDelay,ShowDuration

The Basics: Intro to Windows Presentation Foundation

I have spoken to several developers this week who have heard of WPF, but have no experience with it. I have been working with this technology for so long, that I take it for granted. I decided to write a few blog posts specifically for those developers that are just starting out with WPF.
The Links First, here are a few useful links to get you started
http://www.microsoft.com/expression/
download Microsoft Expression Blend
http://www.microsoft.com/visualstudio/eng/products/visual-studio-overview 
go to express products to download the free version of Visual Studio
This is by far the Best book for learning WPF. I highly recommend it

Introduction Now that I've used the term WPF several times, I should probably give a formal definition for it. As seen in the title of this blog post, WPF stands for Windows Presentation Foundation. So why use WPF when there are other options like Windows Forms out there? While there are many opinions out there, I believe the biggest benefit to using WPF is that it provides a clear separation between the application behavior and the user interface. Rather than defining the user interface in code like VB or C#, WPF introduces xaml (eXtensible Application Markup Language). This xml markup is used to define the user interface. When an application is built, the compiler reads the xaml (pronounced zammel) markup and generates the appropriate objects to construct the user interface.
Everything you can do in xaml you can do in code. You can create a WPF application without writing a single line of xaml, but that is not common. Declaring your user interface in xaml provides a cleaner separation between the look of the application and the behavior of the application. It also allows you to use the design tools (like Expression Blend) available for creating complex user interfaces. Also, xaml is much easier to read and a lot shorter than code.
C# / Xaml Comparison
The following xaml and c# code both produce the same result – the following interface.

xaml

    <Grid>        
        <StackPanel>
            <Label Content="My First WPF App"/>
            <Button Content="Hello World"/>
            <TextBox/>            
        </StackPanel>
    </Grid>

C#

            Grid g = new Grid();
            StackPanel s = new StackPanel();

            Label l = new Label();
            l.Content = "My First WPF App";

            Button b = new Button();
            b.Content = "Hello World";

            TextBox t = new TextBox();

            //populate stack panel
            s.Children.Add(l);
            s.Children.Add(b);
            s.Children.Add(t);            

            //add stackpanel to grid
            g.Children.Add(s);

            //set application content
            this.Content = g;

From this small example you can clearly see that the C# code is much longer and more difficult to read than the equivalent xaml markup.

Xaml Basics

To initialize an object simply create a new xml element.

             <StackPanel/>
        <Button/>
        <Label/>
        <TextBlock/>
        <TextBox/>
        <ListBox/> 
         . . .
    There are two ways of adding properties to elements:

1)Inline
             <StackPanel Orientation="Horizontal" Margin="2"/>   
        <Button Content="Click Me" Height="50" Width="100"/>
        <Label Content="Hi"/>
        <TextBox Text="Enter text here"/>
        <ListBox Height="300"/>

or

2) As nested elements. This allows building more complex elements.

        <Button Height="50" Width="100">
            <StackPanel Orientation="Horizontal">
                <Label Content="Click"/>
                <Image Source="click_here.png"/>
            </StackPanel>
        </Button>

The Visual Tree
WPF introduces the notion of a visual tree and a logical tree. It is important to understand the difference between the two.

When building a user interface, one can talk about the different elements that make up the interface. That is what is referred to as the logical tree.

    <Grid>
        <Button/>
    </Grid>

The logical tree for this code is represented as

The visual tree refers to the various visual elements that make up a logical element. The logical tree just for the button above is represented as:

This specifies, in great detail, how the button control is visually constructed. WPF gives developers the flexibility to completely redefine visual tree of any given control. This is done via Styles and Templates.

Styles and Templates
Here is where WPF development, in my opinion, really shines. Styles can be used to make reusable chunks of code that define visual properties of specific UI elements or a certain type of element. They are very similar to Cascading Style Sheets in web development. With styles, you can easily define the look for all the buttons within a given application as a single style and apply it globally.style

Below I define 4 styles for Label controls. The first is the default style for all labels within scope. If a label is created within the scope of this style and no style is defined, it will pick up the properties defined by this style. Default styles are created in WPF by simply creating a style without giving it a Key (style identifier).

                <Style TargetType="{x:Type Label}">
                    <Style.Setters>
                        <Setter Property="Foreground" Value="Red"/>
                        <Setter Property="FontWeight" Value="Bold"/>
                        <Setter Property="FontSize" Value="40"/>
                    </Style.Setters>
                </Style>

                <Style TargetType="{x:Type Label}" x:Key="BigBlueStyle">
                    <Style.Setters>
                        <Setter Property="Foreground" Value="Blue"/>
                        <Setter Property="FontWeight" Value="Bold"/>
                        <Setter Property="FontSize" Value="40"/>
                    </Style.Setters>
                </Style>

                <Style TargetType="{x:Type Label}" x:Key="LittleGreenStyle">
                    <Style.Setters>
                        <Setter Property="Foreground" Value="Green"/>
                        <Setter Property="FontWeight" Value="Bold"/>
                        <Setter Property="FontSize" Value="10"/>
                    </Style.Setters>
                </Style>

The second and third styles both have Keys. In order to use this style, the label must set the Style attribute using the following syntax.

        <StackPanel>
            <Label Content="First Label"/>
            <Label Content="Second Label" Style="{DynamicResource BigBlueStyle}"/>
            <Label Content="Third Label" Style="{DynamicResource LittleGreenStyle}"/>
            <Label Content="Fourth Label" Foreground="Purple"/>
        </StackPanel>

The product of this code looks like this:



Notice how the fourth label overrides the foreground color to purple.

Templates are a bit different from styles. While styles allow you to set properties, templates allow you to redefine the visual tree of an element. There are two different kinds of templates used in WPF

1)Datatemplate – Used for describing how data should be displayed. This type of template is commonly used in list-based controls like listboxes or comboboxes.

2)ControlTemplate – Used for describing the appearance of a control.

Simple example:

In this example I change the visual tree of the button. This defines the button to be made up of a green grid with an inner stackpanel that has a textblock, a rectangle and a combobox. Note, the user can still interact with any of the elements inside the button like the combobox. This, in my opinion, is the single most powerful feature in WPF. Developers are completely free to redefine visual elements in inumerable ways to meet their needs.

       <Button Height="100" Width="200">
            <Button.Template>
                <ControlTemplate>
                    <Grid Background="Green">
                        <StackPanel  VerticalAlignment="Center"> 
                            <TextBlock Text="Click Me"/>
                            <Rectangle Fill="Black" Height="30" />
                            <ComboBox>
                                <ComboBox.Items>
                                    <ComboBoxItem Content="Item One"/>
                                    <ComboBoxItem Content="Item Two"/>
                                    <ComboBoxItem Content="Item Three"/>
                                </ComboBox.Items>
                            </ComboBox>
                        </StackPanel>                        
                    </Grid>
                </ControlTemplate>
            </Button.Template>
        </Button>

This has only been a quick intro to WPF. I hope it’s been helpful to understand the basics of this technology. Please take a look around this blog to find other articles related to wpf development.

Happy Coding!

Technorati Tags: C#,wpf,Windows Presentation Foundation,xaml,templates,controltemplate,datatemplate,visualtree,logicaltree,visual tree,logical tree

C# Basics: Switch Statement

The switch statement is a form of selection statement that executes some logic based on the value of a given parameter. Its purpose is to replace multiple conditional statements with a single switch statement.

Basic Syntax

switch (expression)
{
       case constant1:
             statement1;
             break;
       case constant2:
             statement2;
             break;
       case constant3:
             statement3;
             break;
       default:
             default statement;
             break;
 }

If the expression’s value does not match any of the constant values in the switch statement, the control flow is transferred to the statement following the default keyword.

The switch statement above can also be written with multiple if statements as follows:

if (expression1)
{
     statement1;
}
else if (expression2)
{
      statement2;
}
else if (expression3)
{
     statement3;
}
else
{
     default statement;
}

Case fall-through
all case statements within a switch statement must have a reachable endpoint. This is typically the break statement. However, any statement that will jump the execution out of the switch statement will also work. These are statements like return and throw. The only exception to this reachable endpoint rule is when there are no statements between case statements.

In the following example, statement 1 is executed if expression is equal to constant1 or constant2.

switch (expression)
{
     case constant1:                    
     case constant2:
            statement1;
            break;
     case constant3:
            statement3;
            break;  
     default:
            default statement;
            break;
}

BuzzNet Tags: c#,switch,programming basics,learn c#