Monday, 31 July 2006

A small tip today on how to access elements that are embedded within a control template. In my case for an itemscontrol class.
Consider the following Xaml:

<ItemsControl

    x:Class="Client.Framework.TijdslijnVisualizer.TijdslijnVisualisatie"

    xmlns:cf="clr-namespace:Client.Framework.TijdslijnVisualizer"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

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

    >

  <ItemsControl.Style>

    <Style TargetType="{x:Type ItemsControl}">

      <Setter Property="Template">

        <Setter.Value>

          <ControlTemplate TargetType="{x:Type ItemsControl}">

            <DockPanel LastChildFill="True">

              <Slider Name="slider" DockPanel.Dock="Right" Minimum="1" Maximum="10" Value="1" Orientation="Vertical" />

              <ScrollViewer Name="scroller" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="False">

                <cf:TijdslijnPanel Name="tijdslijnpanel"  IsItemsHost="True" zoomFactor="{Binding ElementName=slider, Path=Value }" />

              </ScrollViewer>

            </DockPanel>

          </ControlTemplate>

        </Setter.Value>

      </Setter>

    </Style>

  </ItemsControl.Style>

</ItemsControl>

 

In the code behind for this class you will not be able to simply get the to these elements with ease. Or at least, not until I realized that these elements were not set yet until the template was actually applied. If you try to find them after that, you will find them through the VisualTreeHelper.GetChild or a simple .FindName:

 

        public override void OnApplyTemplate()

        {

            base.OnApplyTemplate();

 

            this.slider = (Slider) this.Template.FindName("slider", this);

            this.scroller = (ScrollViewer) this.Template.FindName("scroller", this);

 

            // other stuff

        }

 

I hope this helps somebody out there!

 

Monday, 31 July 2006 14:46:33 (Romance Standard Time, UTC+01:00)  #    Comments [5]  |  Trackback
 Friday, 28 July 2006

Just a little tip, showcasing the power of Xaml and the efficiency of good code/design separation.

When you are fetching data from a server, you could (and actually should) use the DataModel-View-ViewModel pattern, as described by Dan Crevier from the Microsoft Max team. It uses a viewmodel-class to bind your Xaml against. Dan then implements a 'state' property to indicate whether the model is finished fetching and is in a 'bindable' state.

If you are short on time, or have other reasons not to implement such a strategy, you are probably binding straight to objects that are still Null during the fetch-action.
In either case, it would be nice to let the user know that data is being fetched.

In my case, I had a lot of <TabItem>'s that are being filled with data, one-by-one, by setting the datacontext directly. While designing the user interface, I do not want to have to think about the possibility of binding against an invalid object (it being null). So I created a style, that I put in the application resources. The style replaces my content-template with a temporary template, whilst in invalid state. I was extremely satisfied with the solution, because it was so dead-easy, and it works like a charm.

Here is the code (don't mock my visually stunning border please ;-) ):

    <Style BasedOn="{StaticResource {x:Type TabItem}}" TargetType="{x:Type TabItem}">

      <Style.Triggers>

        <Trigger Property="DataContext" Value="{x:Null}">

          <Setter Property="ContentTemplate">

            <Setter.Value>

              <DataTemplate>

                <Border CornerRadius="5" BorderThickness="2" BorderBrush="Black" Background="Yellow" Height="60" Width="280"

                        HorizontalAlignment="Center" VerticalAlignment="Center">

                  <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Data is being fetched</TextBlock>

                </Border>

              </DataTemplate>

            </Setter.Value>

          </Setter>

        </Trigger>

      </Style.Triggers>

    </Style>

I was pleasantly surprised by the simplicity of the code. The DataContext is used in a trigger to set the content-template.

Friday, 28 July 2006 14:48:29 (Romance Standard Time, UTC+01:00)  #    Comments [0]  |  Trackback
 Wednesday, 26 July 2006

Microsoft apparently had reasons not shipping WPF with a datepicker control. In my opinion such a control is of great importance when you are building applications. How can I sell a platform to a client when I have to explain that they won't be able to visually enter a date? (Or have to hire me to build such a control for them ;-) )
Some time ago I started a forum thread about this issue and the ATC Avalon responded by taking up the challenge and started working on a control. Why that team was dismissed is beyond me, but Kevin Moore finished where they left off. He has posted an update to his bag-of-tricks for the July CTP (they also work on the June CTP), and has included the datepicker sample!

I've quickly checked it out and it's looking great! I wish I could use empty dates though, but that should be easy to hack in.
Thanks Kevin!

Wednesday, 26 July 2006 09:42:24 (Romance Standard Time, UTC+01:00)  #    Comments [4]  |  Trackback
 Wednesday, 12 July 2006

I love Dependency Properties. Especially attached properties. There is just something extremely cool about being able to think up some property and then setting that in a datatemplate. For instance, creating a custom panel with your own attached properties, and reading these properties during the measure and arrange bits of the layout.
But when you do a get on the property, you will find your left with an unset value!

The backing mechanism for such properties use the object you set them on as a key. When you only have a UIElement, you can not read the value using the UIElement, because you never bound the property to a UIElement, but to your own visual in the datatemplate.
So always remember to use the original object when you are getting your value.

In the case of the UIElement in an itemscontrol, you will find that it is actually a wrapper around your original visual. Get to it by using the infamous visual tree helper:

DependencyObject o = VisualTreeHelper.GetChild(uie, 0);

Then use 'o' in your getvalue!

Wednesday, 12 July 2006 09:39:06 (Romance Standard Time, UTC+01:00)  #    Comments [0]  |  Trackback