Eclipsed4utoo's Blog» wpf

WPF – Using Data Triggers

Ryan Alford — Mon, 07 Mar 2011 23:30:07 +0000

Data triggers are a great feature of WPF. They allow you to change the style properties of a control depending on the data of the bound items of that control.

In this tutorial, I am going to bind a set of data to a ListBox, and use Data Triggers to let me know when something is wrong.

So first, I am going to create a Person class. This class will have three public properties: Name, Age, and IsValid. All three properties will be readonly. The IsValid property will return whether the data of the class is good or not.

Person.cs

public class Person
{
    private string name;

    public string Name
    {
        get { return name; }
        private set { name = value; }
    }
    private int age;

    public int Age
    {
        get { return age; }
        private set { age = value; }
    }

    public bool IsValid
    {
        // will return false if either the name is blank
        //   or if the age is 0.
        get { return (!string.IsNullOrEmpty(name) && age != 0); }
    }

    public Person(string _name, int _age)
    {
        name = _name;
        age = _age;
    }
}

This is a simple example to show the concept. Basically, I am going to set the data to values that we don’t want.

MainWindow.xaml.cs

public partial class MainWindow : Window
{
    ObservableCollection col;

    public MainWindow()
    {
        InitializeComponent();

        this.Loaded += new RoutedEventHandler(MainWindow_Loaded);
    }

    void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        col = new ObservableCollection();
        col.Add(new Person("John Doe", 24));
        col.Add(new Person("", 24));
        col.Add(new Person("John Doe", 0));

        PersonListBox.ItemsSource = col;
    }
}

As you can see, I set the name to being blank for one object, and the age to being 0 for another object.

Now for the XAML. First, we need to add a new style to the Window.Resources. This style will target the ListBoxItem type.

So if our IsValid property is false, then we will set the Background property of the ListBoxItem to Red.

Then we have our ListBox,

So I am binding the ItemsSource to the collection in the code-behind. Also notice that I am binding the style we created to the ItemContainerStyle. The DataTemplate simply creates a custom ItemTemplate to show the data.

So now if we run our code, we get this…

But that’s not all. Let’s say that we want to highlight the rows in different colors depending on if the name is blank or if the age is 0. We can create two separate triggers for that. We would simply change our style to this…

With that change, our ListBox now shows this…

As you can see, Data Triggers are a very powerful part of WPF. Now if only Microsoft would add this to Silverlight.

Silverlight – Custom ListBox Item Template

Ryan Alford — Mon, 25 Oct 2010 22:30:40 +0000

In this tutorial, I will show how to create a custom ListBox Item Template.

For anybody who has tried doing a custom Item Template in WinForms, you would know that it is not fun. You have to override Draw/Paint events, and other jazz to get a ListBox to show how you want it to. However, in Silverlight/WPF, this process is so much easier.

I will be using Blend 4 in my example, as Blend makes the process even more easier.

So first we are going to create a Silverlight project. I will name it CustomListBoxItemTemplate.

Next, we are going to add a ListBox to our page. I made mine with a Height of 250, and a Width of 300, and gave it the name lstPeople.

Before we get to styling the ListBox, we need to create some test data to load into our ListBox. I created a simply Person class.

public class Person
{
    // Insert code required on object creation below this point.
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Age { get; set; }
    public string FullName { get { return FirstName + " " + LastName; } }

    public Person(string _fName, string _lName, int _age)
    {
        FirstName = _fName;
        LastName = _lName;
        Age = _age;
    }
}

And add it to the ListBox…

public partial class MainPage : UserControl
{
	public MainPage()
	{
	     // Required to initialize variables
	     InitializeComponent();

             ObservableCollection peopleList = new ObservableCollection();
             peopleList.Add(new Person("John", "Doe", 32));
             peopleList.Add(new Person("Jane", "Doe", 20));
             peopleList.Add(new Person("Betty", "Sue", 65));

             lstPeople.ItemsSource = peopleList;
	}
}

So now, our ListBox looks like this…

Let’s say that we want to display the age below the Full Name. We can use Blend to edit the Item Template of the ListBox.

In the Objects And Timeline window, right-click on the ListBox –> Edit Additional Templates –> Edit Generated Items(ItemTemplate) –> Create Empty. You could also use the “Edit A Copy” if it’s available.

We will name it MyListBoxItemTemplate.

If you switch over to the XAML view, you will see that the ItemTemplate of the ListBox has now been binded to a Static Resource. Right above the LayoutRoot in the UserControl.Resources, you should a DataTemplate.

You will now see a small Grid on the screen. We will expand the grid to a Height of 55 and a Width of 225. Inside the grid, we are going to add 4 TextBlocks. Two will be for display purposes and the other two will show our information. Notice I am also Binding the FullName and Age properties to the Text property of the TextBlock.

And that’s all we need to do. To get out of the ItemTemplate editing, click on the ListBox at the top…

Now run the application, and your ListBox will now look like this…

As you can see, using Blend in a Silverlight or WPF application, you can customize a ListBox in only a few minutes.

x:Name=”lstPeople”

ItemsSource=”{Binding}”

DisplayMemberPath=”FullName”

Margin=”145,92,195,138″/>

WPF – Dynamically Loading LINQ-To-SQL Tables and Columns Into ComboBox

Ryan Alford — Tue, 25 May 2010 22:00:21 +0000

Here is some code to dynamically load the table names into a ComboBox. Then on the selection of a specific table, load the columns for that table into a second ComboBox.

First is the XAML:

 x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    
         
            Name="cboTables" 
            Height="23" 
            HorizontalAlignment="Left" 
            Margin="186,60,0,0" 
            VerticalAlignment="Top" 
            Width="120"
            ItemsSource="{Binding}"
            Selectionchanged="cboTables_Selectionchanged"
            DisplayMemberPath="RowType.Name" 
            SelectedValuePath="RowType.DataMembers" />
        
         
            Height="23" 
            HorizontalAlignment="Left" 
            Margin="186,107,0,0" 
            Name="cboColumns" 
            VerticalAlignment="Top" 
            Width="120"
            ItemsSource="{Binding}"
            DisplayMemberPath="MappedName"/>
         
            Name="label1"
            Content="Tables:" 
            Height="28" 
            HorizontalAlignment="Left" 
            Margin="134,60,0,0"  
            VerticalAlignment="Top" />

         
            Name="label2" 
            Content="Columns:" 
            Height="28" 
            HorizontalAlignment="Left" 
            Margin="121,107,0,0" 
            VerticalAlignment="Top" />

Notice that we have set the ItemsSource attribute to {Binding}. This lets the control know that we are binding data to the control(big surprise). Notice that I have also set theDisplayMemberPath and SelectedValuePath in the Tables ComboBox and theDisplayMemberPath in the Columns ComboBox.

Next is the code:

using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Controls;

namespace WpfApplication4
{
    /// 
    /// Interaction logic for Mainwindow.xaml
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(MainWindow_Loaded);
        }

        void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            // creates a new instance of our DataContext
            using (InformationDataContext db = new InformationDataContext())
            {
                // gets the list of tables
                var tableList = db.Mapping.GetTables();
                cboTables.ItemsSource = tableList;
            }
        }

        private void cboTables_Selectionchanged(object sender, SelectionchangedEventArgs e)
        {
            cboColumns.ItemsSource = cboTables.SelectedValue as ReadOnlyCollection<System.Data.Linq.Mapping.MetaDataMember>;
        }
    }
}

We use the GetTables method of the DataContext class to get the list of tables. The objects themselves are of type System.Data.Linq.Mapping.AttributedMetaTable. Two properties of this class are RowType.Name and RowType.DataMembers. The RowType.Name is the name of the table without the “dbo” in front. The RowType.DataMembers is a list of the columns of that table.

The RowType.DataMembers objects are of type System.Data.Linq.Mapping.MetaDataMember. One property of this class is the MappedName property that we are using as the DisplayMemberPath. This gives us the name of the column without any extra data.

WPF – Create Animation Programmatically

Ryan Alford — Thu, 20 May 2010 22:00:48 +0000

This is a short code snippet on creating an animation in WPF through code.

In my Twitter app that I have been working on, I was recently doing some optimizations. When I first did the app, I was new to WPF and knew nothing about animations. After spending time in Silverlight, I used that knowledge to do some animations in WPF.

I wanted to do simple “fade-in” and “fade-out” animations when removing tweets from view and adding new tweets to the view. And being the person that I am, I like doing this stuff in code. While I like XAML a lot, I still like writing the code. So here is how to do an animation that changes the Opacity property programmatically.

// because I am doing these as extension methods, they
//   will be available to all UIElement objects, which are
//   basically all controls that can be added to the GUI
public static class ControlAnimationExtensionMethods
{
    public static void FadeIn(this UIElement targetControl)
    {
        DoubleAnimation fadeInAnimation = new DoubleAnimation(0, 1, new Duration(TimeSpan.FromSeconds(1.5)));
        Storyboard.SetTarget(fadeInAnimation, targetControl);
        Storyboard.SetTargetProperty(fadeInAnimation, new PropertyPath(UIElement.OpacityProperty));
        Storyboard sb = new Storyboard();
        sb.Children.Add(fadeInAnimation);
        sb.Begin();
    }

    public static void FadeOut(this UIElement targetControl)
    {
        DoubleAnimation fadeInAnimation = new DoubleAnimation(1, 0, new Duration(TimeSpan.FromSeconds(1.5)));
        Storyboard.SetTarget(fadeInAnimation, targetControl);
        Storyboard.SetTargetProperty(fadeInAnimation, new PropertyPath(UIElement.OpacityProperty));
        Storyboard sb = new Storyboard();
        sb.Children.Add(fadeInAnimation);
        sb.Begin();
    }
}

This code is useful when dynamically creating controls that you want to do animations on.

TextBlock tb = new TextBlock();
tb.Name = "textBlock1";
// set more property values

tb.FadeIn();

WPF – Using an Application Configuration File

Ryan Alford — Fri, 05 Feb 2010 19:16:01 +0000

This is going to be a real short post about an issue that I ran into recently with WPF.

I was wanting to use an app config file with my WPF application. I was running into an issue with the ConfigurationManager calls not getting the information from the app config file.

I added the app config just like I would in a Windows Form..

My app config file looked something like this…

I was using the standard code that works fine in Windows Forms(needed to add a reference to the System.Configuration):

using System.Configuration

private void Window_Loaded(object sender, RoutedEventArgs e)
{
     var myKey = ConfigurationManager.AppSettings["myKey"];
}

However, the app settings were not being found. After scratching my head for a while and searching numerous places online, I found a small response on a forum. None of the “MVP”s picked up on it. It was because of the name of the app config file. By default, VS2008 added the file as “App1.config”. For some reason, the ConfigurationManager class looks for a file named exactly “App.config”.

So simply changing the name of the config file to “App.config” fixed the issue and the code started working.

TwitEclipse – My Twitter Desktop Client

Ryan Alford — Mon, 12 Oct 2009 20:15:26 +0000

I have released a BETA version of my Twitter Desktop Client called TwitEclipse. I have been writing a Twitter API library in .Net for a while now, and figured I might as well write a desktop client also.

The client uses .Net 3.5 SP1 and WPF. It was a great learning experience to learn WPF since I had almost no previous experience with it.

If you want to download it and test it out, you can download it from here. Remember that it is a BETA. You could run into issues. If you do, be sure to let me know so I can fix them. I will also be adding additional features to the app once I get a chance.

I will be releasing my Twitter API library soon also.