Okoboji: a lake, a mythical university, Kevin Moore's blog : Longhorn

Robby and Me on Channel 9

okoboji — Mon, 20 Feb 2006 06:20:00 GMT

We're not nearly as entertaining as Don and Chris, but Robby and I are in another video on Channel 9 (our last one was on MSDN TV). This time we talk about our experiences with Windows programming, the web and the power/flexibility/extensibility of WPF. It was a fun conversation.

Robby is giving a talk at MIX this year. His PDC talk [ZIP, 144MB] was amazing. (Only Robby could weave vegetable peelers and the power of design.) Sign up for Mix while you can!

In the video we talk about CSS Zen Garden and a couple of panels I've written: TreeMapPanel (haven't tested it on the Jan CTP) and Animating Tile Panel (the latest update is in my Bag-O-Tricks).

In other news...

okoboji — Thu, 16 Feb 2006 11:18:00 GMT

Our friends from Max have been busy.

Not only are they cranking away at a beautiful WinFX app, but they're taking time to blog about their adventures.

Ben has blogged about IScrollInfo [Part 1, Part 2, Part 3]. If you are making your own panel and want a ScrollViewer to party over it, start here.

Dan is blogging about creating a virtualized panel (for putting lots of data in a list). [Part 1, Part 2, Part 3]

If you haven't heard, IE7 is beautiful. One of my first blog posts was about Mozilla 1.5. About the same time the IE team was getting rolling again. They have done some amazing work. Check it out.

Today Bea, Namita, and I met with some folks from the VB team to chat about integrating their new language features with WPF data binding. Wow! I know there are some C# guys out there laughing at VB. Guys and gals: download the demo. You may soon forget your love of semicolons. Mmm...XML inline with code...*drool*. (Oh, and check out Bea's post on doing grouping with ItemsControl. Very cool.)

Have you been reading about InfoCard? You should be. Kim is your man. Check out his blog.

On a personal note, I've been having fun updating the Bag-O-Tricks for our next public release. I stayed up late on Valentines Day hacking away as a Valentines gift to you, my loyal readers. I've added some new things that I've been asked about. I've also put all of the controls in an external library which includes default styles. This is for control authors that want to ship a control with its template in a single library.

Also, the team that built the WPF ListView has a bunch of samples that they should be posting very soon. People have been asking about a TreeView with columns. Let's just say the power of WPF composition will blow you away.

Stay tuned.

Avalon Simple Tree View, Part 2

okoboji — Sat, 02 Apr 2005 05:14:00 GMT

In my last post, I walked through creating a simple hierarchy using styles. Now, let's bring it to life. We want to add expand/collapse to our TreeViewItem (HeaderedItemsControl), but IsExpanded is not a property on HIC. We need to add one.

Let's go into the Window1.xaml.cs file and add two classes as peers to Window1. TreeView, which inherits from ItemsControl and TreeViewItem, which inherits from HeaderedItemsControl.

public partial class Window1 : Window { ... }

public class TreeView : ItemsControl { }

public class TreeViewItem : HeaderedItemsControl
{

}

Now things get fun. To enable expand/collapse we need to add a property to TreeViewItem...but not just a regular CLR property. To enable data binding and animation in Avalon, we need to create a DependencyProperty (DP). DPs are public, static, readonly. All DPs should follow the naming pattern [Property Name]Property. You register it with DependencyProperty.Register (clever, huh?). The first parameter is the name of the DP, in this case "IsExpanded". The second parameter is the type of the property, bool. The third is the owning class, TreeViewItem. And the fourth is FrameworkPropertyMetadata. The simplest override for this class just takes the default value of the property. In this case it's false.

public class TreeViewItem : HeaderedItemsControl
{
      public static readonly DependencyProperty IsExpandedProperty =
            DependencyProperty.Register(
            "IsExpanded",
            typeof(bool),
            typeof(TreeViewItem),
            new FrameworkPropertyMetadata(false));

      public bool IsExpanded
      {
            get { return (bool)GetValue(TreeViewItem.IsExpandedProperty); }
            set { SetValue(TreeViewItem.IsExpandedProperty, value); }
      }
}

Notice that we also create a regular CLR property for IsExpanded. While strictly speaking this is not required for XAML, it's a good idea for people who will use this control from code. Since the property engine in Avalon stores the value for us, we need to call a couple of functions to set/get the value.

Now back to the XAML.

We want to refer to our classes in XAML, but they are not part of the default control set in Avalon. We need to add an XML mapping and an associated XML namespace. The mapping goes at the top of the file. Notice it refers to the CLR namespace of the project "AvalonApplication1". We also define the XML namespace to map to, in this case "app". We also need to define another mapping that we will use in our controls. This goes in the Window element.

<?Mapping XmlNamespace="app" ClrNamespace="AvalonApplication1" ?>
<Window
      x:Class="AvalonApplication1.Window1"
      xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
      xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
      Text="TreeView"
      xmlns:tv="app">

Now we can refer to our new controls with the tv: prefix. Let's change our ItemsControl to tv:TreeView and our HeaderedItemsControls to tv:TreeViewItem. Make sure to change the references in the styles, too.

What's our game plan? We'd like to expand/collapse the child nodes based upon the IsExpanded property. We'd like to bind the IsExpanded property to the IsChecked property of the CheckBox. We'd also like to show/hide the checkbox based upon the existence of children.

Starting with the CheckBox. First we bind the IsChecked property of the CheckBox to the IsExpanded property of the StyledParent. (The StyledParent in this case is the TreeViewItem.) Next we set the Visibility to Hidden. Finally we give the CheckBox a StyleID so we can change the Visibility from a trigger.

The StackPanel is similar: Set the Visibility and give it a StyleID. Notice that we use Collapsed for the Visibility. This tells layout to not only not draw it, but also to not give it any space. Make sense?

Add a VisualTriggers section to the Style element. Our first PropertyTrigger will control the visibility of the CheckBox. TreeViewItem is an HeaderedItemsControl. HeaderedItemsControl has a bool property HasItems. We want to change the Visibility of ChildrenToggle (our CheckBox) to Visible when HasItems = True. Similarly, we want to make ExpandSite (our StackPanel with the child elements) visible when IsExpanded (our sole new property) is true.

<Style.VisualTriggers>
      <PropertyTrigger Property="HasItems" Value="True">
            <Set PropertyPath="Visibility" Value="Visible" Target="ChildrenToggle"/>
      </PropertyTrigger>
      <PropertyTrigger Property="IsExpanded" Value="True">
            <Set PropertyPath="Visibility" Value="Visible" Target="ExpandSite" />
      </PropertyTrigger>
</Style.VisualTriggers>

The effect is pretty cool. DataBinding pushes the value from the CheckBox to our new DependencyProperty. The DP pushes it's value to the ExpandSite and we have a functioning control.

Just to show that the added property can be set in XAML, I've set IsExpanded="True" on a couple of the TreeViewItems. Update: earlier I said that creating a CLR property for the new DP was not strictly required. Actually, if you want to be able to set the property in markup, you have to create a standard get/set. FYI.

<tv:TreeView Width="200" Height="200">
    <tv:TreeViewItem Header="Iowa">
        <tv:TreeViewItem Header="Okoboji"/>
        <tv:TreeViewItem Header="Milford"/>
        <tv:TreeViewItem Header="Des Moines"/>
    </tv:TreeViewItem>
    <tv:TreeViewItem Header="Washington" IsExpanded="True">
        <tv:TreeViewItem Header="Seattle" IsExpanded="True">
            <tv:TreeViewItem Header="Brasa"/>
            <tv:TreeViewItem Header="HaNa"/>
            <tv:TreeViewItem Header="Mama's"/>
        </tv:TreeViewItem>
        <tv:TreeViewItem Header="Redmond"/>
    </tv:TreeViewItem>
    <tv:TreeViewItem Header="California">
    </tv:TreeViewItem>
</tv:TreeView>

Avalon March CTP: Creating a simple TreeView

okoboji — Thu, 31 Mar 2005 22:56:00 GMT

I’m going to walk through creating a simple TreeView with the March CTP of Avalon.

First, the tools you need.

1) Visual C# Express

2) Avalon and Indigo Community Technology Preview - March 2005 (In a previous post, I’ve discussed how to crack the ISO.)

Let’s get started

First, create a new Avalon Application project in Visual C# Express. Open up the Window1.xaml file. You should see this:

<Window x:Class="AvalonApplication1.Window1"

xmlns="http://schemas.microsoft.com/winfx/avalon/2005"

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

Text="AvalonApplication1"

<Grid>

</Grid>

</Window>

The nice thing about TreeView: most of the object model one needs to build it already exists in shipping controls. The TreeView itself is just a collection of TreeViewItems. ItemsControl fits the bill here. Each TreeViewItem is just a header with a set of children, HeaderedItemsControl does the job.

Let’s start by laying out the controls. We’ll worry about how they look later.

<Grid>

</HeaderedItemsControl>

</HeaderedItemsControl>

</HeaderedItemsControl>

</ItemsControl>

</Grid>

You can run the application now, but it won’t be very exciting. By default, ItemsControl and HeaderedItemsControl don’t have styles. We have to provide them.

First, we add a <Grid.Resources> to the grid. Now we want to add a style for the ItemsControl. Let’s start with the inner elements and work out. We want the items to show up in a stack, top to bottom. We have a StackPanel that does just that. Setting the IsItemsHost property to true tells the ItemsControl to put its children in this StackPanel. We wrap the StackPanel in a ScrollViewer to get scroll bars. We wrap in ScrollViewer in a Border to make it all look pretty. Adding a LinearGradientBrush to the Border.Background is a great start.

Here’s the markup:

<Grid.Resources>

<Style>

<Style.VisualTree>

<Border.Background>

<LinearGradientBrush.GradientStops>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</Border.Background>

</ScrollViewer>

</Border>

</Style.VisualTree>

</Style>

</Grid.Resources>

Simple, huh?

We need one more style for the TreeView Items. We add another Style element. Just like for the ItemsControl, we add HeaderedItemsControl as the first element, telling the compiler this is the style for HeaderedItemsControls. The layout for the TreeViewItem is interesting. To get the tree shape, we use a 2-by-2 grid. The expand/collapse button goes in 0,0. We’ll use a checkbox for now. The Header content goes in 1,0. We use a ContentPresenter with the ContentSource property defined to grab the header content. The StackPanel with all of the items goes in 1,1. Again we use the IsItemsHost property to grab the sub-items.

Here’s the code:

<Grid.Resources>

<Style>

<Style.VisualTree>

<Grid>

<StackPanel Grid.Column="1" Grid.Row="1"

IsItemsHost="True"/>

</Grid>

</Style.VisualTree>

</Style>

...

That’s it.

What about supporting collapse/expand? What about styling the checkbox? Stay tuned.

When will Avalon include a TreeView? Also, stay tuned. While I can't make promises, getting TreeView in our control library is one of my review goals. :-)

London Avalon Enthusiasts Dinner

okoboji — Wed, 02 Feb 2005 07:58:00 GMT

Do you live in or around London?
Are you interested in Avalon?
Have you been playing with the November CTP?
Would you like to meet a Program Manager on the Avalon team? Ask questions, give feedback, make suggestions?

I’m going to be doing some travel (for pleasure) in Europe the end of this month. I’m in London a single night before I fly back to the States and I thought it would be great to meet Avalon enthusiasts (and aspiring enthusiasts) for dinner in London on Monday, 28 February. I’m thinking a bit late in the evening: perhaps 7 or 8pm.

If you are interested, please use the contact link to let me know you are interested (make sure to include your email address).

If you can recommend a good restaurant or pub that is centrally located that would be great.

I will make a list of people and send out details next week.

I’m excited to meet you and hear your feedback.

Cheers.

Coolest Channel 9 video I've ever seen...

okoboji — Wed, 03 Nov 2004 17:41:00 GMT

...but I really like the command prompt.

There have been a lot of posts about Monad on MSDN Blogs. Take a look at the demo on Channel 9.

http://channel9.msdn.com/ShowPost.aspx?PostID=25915

Very cool.

“I lost my girlfriend’s phone number.”

okoboji — Sat, 29 May 2004 21:28:00 GMT

Never underestimate the value of a catchy title. This entry is about Longhorn, though—specifically the work we are doing in People and Groups to bridge contact lists--not only between application, but between devices.

My good friend Jeremy, a PM on the IE team, came into my office on Thursday asking if I’ve seen his phone. He couldn’t find it. The funny part: he had no way to get a hold of his girlfriend. The only place he had her number was on his phone. Ironically, I had a related conversation the day before. I was eating noodles at a local restaurant and a group of nice young ladies invited me to join them for dinner. When one of them pulled out her cell phone I immediately went into user research mode.

Me: How many people do you have on your cell phone?

Her: I had 120, but I just cleaned it out. Now I have about 100.

Me: What would you do if you lost your phone?

Her: That happened to me once and it was tragic. Now I type the important people into an Excel spreadsheet so I don’t lose them.

When people I know lose their mobile devices, they are usually more upset about loosing their address list than of loosing an expensive toy.

“But Kevin,” you might ask, “What does this have to do with Longhorn?”

Great question. The people on my team are doing a great deal of work to make sure mobile devices (most importantly cell phones) integrate in powerful and useful ways with the Longhorn People and Group platform.

Last month our Development Manager gave a talk at WinHec entitled Communications In “Longhorn”: Telephony, Mobile Devices And HW/SW Integration. (PowerPoint slides)

The scenario target: One unified address book on all of my devices and communications applications.

I have contacts spread across three lists: my Outlook address book, my Messenger contact list, and my cell phone. They are not kept in sync. In the case of my phone, they are not backed up.

Wouldn’t it be cool if when I added a person to my contact list in Messenger I could easily add them to my cell phone? Wouldn’t it be great if loosing me cell phone didn’t mean I had to email all of my friends and ask them for their phone number (and hope you run into the people for whom you don’t have an email address?) Loosing your phone should be a great experience, because it gives you an excuse to get a Pocket PC Phone Edition.

Sadly, none of the members of the P&G sync team are blogging (yet). Free to post your comments, questions, and horror stories. I’ll pass them along.

One more...Ray seems to like Longhorn

okoboji — Tue, 25 Nov 2003 10:57:00 GMT

Ray Ozzie has an interesting perspective on Longhorn storage: moving to a common store may have the same benefits of using common protocols on the Internet.

I hope so!

Glass in IE6?!?

okoboji — Tue, 25 Nov 2003 10:43:00 GMT

Those of you lucky enough to attend the PDC keynote this year saw the cool glass effects we're working on for Longhorn. Well, you don't have to wait for Longhorn to get glass on your desktop. You can do it with IE right now!

http://w3future.com/2003/glass/glass.html

The author claims the use of nothing but "HTML, CSS a bit of JavaScript and a lot of Internet Explorer filters."

You need a fast machine, but it's pretty darn impressive.