Coding Bandit

Stepping down as CONDG President for 2010

The Admin — Fri, 23 Oct 2009 13:04:57 GMT

I have had the honor of leading the Central Ohio .Net Developer’s Group as President for the past two years, and it’s been a wonderful and fulfilling experience! I intend to remain a passionate member of this group, and will be there to help it grow, only it will be on my own schedule :) I’m hoping to become a board member going forward, and will throw my hat in the ring for one of those 3 advisory positions. This means that there will be open positions at the Director level, these positions are President, Vice President, Secretary and Treasurer. I really encourage all that are passionate about this group to apply for one of these positions and become more involved in our developer community. An overview of the responsibilities for these positions can be found here. Please remember you must have attended at least 3 of the last 6 meetings to be eligible to be nominated for a position or to vote in this election. Elections will take place at the December group meeting, stay tuned to www.condg.org for the date. To nominate yourself or someone else, please use the contact form located on www.condg.org and include your contact information as well as the desired position.

I will remain involved with the developer community, and will have more time to contribute as a:

Stir Trek board member and incorporator
National GiveCamp treasurer and incorporator
Central Ohio Day of .Net Speaker wrangler
Columbus GiveCamp organizer
Women in Tech member
and potentially a CONDG advisory board member

Looking forward to continuing to see you all at future community developer events!

Columbus GiveCamp 2009 - Recap

The Admin — Sun, 26 Jul 2009 17:57:42 GMT

Another great event! I always find it amazing that a group of about 40 developers, many of which have never worked together before, can get together over the course of a weekend and produce something that makes a real difference for non-profit organizations. Major kudos goes out to each and every volunteer who came out to the event. Columbus GiveCamp certainly brought out the cream of the crop when it comes to talented project managers, designers and developers.

Here are the supported non-profit organizations:

HopeMongers [site scheduled to launch in early fall] – http://www.hopemongers.org
Fairy Good Mothers - http://fairygoodmo.web705.discountasp.net/main/
Volunteer Earth [site scheduled to launch in early fall] - http://www.volunteerearth.org/
Shiloh Baptist Church - http://shiloh.heroku.com/
Shiloh Family Institute College Choir Concert Series - http://www.ficccs.com/
Northwest Plains District Family Camp - http://familycamp.heroku.com/
TECH CORPS Ohio [new template design] - http://test.techcorpsohio.org/

Thank you for the Sponsorship!!

Volunteer events like GiveCamp are not possible without the help of sponsorship. The GiveCamp crew and non-profit organizations are extremely thankful to the Columbus GiveCamp sponsors Microsoft, TechSmith, Quick Solutions, DiscountASP.net, The Sophic Group, Telerik, Pei Wei and Pot Belly Sandwiches. Thank you Microsoft, TechSmith and Sophic for providing funding and giveaways for the event, it kept the developers well fed, caffeinated and happy. Quick Solutions for allowing us use of their office location and internet pipe [having the excellent bandwidth played a large role in the success of this event!], as well as providing us notepads, paper, pens, whiteboards, projectors, as well as all the caffeinated beverages that we could drink. DiscountASP.Net for graciously providing free hosting packages to our non-profit organizations, this is definitely the gift that will keep on giving! Pei Wei surprised us by more than doubling our original food order, and Pot Belly provided us a generous discount on our order.

Blog Posts

[please contact me if I’ve missed your post, and I’ll add it]

Pictures

[please contact me if I’ve missed your photos, and I’ll add it]

My Flickr photos of the event - http://is.gd/1NEOQ

Brian Jackett’s pictures of the event - http://tinyurl.com/ngmhk3

Sarah Dutkiewicz’s pictures of the event – http://tinurl.com/lh4zpg

Happy Contribupendence Day ! – July 3rd 2009

The Admin — Fri, 03 Jul 2009 19:11:49 GMT

Contribupendence is the brain-child of Jeff Blankenburg. As he describes it in his post from last year as:

A day when we can contribute to our colleagues and friends to improve their online standing. A day when we take advantage of those features of social networks that we always put off until tomorrow.

My entries for this year in alphabetical order are:

Mike Eaton – Mike is very well-known in the Heartland developer community. He is honest, straight to the point and an excellent public speaker. He is also instrumental in organizing the the Kalazoo X and Ann Arbor GiveCamp events. A lot of planning and work goes into organizing events like these, so he is a big part of why the Heartland community is the best place to be if you are in the technology field. Mike is also open to sharing his professional knowledge and experience with others, and because of this has been awarded a Microsoft MVP.

Sam Henry – Sam believes in the ability to add up all the small things in the world in order to make a real big difference. He applies this in a couple different ways. One way is to get a group of developers together on a project to work an hour or two here and there, to build up an application. This allows the developers to get to know one another, as well as learn new concepts, but most of all to work together to build something great. The application I am talking about is HopeMongers, whose purpose is to add up all the small things to make a big difference. It is a micro-giving site that will allow even the smallest donations to be applied towards very worthwhile charity projects for those in need around the world. He has stuck with this project to make it a reality, it will be delivered later this year.

Chris Miller – Need I say more… Chris is my boss, he puts up with me on nearly a daily basis. He shows a genuine interest in listening to me going on and on about some new technology that could really impact our line of work. Many in this same situation would end these conversations and go back to thinking about how we have “always done things”, but Chris definitely has an eye to the future, whether or not certain technological approaches can be applied immediately. This makes him a valuable asset in our industry. He is also very fair and un-biased towards any technology, which is a very rare quality. He definitely believes in using the best tools for the job and is a large proponent of software reuse.

Joe O’Brien – Joe is absolutely amazing! As the fearless leader of the Columbus Ruby Brigade and organizer of Columbus’ eRubyCon, Joe is an excellent international public speaker and is not afraid with hobnobbing with members and leaders of “other” technology groups. Instead of forcing people to see Ruby technology benefits and arguing it’s merits, Joe would rather just encourage people to try the technology out for themselves. This quality, among others make Joe an excellent role model, and I am grateful to call him a friend.

Jeremiah Peschka – Jeremiah is an up and coming Heartland developer community mogul. He has a definite interest in growing the SQL Developer (he is adamant his is NOT a DBA) area of the Heartland community. He is the Columbus Pass Leader as well as the leader of the Virtual chapter of SQL Developers. He will be speaking at the Central Ohio .Net Developer’s group meeting in July 2009.

WPF Data Templates Part 6 – Visualizing Data Differently – a Simple WPF Bar Graph

The Admin — Sat, 14 Mar 2009 00:48:00 GMT

One of the main strengths of WPF is the ability to visualize ordinary data in a different way. In this post, I’ll go over how we can represent the 5 star rating of our images defined in this post as a simple WPF bar graph. Also demonstrated is the use of the Tooltip item in WPF that will be used to display detailed information of the image when the user hovers over a bar in our graph. The final result will look similar to this:

This bar chart is generated using our ListBox control, and a series of canvases, each one representing an image in our collection. In order to override the default vertical orientation of a ListBox you must assign a different content control to the ItemsPanel property. In this case, we override the default vertical orientation Stack Panel of the ListBox with another StackPanel with an orientation of horizontal. This will render the ListBox items from left to right.

        1: <ListBox.ItemsPanel>

       2:     <ItemsPanelTemplate>

       3:         <StackPanel Orientation="Horizontal" />

       4:     </ItemsPanelTemplate>

       5: </ListBox.ItemsPanel>

The next item to tackle is the bar chart. This rendering is made possible through the use of a Data Template. A canvas with a red background color is represented for each item being bound to the list. A scaling transformation (on the Y-axis) is issued on each canvas using a value converter that multiplies the star rating by 20 to obtain a height. Keep in mind this height is a ratio, and not a pixel height.

Value Converter:

       1: using System;

       2: using System.Collections.Generic;

       3: using System.Linq;

       4: using System.Text;

       5: using System.Windows.Data;

       6:  

       7: namespace ItemsPanel

       8: {

       9:     public class RatingHeightConverter : IValueConverter

      10:     {

      11:         #region IValueConverter Members

      12:  

      13:         public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

      14:         {

      15:             if (value == null)

      16:                 return 0;

      17:             int obj = (int)value;

      18:             return obj * 20;

      19:  

      20:         }

      21:  

      22:         public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

      23:         {

      24:             throw new NotImplementedException();

      25:         }

      26:  

      27:         #endregion

      28:     }

      29: }

Data Template Definition:

       1: <ListBox x:Name="lbResults" ItemsSource="{StaticResource FavoriteImages}">

       2:     <ListBox.ItemsPanel>

       3:         <ItemsPanelTemplate>

       4:             <StackPanel Orientation="Horizontal" />

       5:         </ItemsPanelTemplate>

       6:     </ListBox.ItemsPanel>

       7:     <ListBox.ItemTemplate>

       8:         <DataTemplate>

       9:             <Canvas Width="20" Height="1" Background="Red" Margin="10,0,0,0">

      10:                 <Canvas.RenderTransform>

      11:                     <ScaleTransform CenterX="1" CenterY="1" 

      12:                         ScaleY="{Binding Path=ImageRating, Converter={StaticResource RatingHeightConverter}}" />

      13:                 </Canvas.RenderTransform>

      14:             </Canvas>

      15:         </DataTemplate>

      16:     </ListBox.ItemTemplate>

      17: </ListBox>

This will render the following bar chart:

While this does allow the user to visualize the image data in a different fashion. It lacks usability in the sense that the user does not know which specific items are represented for each bar displayed. A way to provide this functionality is by adding a tooltip to the canvas defined in the Data Template. Every visual control in WPF has a tooltip property. A tooltip is a content control and therefore can contain any number of visual elements. In this case, a Stack Panel is defined that will display the detailed information of the image including the image itself, image name and it’s 5 star rating (rating user control is defined in this post, and is assigned to the ToolTip property of the canvas.

       1: <Canvas.ToolTip>

       2:     <ToolTip>

       3:        <StackPanel Height="300">

       4:            <Image Margin="10" Width="250" Height="200" Stretch="Fill" Source="{Binding Path=ImageHref}" />

       5:            <Label Content="{Binding Path=ImageName}" />

       6:            <Label Content="{Binding Path=ImageRating,Converter={StaticResource RatingConverter}}" />

       7:        </StackPanel>

       8:       </ToolTip>

       9: </Canvas.ToolTip>

The final definition of our list box is as follows:

       1: <ListBox x:Name="lbResults" ItemsSource="{StaticResource FavoriteImages}">

       2:     <ListBox.ItemsPanel>

       3:         <ItemsPanelTemplate>

       4:             <StackPanel Orientation="Horizontal" />

       5:         </ItemsPanelTemplate>

       6:     </ListBox.ItemsPanel>

       7:     <ListBox.ItemTemplate>

       8:         <DataTemplate>

       9:             <Canvas Width="20" Height="1" Background="Red" Margin="10,0,0,0">

      10:                 <Canvas.RenderTransform>

      11:                     <ScaleTransform CenterX="1" CenterY="1" 

      12:                         ScaleY="{Binding Path=ImageRating, Converter={StaticResource RatingHeightConverter}}" />

      13:                 </Canvas.RenderTransform>

      14:                 <Canvas.ToolTip>

      15:                     <ToolTip>

      16:                         <StackPanel Height="300">

      17:                             <Image Margin="10" Width="250" Height="200" Stretch="Fill" Source="{Binding Path=ImageHref}" />

      18:                             <Label Content="{Binding Path=ImageName}" />

      19:                             <Label Content="{Binding Path=ImageRating,Converter={StaticResource RatingConverter}}" />

      20:                         </StackPanel>

      21:                     </ToolTip>

      22:                 </Canvas.ToolTip>

      23:             </Canvas>

      24:         </DataTemplate>

      25:     </ListBox.ItemTemplate>

      26: </ListBox>

Full Source Code for this example is available here.

Central Ohio Day of .Net (CODODN) – Call for Speakers Open

The Admin — Sun, 25 Jan 2009 23:58:00 GMT

The time has come again! It’s time to submit your abstracts for consideration for the Central Ohio Day of .Net. The event will take place on Saturday April 18^th 2009 and will once again be held at the Roberts Centre in Wilmington Ohio.

This year we want to try for a little more diversity in our topics so we are looking for specific submissions around the following topics (though any submission will be considered):

· SQL Server related presentations

· Non .NET related language topics such as Ruby or Python

· Dynamic Languages on the .NET Framework (IronPython, IronRuby, DLR, etc.)

· 100-level introductory presentations to a language, technology or principle. All content must be provided with the assumption that the attendees will know nothing about the topic. We are looking for both .NET and non .NET related topics for a new track called Software 101.

While we are looking for submissions for the topics above, don't let that stop you from submitting any topic, or presentation of technical depth, that you'd like to present. ALL submissions will be reviewed.

Call for speakers completed, thank you for your submissions. We plan to announce approved sessions by March 16^th 2009.

If you have any questions about submitting a session please contact cododn@codingbandit.com .

WPF Data Templates Part 5 – Editing data in a Data Template and Switching a template on a Single item programmatically

The Admin — Sun, 25 Jan 2009 16:59:00 GMT

The beauty of WPF is that it contains the ability to provide the user enhanced usability along with enhanced user experience. Too often today, you see applications that sport “admin” functions, which are functions for things like maintaining values that should be displayed in a list box, or data that is used to associate two entities [for instance, a bank account can have more than one contact person associated]. In the typical application, you see an “admin” or “maintenance” section where these entries and associations are made.

Think a moment now on the user experience, user A accesses the application, moves on to a data entry form, gets two-thirds of the way through the form and realizes that a value is missing from a drop down list. This user must now stop everything they are doing on this form, then move to a separate part of the application, make their entry, initiate some type of refresh, then continue on with their work. What is up with that? The experience of user A is less to be desired. Why make the user go to a completely different section of the application and split up their train of thought from the process at hand? Ultimately, a user should not have to move away from their current work to accomplish something like this, they should be able to edit/add items to a list on the fly, and from within the form that they are currently working. This is where Data Templates come in to play.

WPF Data Templates provide the ability for you to define a template that can be used to add/edit a list item. In this example, we’re going to pull in the image favorites data, and provide the ability to edit the properties of an Image directly from within the list box with the help of a data template. This example is going to use SQL Express database and LINQ to SQL to pull and update the data associated with the Image Favorite.

In order for any changes to the images to be tracked, I created an ObservableCollection class that simply returns all data from the ImageFavorite table. This is used to populate the ItemSource of the List Box. This class is defined as follows:

public class ObservableFavorites : ObservableCollection<DataGoo.ImageFavorite>
{
    public ObservableFavorites(DataGoo.GooDataContext ctx)
    {
        foreach (ImageFavorite fav in ctx.ImageFavorites)
        {
            this.Add(fav);
        }
    }
}

In the code-behind of the window, I instantiated an instance of the data context (DataGoo is simply the project containing my database and LINQ to SQL dbml). Code to initiate the population of the list box is as follows [where lbFavorites is the list box]:

private static DataGoo.GooDataContext _dc = new DataGoo.GooDataContext();
private ObservableFavorites _favorites;
  
public Window1()
{
    InitializeComponent();
    PopulateList();
}
  
private void PopulateList()
{
    _favorites = new ObservableFavorites(_dc);
    this.lbFavorites.ItemsSource = _favorites;
}

I have defined two data templates for use with the list box that displays the Image Favorite data. The first template “DetailedTemplate” is the default view of the data, it contains a button that is used to switch the item from a display to an edit view. The XAML for this is defined in Window.Resources.

<DataTemplate x:Key="DetailedTemplate">
        <Border BorderBrush="Blue" Margin="3" Padding="3" BorderThickness="2" CornerRadius="5" Background="Beige">
            <StackPanel Orientation="Horizontal">
                <Image Margin="10" Width="250" Height="200" Stretch="Fill" Source="{Binding Path=ImageHref}">
                    <Image.BitmapEffect>
                        <DropShadowBitmapEffect />
                    </Image.BitmapEffect>
                </Image>
                <StackPanel Orientation="Vertical" VerticalAlignment="Center">
                    
                    <TextBlock FontSize="25" Foreground="Goldenrod" Text="{Binding Path=ImageName}" />
                    
                    <StackPanel Orientation="Horizontal">
                        <Label Content="{Binding Converter={StaticResource RatingConverter}}" Width="300" />
                        <Button Height="50" Width="50" Click="btnEdit_Click" 
                                CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}">
                            <Image Source="images/processIcon.png" />
                        </Button>
                        <Label Content="" />
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </Border>
    </DataTemplate>

The command parameter is set to the ListBoxItem that contains the button being pressed, this is accomplished through the binding statement: {Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}} … this binding statement essentially walks up the current XAML tree from the button up to the first element that is of type ListBoxItem, thus returning the List Box Item whose edit button was clicked. The click event of the button is then handled by the following method:

private void btnEdit_Click(object sender, RoutedEventArgs e)
{
    Button btn = (Button)sender;
    //command contains the list item
    ListBoxItem itm = (ListBoxItem)btn.CommandParameter;
    itm.ContentTemplate = this.FindResource("EditTemplate") as DataTemplate;
}

In order to switch the Data Template on only a single item in the list box, we need to assign the new template to the ContentTemplate property of the list item, which is the data template defined in resources as “EditTemplate”. The EditTemplate provides the user the ability to update the image name and image rating, is defined in XAML in Window.Resources as:

<DataTemplate x:Key="EditTemplate">
    <Border BorderBrush="Blue" Margin="3" Padding="3" BorderThickness="2" CornerRadius="5" Background="Beige">
        <StackPanel Orientation="Horizontal">
            <Image Margin="10" Width="250" Height="200" Stretch="Fill" Source="{Binding Path=ImageHref}">
                <Image.BitmapEffect>
                    <DropShadowBitmapEffect />
                </Image.BitmapEffect>
            </Image>
            <StackPanel Orientation="Vertical" VerticalAlignment="Center">
                <TextBox Width="300" FontSize="25" Foreground="Goldenrod" Text="{Binding Path=ImageName}" />
                <TextBox Width="50" FontSize="25" Foreground="Blue" Text="{Binding Path=ImageRating}" HorizontalAlignment="Left" />
                <Button Content="Save" Click="btnSave_Click" Width="40" HorizontalAlignment="Left"
                        CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}"/>
            </StackPanel>
        </StackPanel>
    </Border>
</DataTemplate>

A Save button is included in the Edit Data Template to trigger the saving of the data and then switching the template of the list item from the Edit template back to the Detailed template. It uses the same binding for the Command Parameter to latch on to the list box item element that contains the button being clicked. The click event handler for the save button is as follows:

private void btnSave_Click(object sender, RoutedEventArgs e)
{
    //commit the changes to the database
    _dc.SubmitChanges();   
  
    //switch item template
    Button btn = (Button)sender;
    //command contains the list item
    ListBoxItem itm = (ListBoxItem)btn.CommandParameter;
    itm.ContentTemplate = this.FindResource("DetailedTemplate") as DataTemplate;
   
}

Full Source code for this example is available here.

Goals for 2009

The Admin — Sat, 24 Jan 2009 22:40:00 GMT

I was tagged by Sarah Dutkiewicz in her blog post Coding Geekette’s Goals for 2009. So here we go, my goals are [in no particular order]:

Become a better blogger

I tend to let my blog go by the wayside when I get caught up in preparing for presentations, events, work and life in general. During this time I have some great technical conversations that make me take a mental note “Hey! I need to blog about this” … then I don’t get around to it, and I forget about what it was that I wanted to blog about in the first place. I’m going to start carrying around a small notebook to write down these topics so that I won’t forget anymore. Maybe when I step up the quantity and quality of posts that I deliver that I can take an honorary position on someone’s blog roll ;-)

Become a better friend

I am very lucky to be part of the developer community coined “the tribe”. There is a lot of great people that I have gotten to know over the last couple years, and friendships with these people mean a great deal to me. Last year I found myself always in such a rush to get home after an event, and I realize now that it’s ok to slow down for a bit, kick back and enjoy the friendships that I’ve made, I don’t get to see these people very often [in person anyways], and there’s nothing wrong with an evening out with friends. [picture courtesy of @sadukie]

Grow as a mentor

It’s no mystery that in my workplace I mentor many people. This is something that I really enjoy, so it only makes sense to mentor more people. I want people in the developer community to know that if they need help getting started in a technology or surrounding a topic they don’t quite understand, or just want to talk tech, that they can contact me and I’ll help them [and if I don’t know the topic at hand, I’m more than willing to learn it together and try pulling in other mentors].

Have more fun giving presentations

I have always had a certain level of fun giving presentations, but having just finished up with MDC, I have established a new presentation style. I don’t want my mind to stress about forgetting to discuss a small portion of a topic [this usually happens as I’m presenting]. Instead, just learn the content inside and out, form some type of structure, and just do it :) I didn’t realize how much fun giving a presentation could be, and now I can’t wait to present again.

Go more places with the family

I think it’s important that my kids have more experiences outside the home. I plan to make more trips to the zoo, take them to COSI (even I’ve never been there before), get back to the Newport aquarium, and I’ll also be pulling up the activity calendars of the local parks and library.

Lose weight

Now for the stereotypical annual goal, this year I’d like to try and lose some of my additional weight. Some people complain that they look at their high school pictures and how slim they were. I unfortunately only have to go as far as my passport picture to see the difference. Yep, in the last 4 years, I had my third child and that dreaded yo-yo got stuck at the top and won’t come back down, and I need to lose 40 lbs [this will get me back to where I was prior to expecting my last baby]. To do this, my worst offender is going out for lunch all the time, it’s a form of stress relief for me, but it is working completely against me. I’ve had some good success going to the gym, and I need to make myself accountable to make this an on-going habit. I also am missing playing hockey with a vengeance, I missed out on this session, mainly due to a hectic schedule early this year, but I plan on registering next session in the women’s league in Newark and getting back involved with the wonderful people at the BTNHL. If you let me play hockey on your team, I promise I will not to break my ankle again ;) [in the picture is myself with my brother taken at a family game]

Learn, learn, learn, then when I’m done ? learn some more

This is an easy goal for me. I love to learn new things, whether they be about technology, history, crafts, baking, etc. So I’m making a goal to keep this up too :) This year I’d like to start learning two new programming languages, and try to unravel the mystery of all the *DD that everyone talks about, and hopefully find a hybrid kind of methodology that fits me.

Now I get to play tag! I’m going to use the “j” theme that I’ve been enjoying so much since MDC (btw… it’s not jQuery, it’s jCarey).

New year, new blog, CodeMash and MDC

The Admin — Sun, 11 Jan 2009 16:54:00 GMT

2009 has already been a very exciting year. I opened up twitter on the morning of Jan 1st to see many of my friends receiving a Microsoft MVP award, how exciting! I knew I was nominated so I thought I’d check too, nothing there, ah well, better luck next time. I had then moved on and registered on a site that required me to validate my email address. I didn’t see the email come in, so I checked my junk mail folder, lo and behold, there was the validation email and an email titled “Congratulations 2009 Microsoft MVP!” … needless to say I just about fell out of my chair. This is an amazing opportunity for me to learn and grow, and share what I can [non-NDA of course] with the rest of the community and get the message from the community back to Microsoft, I am extremely excited to be given this honor.

Next came CodeMash, I am amazed at the size and quality of this conference every year. I presented a talk on WPF data templates and got some very good interaction from the audience. I feel this makes a session more successful than if a speaker was just up there talking for an hour. Interaction with people in the audience gives custom/catered content so that they are getting more out of the session, and in turn makes me feel satisfied that I provided added value to their attendance in the session.

On January 22nd, I get the opportunity to speak again at the Detroit MSDN Developer’s Conference (a.k.a MDC). This will be my first time delivering content that is not my own, as well as my first time presenting with another presenter. I have spent the last few months learning and applying the topics of this talk, and have gained some substantial knowledge in the process. Needless to say, I am very excited and passionate about the technology that I’ll be presenting on and I hope to see you there so you too can share in my enthusiasm :-)

So what’s up with this new blog? I have one of those names that gets tortured all the time, so self-branding isn’t very easy. Just this past week, I’ve been called Corey, and Casey, and countless other names. I needed something original, that above all is easy to spell. My middle son helped me pick out a name, and I added the “coding” prefix to it, needless to say “bandit” comes from the Monster Jam truck “Scarlet Bandit”, so the theme of the site is red and I now own the domain www.codingbandit.com . Moving to hosting my own blog also gives me more flexibility, I can now display badges on my blog which I know sounds like a small thing, but it’s very freeing to have the ability to do this now. I hope to be more active blogger this year.

Here’s to 2009, I am confident this will be a truly amazing year!

WPF Data Templates Part 4 - Template Selectors

The Admin — Sun, 16 Nov 2008 03:26:00 GMT

*Note - Class Definition and sample data used in this example are provided in this previous blog post.

Template Selectors allow you to switch the Data Template used on an item being bound based on some logic. For instance, in a banking application, you may wish an account that has a negative balance to be highlighted with a red background in order to draw the attention of the user. Other positive balance accounts can be rendered using a different, milder looking template. To implement a Template Selector, use inheritance through extending the System.Windows.Controls.DataTemplateSelector and overriding the SelectTemplate method. The signature of the method is as follows:

 
 public override System.Windows.DataTemplate SelectTemplate(object item, System.Windows.DependencyObject container)

In this case, item is the actual object being bound. You can analyze the properties of the object to determine which template to use when rendering. In this example, the data template selector will be performing logic on the ImageFavorite class to determine which template to use. Two data templates have been defined in resources, one being a summary view defined by the SimpleTemplate key, and a more detailed view defined by the DetailedTemplate key. The logic of the RatedImageTemplateSelector is if the item [ImageFavorite] being bound has a 5 star rating, utilize the detailed template, otherwise have it render using the simple template. The listing for the RatedImageTemplateSelector is as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Controls;
using System.Windows;
 
namespace TemplateSelector
{
 public class RatedImageTemplateSelector : DataTemplateSelector
 {
 public override System.Windows.DataTemplate SelectTemplate(object item, System.Windows.DependencyObject container)
 {
 ImageFavorite obj = item as ImageFavorite;
 ContentPresenter pres = container as ContentPresenter;
 DataTemplate dataTemplate;
 
 if (obj.ImageRating == 5)
 dataTemplate = pres.FindResource("DetailedTemplate") as DataTemplate;
 else
 dataTemplate = pres.FindResource("SimpleTemplate") as DataTemplate;
 
 return dataTemplate;
 }
 }
}

In order to utilize the template selector, you need to first declare its namespace in the window tag of the xaml file where it is being used. In this case the namespace is TemplateSelector which resides in the current project assembly:

xmlns:local="clr-namespace:TemplateSelector"

Then define an instance of the template selector in resources:

<local:RatedImageTemplateSelector x:Key="RatedImageTemplateSelector" />

This instance of the RatedImageTemplateSelector can now be used by the list box rendering ImageFavorite items by assigning it to the ItemTemplateSelector attribute:

<ListBox x:Name="lbResults" Grid.Row="1" Grid.Column="0" Height="240"
 HorizontalContentAlignment="Stretch" 
 ItemsSource="{StaticResource FavoriteImages}"
 ItemTemplateSelector="{StaticResource RatedImageTemplateSelector}" />

Screen shot of two different data templates being rendered in a list box based on logic defined in a template selector:

Sample code for this example can be found here

WPF Data Templates Part 3 - Switching Data Templates at Runtime

The Admin — Sun, 16 Nov 2008 01:14:00 GMT

*Note - Class Definition and sample data used in this example are provided in this previous blog post.

It's a known fact that users like to have options. Sometimes one user is more familiar with the data being displayed than another, and would to see only a summary of the data. New users of the application may prefer to see a more detailed view of the data. WPF makes it easy to define multiple Data Templates and switch them out based on user preference. To do this, you can define Data Templates as resources, and reference them by key to use them. These data templates are defined in Window.Resources:

<DataTemplate x:Key="DetailedTemplate">
 <Border BorderBrush="Blue" Margin="3" Padding="3" BorderThickness="2" CornerRadius="5" Background="Beige">
 <StackPanel Orientation="Horizontal">
 <Image Margin="10" Width="250" Height="200" Stretch="Fill" Source="{Binding Path=ImageHref}">
 <Image.BitmapEffect>
 <DropShadowBitmapEffect />
 </Image.BitmapEffect>
 </Image>
 <StackPanel Orientation="Vertical" VerticalAlignment="Center">
 <TextBlock FontSize="25" Foreground="Goldenrod" Text="{Binding Path=ImageName}" />
 <Label Content="{Binding Path=ImageRating,Converter={StaticResource RatingConverter}}" />
 </StackPanel>
 </StackPanel>
 </Border>
</DataTemplate>
 
<DataTemplate x:Key="SimpleTemplate">
 <Border BorderBrush="Blue" Margin="3" Padding="3" BorderThickness="2" CornerRadius="5" Background="Beige">
 <StackPanel HorizontalAlignment="Center">
 <Image Margin="10" Width="250" Height="200" Stretch="Fill" Source="{Binding Path=ImageHref}">
 <Image.BitmapEffect>
 <DropShadowBitmapEffect />
 </Image.BitmapEffect>
 </Image>
 </StackPanel>
 </Border>
</DataTemplate>

You can set the default Data Template of the list box directly in XAML using its ItemTemplate property and referencing the desired template from resources identified by its key [in this case we are starting out with the summary template defined by the SimpleTemplate key in resources]:

<ListBox x:Name="lbResults" Grid.Row="1" Grid.Column="0" Height="240" 
 HorizontalContentAlignment="Stretch" ItemsSource="{StaticResource FavoriteImages}" 
 ItemTemplate="{StaticResource SimpleTemplate}" />

Next we'll add buttons to the screen so that the user can toggle the Summary and Detail view of the data being contained by the List Box.

<Button Content="Details" Margin="5,0,0,0" x:Name="btnDetail" Click="btnDetail_Click" />
<Button Content="Summary" Margin="5,0,0,0" x:Name="btnSummary" Click="btnSummary_Click" />

In the code-behind, by reacting to user actions, we can now change the Data Template of the list box by pulling the desired Data Template programmatically from resources and changing the ItemTemplate property value:

private void btnDetail_Click(object sender, RoutedEventArgs e)
{
 //pull the detailed template from resources, identified by the DetailedTemplate key
 DataTemplate detail = this.FindResource("DetailedTemplate") as DataTemplate;
 lbResults.ItemTemplate = detail;
}
 
private void btnSummary_Click(object sender, RoutedEventArgs e)
{
 //pull the summary template from resources, identified by the SimpleTemplate key
 DataTemplate summary = this.FindResource("SimpleTemplate") as DataTemplate;
 lbResults.ItemTemplate = summary;
}

Summary Template:

Detailed Template:

Full source code for this sample is available here.