Rick.Brain.Flush()

WPF Single Row Tab Control

admin — Fri, 06 Nov 2009 06:15:23 -0700

I’ve been working through a few UI related requests on my current project. One such request is to alter the appearance of the WPF TabControl to have a single row of tabs. The default behavior is to wrap the tabs beyond the single line as space is needed.

This is the default behavior

I’d like mine to look more like this:

So it may have taken a little while to figure it out…but now I know…and I will share with the world.

The first thing you need to do is have an empty window and add a TabControl to it.

        1: <Window

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

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

       4:     x:Class="WpfApplication2.TabWindow"

       5:     x:Name="Window"

       6:     Title="TabWindow"

       7:     Width="640" Height="480"> 

       8:  

       9:     <Grid x:Name="LayoutRoot">

      10:         <TabControl>

      11:             <TabItem Header="TabItem">

      12:                 <Grid/>

      13:             </TabItem>

      14:             <TabItem Header="TabItem">

      15:                 <Grid/>

      16:             </TabItem>

      17:         </TabControl>

      18:     </Grid>

      19: </Window>

Next you need to edit the template for the TabControl. To do this in Blend 3, select the TabControl and expand the Miscellaneous section on the properties window. Toward the bottom, there will be an property for Template. Click in the little square box beside the entry field for template and select “convert to new resource”. This will open a dialog window for the location you’d like to place the new template resource. I just chose the same document. I named the template “ScrollableTabControlTemplate”

This will create a section of XAML in your window that specifies the appearance of the TabControl. To be able to edit this new resource, you have to once again click on that box next to template and this time select “Edit Resource”. This will change the designer to focus on the TabControl Template that you are working with. Note that the root of the elements in the Objects and Timelines window is the ControlTemplate now instead of Window. When you break it down, the TabControl is a Grid that has 2 columns, 2 rows, a TabPanel, and a border that contains the content.

       1: <ControlTemplate x:Key="ScrollableTabControlTemplate" TargetType="{x:Type TabControl}">

       2:             <Grid ClipToBounds="True" SnapsToDevicePixels="True" KeyboardNavigation.TabNavigation="Local">

       3:                 <Grid.ColumnDefinitions>

       4:                     <ColumnDefinition x:Name="ColumnDefinition0"/>

       5:                     <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>

       6:                 </Grid.ColumnDefinitions>

       7:                 <Grid.RowDefinitions>

       8:                     <RowDefinition x:Name="RowDefinition0" Height="Auto"/>

       9:                     <RowDefinition x:Name="RowDefinition1" Height="*"/>

                </Grid.RowDefinitions>

                <TabPanel x:Name="HeaderPanel" Margin="2,2,2,0" IsItemsHost="True" Panel.ZIndex="1" Grid.Column="0" Grid.Row="0" KeyboardNavigation.TabIndex="1"/>

                <Border x:Name="ContentPanel" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="0" Grid.Row="1" KeyboardNavigation.DirectionalNavigation="Contained" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">

                    <ContentPresenter x:Name="PART_SelectedContentHost" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Content="{TemplateBinding SelectedContent}" ContentSource="SelectedContent" ContentStringFormat="{TemplateBinding SelectedContentStringFormat}" ContentTemplate="{TemplateBinding SelectedContentTemplate}"/>

                </Border>

            </Grid>

            <ControlTemplate.Triggers>

                <Trigger Property="TabStripPlacement" Value="Bottom">

                    <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="1"/>

                    <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>

                    <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>

                    <Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>

                    <Setter Property="Margin" TargetName="HeaderPanel" Value="2,0,2,2"/>

                </Trigger>

                <Trigger Property="TabStripPlacement" Value="Left">

                    <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>

                    <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>

                    <Setter Property="Grid.Column" TargetName="HeaderPanel" Value="0"/>

                    <Setter Property="Grid.Column" TargetName="ContentPanel" Value="1"/>

                    <Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>

                    <Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>

                    <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>

                    <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>

                    <Setter Property="Margin" TargetName="HeaderPanel" Value="2,2,0,2"/>

                </Trigger>

                <Trigger Property="TabStripPlacement" Value="Right">

                    <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>

                    <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>

                    <Setter Property="Grid.Column" TargetName="HeaderPanel" Value="1"/>

                    <Setter Property="Grid.Column" TargetName="ContentPanel" Value="0"/>

                    <Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>

                    <Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>

                    <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>

                    <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>

                    <Setter Property="Margin" TargetName="HeaderPanel" Value="0,2,2,2"/>

                </Trigger>

                <Trigger Property="IsEnabled" Value="False">

                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>

                </Trigger>

            </ControlTemplate.Triggers>

        </ControlTemplate>

  

I zeroed in on the TabPanel.  (Line XX above) This is where the tabs exist.  So in order to be able to put them in a single row, I simply wrapped the TabPanel with a ScrollViewer control.  I set the vertical scroll bar to disabled and the horizontal scrollbar to Auto.  

  

<Grid ClipToBounds="True" SnapsToDevicePixels="True" KeyboardNavigation.TabNavigation="Local">

                <Grid.ColumnDefinitions>

                    <ColumnDefinition x:Name="ColumnDefinition0"/>

                    <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>

                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>

                    <RowDefinition x:Name="RowDefinition0" Height="Auto"/>

                    <RowDefinition x:Name="RowDefinition1" Height="*"/>

                </Grid.RowDefinitions>

                <ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">

                    <TabPanel x:Name="HeaderPanel" Margin="2,2,2,0" IsItemsHost="True" Panel.ZIndex="1" Grid.Column="0" Grid.Row="0" KeyboardNavigation.TabIndex="1"/>

                </ScrollViewer>

                <Border x:Name="ContentPanel" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="0" Grid.Row="1" KeyboardNavigation.DirectionalNavigation="Contained" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">

                    <ContentPresenter x:Name="PART_SelectedContentHost" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Content="{TemplateBinding SelectedContent}" ContentSource="SelectedContent" ContentStringFormat="{TemplateBinding SelectedContentStringFormat}" ContentTemplate="{TemplateBinding SelectedContentTemplate}"/>

                </Border>

            </Grid>

  

Now that will give us a pretty ugly horizontal scrollbar if we run the application.  We don’t like ugly so now we have to change the template for that ScrollViewer.  Follow the steps that we did for the TabControl Template and create a new resource for the ScrollViewer.  I named mine “ScrollViewerTemplate”.  Now I once again drilled down into the new template I created by selecting “Edit Resource” from the properties window.  

  

<ControlTemplate x:Key="ScrollViewerTemplate" TargetType="{x:Type ScrollViewer}">

            <Grid x:Name="Grid" Background="{TemplateBinding Background}">

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="*"/>

                    <ColumnDefinition Width="Auto"/>

                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>

                    <RowDefinition Height="*"/>

                    <RowDefinition Height="Auto"/>

                </Grid.RowDefinitions>

                <Rectangle x:Name="Corner" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Grid.Column="1" Grid.Row="1"/>

                <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Grid.Column="0" Grid.Row="0" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False"/>

                <ScrollBar x:Name="PART_VerticalScrollBar" Cursor="Arrow" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Grid.Column="1" Grid.Row="0" ViewportSize="{TemplateBinding ViewportHeight}" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" AutomationProperties.AutomationId="VerticalScrollBar"/>

                <ScrollBar x:Name="PART_HorizontalScrollBar" Cursor="Arrow" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Grid.Column="0" Grid.Row="1" Orientation="Horizontal" ViewportSize="{TemplateBinding ViewportWidth}" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" AutomationProperties.AutomationId="HorizontalScrollBar"/>

            </Grid>

        </ControlTemplate>



As you can see, several controls exist in this template. There’s a rectangle, a content presenter and two scrollbars. I know I’m not going to need the vertical scrollbar, so I deleted it. If you run your application now, you’ll actually see the horizontal scrollbar. This is still a bit ugly. As I’ve said before, we don’t like ugly.

So to get rid of this, we need to change the template for the horizontal scrollbar. Before we do that though, let’s look at how the scrollbar exists in relation to the content. If you notice there is a grid in this ScrollViewerTemplate. It has two rows. We don’t want two rows, we want one row with the left button on the left, the right button on the right and all the tabs in between. Ok, so let’s delete the second row, put the horizontal scroll bar in the first row and then indent the ScrollContentPresenter by changing the margin. Now this is important. If we leave the scrollbar declared below the ScrollContentPresenter in the XAML, then when this renders, the scrollbar will be in front of the tabs because they are in the same row of the grid now. This is unacceptable, so we have to move the declaration of the scrollbar to above the ScrollContentPresenter

       1: <ControlTemplate x:Key="ScrollViewerTemplate" TargetType="{x:Type ScrollViewer}">

       2:     <Grid x:Name="Grid" Background="{TemplateBinding Background}">

       3:         <Grid.ColumnDefinitions>

       4:             <ColumnDefinition Width="*"/>

       5:             <ColumnDefinition Width="Auto"/>

       6:         </Grid.ColumnDefinitions>

       7:         <Grid.RowDefinitions>

       8:             <RowDefinition Height="*"/>

       9:         </Grid.RowDefinitions>

      10:         <Rectangle x:Name="Corner" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Grid.Column="1" Grid.Row="1"/>

      11:         <ScrollBar x:Name="PART_HorizontalScrollBar" Cursor="Arrow" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Grid.Column="0" Grid.Row="0" Orientation="Horizontal" ViewportSize="{TemplateBinding ViewportWidth}" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" AutomationProperties.AutomationId="HorizontalScrollBar"/>

      12:         <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" Margin="15,2,15,0" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Grid.Column="0" Grid.Row="0" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False"/>                

      13:     </Grid>

      14: </ControlTemplate>

So here we are. we have a scrollbar that is behind our tabs and only looks a little funny

Let’s finish this up by changing the template for the horizontal scroll bar. This is done the same way we did the other two templates. We’ll get this by default:

       1: <ControlTemplate x:Key="HorizontalScrollBarTemplate" TargetType="{x:Type ScrollBar}">

       2:             <Grid x:Name="Bg" SnapsToDevicePixels="True" Background="{TemplateBinding Background}">

       3:                 <Grid.ColumnDefinitions>

       4:                     <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>

       5:                     <ColumnDefinition Width="1E-05*"/>

       6:                     <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>

       7:                 </Grid.ColumnDefinitions>

       8:                 <RepeatButton IsEnabled="{TemplateBinding IsMouseOver}" Command="ScrollBar.LineLeftCommand" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="LeftArrow">

       9:                     <RepeatButton.Style>

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

                            <Setter Property="OverridesDefaultStyle" Value="True"/>

                            <Setter Property="Focusable" Value="False"/>

                            <Setter Property="IsTabStop" Value="False"/>

                            <Setter Property="Template">

                                <Setter.Value>

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

                                        <Microsoft_Windows_Themes:ScrollChrome x:Name="Chrome" SnapsToDevicePixels="True" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph}"/>

                                    </ControlTemplate>

                                </Setter.Value>

                            </Setter>

                        </Style>

                    </RepeatButton.Style>

                </RepeatButton>

                <Track x:Name="PART_Track" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Column="1">

                    <Track.DecreaseRepeatButton>

                        <RepeatButton Command="ScrollBar.PageLeftCommand">

                            <RepeatButton.Style>

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

                                    <Setter Property="OverridesDefaultStyle" Value="True"/>

                                    <Setter Property="Background" Value="Transparent"/>

                                    <Setter Property="Focusable" Value="False"/>

                                    <Setter Property="IsTabStop" Value="False"/>

                                    <Setter Property="Template">

                                        <Setter.Value>

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

                                                <Rectangle Fill="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>

                                            </ControlTemplate>

                                        </Setter.Value>

                                    </Setter>

                                </Style>

                            </RepeatButton.Style>

                        </RepeatButton>

                    </Track.DecreaseRepeatButton>

                    <Track.IncreaseRepeatButton>

                        <RepeatButton Command="ScrollBar.PageRightCommand">

                            <RepeatButton.Style>

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

                                    <Setter Property="OverridesDefaultStyle" Value="True"/>

                                    <Setter Property="Background" Value="Transparent"/>

                                    <Setter Property="Focusable" Value="False"/>

                                    <Setter Property="IsTabStop" Value="False"/>

                                    <Setter Property="Template">

                                        <Setter.Value>

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

                                                <Rectangle Fill="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>

                                            </ControlTemplate>

                                        </Setter.Value>

                                    </Setter>

                                </Style>

                            </RepeatButton.Style>

                        </RepeatButton>

                    </Track.IncreaseRepeatButton>

                    <Track.Thumb>

                        <Thumb Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="HorizontalGripper">

                            <Thumb.Style>

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

                                    <Setter Property="OverridesDefaultStyle" Value="True"/>

                                    <Setter Property="IsTabStop" Value="False"/>

                                    <Setter Property="Template">

                                        <Setter.Value>

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

                                                <Microsoft_Windows_Themes:ScrollChrome x:Name="Chrome" SnapsToDevicePixels="True" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsDragging}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph}"/>

                                            </ControlTemplate>

                                        </Setter.Value>

                                    </Setter>

                                </Style>

                            </Thumb.Style>

                        </Thumb>

                    </Track.Thumb>

                </Track>

                <RepeatButton IsEnabled="{TemplateBinding IsMouseOver}" Command="ScrollBar.LineRightCommand" Grid.Column="2" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="RightArrow">

                    <RepeatButton.Style>

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

                            <Setter Property="OverridesDefaultStyle" Value="True"/>

                            <Setter Property="Focusable" Value="False"/>

                            <Setter Property="IsTabStop" Value="False"/>

                            <Setter Property="Template">

                                <Setter.Value>

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

                                        <Microsoft_Windows_Themes:ScrollChrome x:Name="Chrome" SnapsToDevicePixels="True" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph}"/>

                                    </ControlTemplate>

                                </Setter.Value>

                            </Setter>

                        </Style>

                    </RepeatButton.Style>

                </RepeatButton>

            </Grid>

            <ControlTemplate.Triggers>

                <Trigger Property="IsEnabled" Value="False">

                    <Setter Property="Background" TargetName="Bg" Value="#FFF4F4F4"/>

                </Trigger>

            </ControlTemplate.Triggers>

        </ControlTemplate>

It’s big, and we don’t need a lot of it. The first thing I did was get rid of the “PART_Track” in the middle. We won’t see that part anyway. Next, I changed the commands of both of the RepeatButtons. The one on the left should be “ScrollBar.PageLeftCommand” and the one on the right should be “ScrollBar.PageRightCommand” I decided to use Page Right/Left because the moving by line wasn’t fast enough.

The next thing I did was completely change the way the RepeatButtons look. I did this by taking out the “Microsoft_Windows_Themes:ScrollCrhome” control and replacing it with a Border and Path control. We can more intimately control the colors and design this way. Next I gave the parent Grid control a static “Black” background.

       1: <ControlTemplate x:Key="HorizontalScrollBarTemplate" TargetType="{x:Type ScrollBar}">

       2:     <Grid x:Name="Bg" SnapsToDevicePixels="True" Background="Black">

       3:         <Grid.ColumnDefinitions>

       4:             <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>

       5:             <ColumnDefinition Width="1E-05*"/>

       6:             <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>

       7:         </Grid.ColumnDefinitions>

       8:         <RepeatButton IsEnabled="{TemplateBinding IsMouseOver}" Command="ScrollBar.PageLeftCommand" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="LeftArrow">

       9:             <RepeatButton.Style>

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

                    <Setter Property="OverridesDefaultStyle" Value="True"/>

                    <Setter Property="Focusable" Value="False"/>

                    <Setter Property="IsTabStop" Value="False"/>

                    <Setter Property="Template">

                        <Setter.Value>

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

                                <Border Background="{x:Null}" Height="18" Width="18" >

                                    <Path Data=" M 8 15 L 8 3 L 2 9 Z" Fill="White" />

                                </Border>

                            </ControlTemplate>

                        </Setter.Value>

                    </Setter>

                </Style>

            </RepeatButton.Style>

        </RepeatButton>

        <RepeatButton IsEnabled="{TemplateBinding IsMouseOver}" Command="ScrollBar.PageRightCommand" Grid.Column="2" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="RightArrow">

            <RepeatButton.Style>

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

                    <Setter Property="OverridesDefaultStyle" Value="True"/>

                    <Setter Property="Focusable" Value="False"/>

                    <Setter Property="IsTabStop" Value="False"/>

                    <Setter Property="Template">

                        <Setter.Value>

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

                                <Border Background="{x:Null}" Height="18" Width="18" >

                                    <Path Data=" M 9 15 L 9 3 L 15 9 Z" Fill="White" />

                                </Border>

                            </ControlTemplate>

                        </Setter.Value>

                    </Setter>

                </Style>

            </RepeatButton.Style>

        </RepeatButton>

    </Grid>

    <ControlTemplate.Triggers>

        <Trigger Property="IsEnabled" Value="False">

            <Setter Property="Background" TargetName="Bg" Value="#FFF4F4F4"/>

        </Trigger>

    </ControlTemplate.Triggers>

</ControlTemplate>

That’s all I had to do. I ended up with the following design. The buttons work, I don’t have multiple rows of tabs. I’m a happy camper. There are a ton of other design opportunities. This was just a quick one that was fairly easy to demonstrate.

Download Complete File

Software Engineering 101 – September 23rd

admin — Sat, 22 Aug 2009 05:18:09 -0700

Jim Holmes and a few local technology leaders are organizing a one-day, free event to evangelize building the basics of software development. These are skills that every developer should have. If you can make it to this event, please do. For details check Jim’s blog post

Jose Paul is blogging

admin — Thu, 20 Aug 2009 04:37:58 -0700

A friend and coworker of mine has a blog. He focuses mainly on Silverlight right now. I would certainly recommend checking his posts out about a custom timeline visualization control that he created.

Jose’s blog is located: http://codeforward.blogspot.com/

Silverlight Effects

admin — Wed, 29 Jul 2009 03:33:10 -0700

We’re going to take a look at the new Silverlight 3.0 Effects.

Effects were a concept introduced to Silverlight in version 3.0. They are intended to create a visual stimulus to alter or distort an element in your Silverlight application. Visual stimulus are very useful when attempting to attract or distract a user’s focus to a specific part of the application.

Out of the box, there are 2 kinds of effects: BlurEffect and DropShaddowEffect. These effects are useful in a wide variety of applications. Since I spend my day working with Silverlight in line of business applications, we’ll investigate how to leverage these two effects appropriately in a line of business application.

Most line of business applications end up having some type of data grid to display data. If you read Jeff Blankenburg’s blog, he discussed Silverlight Charting on Day #15. Now, we have the opportunity to make our charts pop off the page in not one but two different ways.

Setup

Here’s our scenario. There is a team lead who needs to track the way that hours are spent on specific tasks on a software development project. Not to muddy up the issue, let’s assume that there are only three ways to work on a specific task: Design, Implementation, and Quality Assurance. Remember this is an example for Silverlight not a discussion on team mechanics.

So it sounds like we’ll need a class to hold this information so we’ll create this class as follows:

        1: public class Task

       2:  {

       3:      public string Name { get; set; }

       4:      public int DesignHours { get; set; }

       5:      public int ImplementationHours { get; set; }

       6:      public int QualityAssuranceHours { get; set; }

       7:      public List<KeyValuePair<string, int>> Values

       8:      {

       9:          get

      10:          {

      11:              return new List<KeyValuePair<string, int>>{

      12:                  new KeyValuePair<string, int>("Design Hours", DesignHours),

      13:                  new KeyValuePair<string, int>("Implementation Hours", ImplementationHours),

      14:                  new KeyValuePair<string, int>("QA Hours", QualityAssuranceHours)

      15:              };

      16:  

      17:  

      18:          }

      19:      }

      20:  

      21:  }

Next, we need to create a DataGrid that has 4 columns:

Task Name
Design Hours
Implementation Hours
Quality Assurance Hours

Here is the XAML to put that together:

       1: <UserControl x:Class="ApplyingEffects.Silverlight.MainPage"

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

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

       4:              xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

       5:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

       6:     mc:Ignorable="d" d:DesignWidth="500" d:DesignHeight="400">

       7:     <Grid x:Name="LayoutRoot" Width="400" Height="200">

       8:         <Grid.RowDefinitions>

       9:             <RowDefinition Height="*"/>

      10:         </Grid.RowDefinitions>

      11:         <Controls:DataGrid x:Name="Grid" AutoGenerateColumns="False" Grid.Row="0">

      12:             <Controls:DataGrid.Columns>

      13:                 <Controls:DataGridTextColumn x:Name="NameColumn" Header="Name" Binding="{Binding Path=Name}"/>

      14:                 <Controls:DataGridTextColumn x:Name="DesignColumn" Header="Design Hours" Binding="{Binding Path=DesignHours}"/>

      15:                 <Controls:DataGridTextColumn x:Name="ImplementationColumn" Header="Implementation Hours" Binding="{Binding Path=ImplementationHours}"/>

      16:                 <Controls:DataGridTextColumn x:Name="QualityAssuranceColumn" Header="QA Hours" Binding="{Binding Path=QualityAssuranceHours}"/>

      17:             </Controls:DataGrid.Columns>

      18:         </Controls:DataGrid>

      19:     </Grid>

      20: </UserControl>

To make things easy, let’s create the data to populate this DataGrid in the constructor:

       1: public MainPage()

       2:     {

       3:         InitializeComponent();

       4:         Grid.ItemsSource = new List<Task>{

       5:             new Task{Name="Task A", DesignHours = 4, ImplementationHours = 12, QualityAssuranceHours = 1},

       6:             new Task{Name="Task B", DesignHours = 6, ImplementationHours = 10, QualityAssuranceHours = 8},

       7:             new Task{Name="Task C", DesignHours = 8, ImplementationHours = 8, QualityAssuranceHours = 16},

       8:             new Task{Name="Task D", DesignHours = 10, ImplementationHours = 6, QualityAssuranceHours = 32},

       9:             new Task{Name="Task E", DesignHours = 12, ImplementationHours = 7, QualityAssuranceHours = 64},

      10:             new Task{Name="Task F", DesignHours = 14, ImplementationHours = 9, QualityAssuranceHours = 12}

      11:         };

      12:     }

If you run this, you can see that we have a populated DataGrid. Wonderful!

Now we just need to show a pie chart of the break down of hours. We do this because visual aids make our applications more useful and efficient for people to leverage. Let’s get started.

First, we need to break open our layout a bit and put a chart next to the DataGrid. I know there isn’t much room on our app but we’ll address that in a minute. For now, let’s create a small chart that will report the percentage of time that was spent on each category for a given task. To do that, we will add a chart to a canvas which we’ll add to the XAML (line 26-30). We also add a new row (line 11), two new column definitions (line 14-15).

       1: <UserControl x:Class="ApplyingEffects.Silverlight.MainPage"

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

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

       4:      xmlns:ChartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"

       5:      xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

       6:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

       7:     mc:Ignorable="d" d:DesignWidth="600" d:DesignHeight="400">

       8:     <Grid x:Name="LayoutRoot" Width="600" Height="400">

       9:         <Grid.RowDefinitions>

            <RowDefinition Height="*"/>

            <RowDefinition Height="Auto"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="400"/>

            <ColumnDefinition Width="200"/>

        </Grid.ColumnDefinitions>

        <Controls:DataGrid x:Name="Grid" AutoGenerateColumns="False" Grid.Row="0" Grid.Column="0">

            <Controls:DataGrid.Columns>

                <Controls:DataGridTextColumn x:Name="NameColumn" Header="Name" Binding="{Binding Path=Name}"/>

                <Controls:DataGridTextColumn x:Name="DesignColumn" Header="Design Hours" Binding="{Binding Path=DesignHours}"/>

                <Controls:DataGridTextColumn x:Name="ImplementationColumn" Header="Implementation Hours" Binding="{Binding Path=ImplementationHours}"/>

                <Controls:DataGridTextColumn x:Name="QualityAssuranceColumn" Header="QA Hours" Binding="{Binding Path=QualityAssuranceHours}"/>

            </Controls:DataGrid.Columns>

        </Controls:DataGrid>

        

        <Canvas x:Name="ChartCanvas" Grid.Row="0" Grid.Column="1">

            <ChartingToolkit:Chart Background="White" Grid.Row="0" x:Name="Chart" Title="{Binding SelectedItem.Name, ElementName=Grid}" BorderBrush="Gray" Margin="0" Canvas.Top="0" Canvas.Left="0" Width="400" Height="200">

                <ChartingToolkit:PieSeries ItemsSource="{Binding SelectedItem.Values, ElementName=Grid}" IndependentValueBinding="{Binding Key}" DependentValueBinding="{Binding Value}" />

            </ChartingToolkit:Chart>

        </Canvas>

    </Grid>

</UserControl>

Make sure to notice the binding on the control. This is a little different than the way we did it on Day #15. We’re binding the ItemsSource property to the SelectedItem.Values of the Grid Control. Silverlight will bind to the Values property of the selected Task object. We want the IndependentValueBinding and DependentValueBinding to be the Key and Value property of the List<T> of KeyValuePair<string, int> respectfully. At this point, it will look something like below.

The Effects

Personally, I think that the chart is too small. I also want it to pop out of the page a little. For this, we’ll add a button to line 25 above like this:

       1: <Button x:Name="btnToggle" HorizontalAlignment="Left" Width="100" Content="Make Bigger" Grid.Row="1" Grid.RowSpan="2" Click="btnToggle_Click"/>

We have an event handler for the Click Event that will do most of the work for us:

       1: private void btnToggle_Click(object sender, RoutedEventArgs e)

       2: {

       3:     if (Canvas.GetZIndex(ChartCanvas) == 100)

       4:     {

       5:         //Reduce Size

       6:         Canvas.SetZIndex(ChartCanvas, 1);

       7:        

       8:         Canvas.SetLeft(Chart, 0);

       9:         Chart.Width = 400;

      10:         Chart.Height = 200;

      11:         Chart.Effect = null;

      12:         btnToggle.Content = "Make Bigger";

      13:         Grid.Effect = null;

      14:     }

      15:     else

      16:     {

      17:         Canvas.SetZIndex(ChartCanvas, 100);

      18:         Canvas.SetZIndex(Chart, 100);

      19:         Canvas.SetLeft(Chart, -200);

      20:         Chart.Width = 600;

      21:         Chart.Height = 400;

      22:         Chart.Effect = new DropShadowEffect { BlurRadius = 8 };

      23:         btnToggle.Content = "Make Smaller";

      24:         Grid.Effect = new BlurEffect { Radius = 8 };

      25:     }

      26: }

What we’re doing is first determining if the Chart is already “popped” out. If it is, then we want to un-pop it back into place. On lines 6-10 and 17-21, we’re moving the chart around to give it the size and placement that we want. The sweet effects are made on lines 22 & 24.

These effects actually adjust the visible pixels. Silverlight gives you two effects out of the box but you can create your own if you so choose. As mentioned earlier, these two effects that Silverlight gives you are DropShaddowEffect and BlurEffect. Naturally, we want our chart to pop, so we’re going to give it a drop shaddow. This will give the user the illusion that the chart has moved toward them, thus grabbing their attention. Secondly, we want to detract the user from paying attention the grid. It’s not the focus here anyway. So we want to apply the BlurEffect to the grid. By adjusting the BlurRadius and Radius properties respectfully, we can change the depth and blurriness where we feel like it.

Here’s the finished product. Note if you click the “View Detail” button in a row, you can see the breakdown of hours allocated to a task in a pie chart. Notice also that box the chart is in floats over the data grid in what appears to be two completely different layers. To further pull attention to the chart, the DataGrid behind the chart is blurred out until the user closes the chart.

Summary

In this article we examined how we can apply Effects to Silverlight elements and why/when we would like to use Effects.

Code Download

Download the code.

Jeremiah Peschka Rocks the House

admin — Fri, 24 Jul 2009 04:35:56 -0700

As I do every month, I attended the Central Ohio .Net Developer Group (CONDG). Last night, Jeremiah Peschka of HMB gave a presentation that covered a topic that really pertains to every developer when creating a system. That topic is data interaction. Jeremiah spent some time talking about data storage and then focused on some data access strategies. The talk was titled “From Tables to Objects” I encourage you to check out the resources he’s pointed out online. If you have a chance to see him give this talk in the future, you should try.

Jeremiah has been working in the IT field since 2001 in a variety of roles as a UNIX system administrator, software developer/engineer/architect, and now database developer/DBA.

Outside of work, he is the group leader for CBusPASS, the local PASS chapter. he also works within the PASS organization as the organizer of the Application Development Virtual Chapter and he helps out however else he can. When he’s not volunteering his time to the community, he can be found writing blog posts, content for SQL Server Pedia, creating presentations, or learning more about information — how people find, use, store, and retrieve it. Ultimately, software is just a way to get data faster, apply meaning to data, and transform the data into information.

Using Yield

admin — Wed, 15 Jul 2009 05:46:57 -0700

Thanks to Joshua Flanagan, I finally understand the yield keyword in C#.

http://flimflan.com/blog/ThePowerOfYieldReturn.aspx

I’m Speaking at DevLink

admin — Wed, 08 Jul 2009 05:21:18 -0700

I’m speaking at DevLink on August 15th, 2009.

The devLink Technical Conference provides technical content of interest to Software Developers, Solution Architects, Database Administrators, Project Managers, Business Analysts, Technology Executives and IT professionals looking for the latest and greatest information available. You will have the opportunity to learn from industry experts from around the world. See cutting edge techniques to solve your development challenges today and build the next generation applications of tomorrow. No other local event, no corporate trainers, no one else will compare to devLink's standard of excellence and commitment to real-world, practical information designed to take your skills to the next level. Not only are we bringing all this cutting edge information to you in Nashville, but we are doing it for a fraction of the price you would pay at another conference.

DevLink is offered at an extremely great value. For only a $100 ticket, you get some awesome content from some awesome speakers/presenters. The connections that you can make are just out of this world. It is not often that you have the opportunity to discuss your technical interests/challenges with so many people of this caliber at one time. I strongly encourage you to attend if you have the chance.

You’ll be able to find me in several of the Silverlight, SharePoint, and iPhone topic sessions. If I’m not there, I’ll probably be found in Open Spaces. If you’re not familiar with open spaces, I encourage you to check out at least the opening circle at 9:00 am on Thursday August 13th.

I’ll have two talks.

Integrating jQuery into SharePoint: JQuery offers developers the ability to build rich, platform independent application interfaces for the web. SharePoint offers developers the ability to deliver scalable, productive solutions while not requiring the developer to create elaborate persistence layers. Put the two together and we'll see why JQuery + SharePoint is better than Peanut Butter & Chocolate.
Test Driven SharePoint Development:
Well tested applications are more efficiently maintained and enhanced. This is especially true when you are integrating with a third party system. We'll discuss the practices necessary to drive your development in SharePoint through effective, efficient unit tests.

If you’re interested on how to make your SharePoint applications more awesome or you are interested on how to make your SharePoint applications more easily maintained or enhanced, please attend my talks.

Rick has an iPhone

admin — Wed, 08 Jul 2009 05:03:58 -0700

If you’ve been following My Twitter Feed, it should not be a surprise that I’ve now purchased my first iPhone. In fact, I purchased two. (My wife also wanted to behold the awesome user experience that is included with an iPhone.) Recently, I’ve been reading Beginning iPhone Development by Dave Mark and Jeff LaMarche. I’m only on chapter 9 so this isn’t a review but so far I like it.

My ultimate goal is to begin producing some iPhone applications that make people’s lives easier, more efficient, or more entertaining. I don’t have any specific ideas yet but there seems to be a world of opportunity available to me. Hopefully, I’ll have something more substantial to talk about in a few months.

Twikini is an Awesome Windows Mobile Twitter Application

admin — Thu, 04 Jun 2009 05:19:04 -0700

So, it’s probably no secret that I’m a twitter addict. Unlike a lot of twitter addicts, my addiction is not for celebrity sleaze or news updates. Instead I use twitter as a social network much the way some people use Facebook or MySpace. My friends and colleagues that are on twitter are generally technical in nature. Having an in depth minute to minute relationship with these people has created a very tight-knit group of friends. So much so that I travel as much as 7 hours several times per year just to catch up face-to-face.

Recently, I landed on a client that filters out twitter.com. With no access via my computer, I undertook a deliberate and in depth search for a windows mobile client so that I could catch up on twitter (over my lunch break.) I tried a few different applications but I was having trouble finding one that would perform ~~well~~ super lightning fast, contained an interface that was easy to use, and worked on my winmobile 6.1 device.

Then came twikini. It was referred to me by one of my friends that I met through twitter and I quickly installed it. It is seriously the fastest running application I have on my phone. It’s slick, easy to navigate, and plain simple to use. It has multiple color schemes that allow me to customize the look and feel to allow me to use visual indicators to distinguish replies from standard feeds. Additionally, it integrates twitpic images and links very well.

I fully recommend trying twikini on the win mobile if you are interested in bettering your experience with twitter.

Silverlight Range Selector

admin — Wed, 27 May 2009 06:58:26 -0700

Recently, I’ve been working a lot with Silverlight. I just finished writing a couple of controls that change the way that users interact with common data types. With the recent advent of rich interfaces hosted on the web, an improvement in the way that users can interact with data is taking place. So, I’m experimenting with a way to select ranges of information.

When dealing with ranges, a classic HTML site may have a couple of drop downs that have a beginning and ending number, text, or date. This interaction paradigm isn’t necessarily the best but it was the best that was available to us as developers. People got used to it but it doesn’t mean that they like it.

When a person fundamentally thinks of a range of somethings, they typically think horizontally or vertically. A couple of dropdowns is not how they think. If the range is a series of numeric values then the user wants to see the entire list of possible values and then have the values that he/she wants to select be highlighted. Visually, this removes the responsibility of the person to determine if a number is between start and end. They only have to make sure it’s highlighted.

Here’s an example:

As you can see, I’m selecting 14 through 20. Instantly, I know that 17 is in my range, I don’t have to look at two drop downs, compare them. I also don’t have the error prone possibility of having the end number be less than my beginning number. These types of paradigm shifts are going to happen now that we have richer user experience possibilities.

When I started creating this control, the first thing I wanted to do was create an expandable block. To do this, we’ve really got several controls.

We have a Canvas that contains a Grid that has an empty border, and another border that contains a Grid that contains a Rectangle.

XAML:

  1: <Canvas x:Name="LayoutRoot" Background="Transparent">
  2:         <Grid Margin="0,2,0,2" MinWidth="20"
  3:                 x:Name="window" 
  4:                 VerticalAlignment="Center" MouseMove="WindowMouseMove" MouseLeftButtonDown="WindowMouseDown" MouseLeftButtonUp="WindowMouseUp" >
  5:             <Border CornerRadius="4,4,4,4" 
  6:                     Background="Transparent" 
  7:                     BorderBrush="Blue" BorderThickness="1" />
  8:             <Border CornerRadius="2,2,2,2" 
  9:                     Background="Transparent" Padding="4,0,4,0">
 10:                 <Grid x:Name="grd" Margin="3,0,3,0" MouseMove="BarMouseMove" MouseLeftButtonDown="BarMouseDown" MouseLeftButtonUp="BarMouseUp">
 11:                     <Grid.RowDefinitions>
 12:                         <RowDefinition Height="*" />
 13:                     </Grid.RowDefinitions>
 14:                     <Rectangle x:Name="rectangle" Opacity=".3" VerticalAlignment="Stretch">
 15:                         <Rectangle.Fill>
 16:                             <LinearGradientBrush EndPoint="1,1.2" StartPoint="1,0">
 17:                                 <GradientStop Color="LightBlue"/>
 18:                                 <GradientStop Color="Blue" Offset="1"/>
 19:                             </LinearGradientBrush>
 20:                         </Rectangle.Fill>
 21:                     </Rectangle>
 22:                 </Grid>
 23:             </Border>
 24:         </Grid>
 25:     </Canvas>

So that’s the layout. In the code, the major actions we’ve got to handle are the moving the selector bar and the resizing of the selector bar.

Let’s start with the resizing of the selector bar. there are three events that are important here. MouseDown, MouseUp, MouseMove.

When the mouse button goes down, we want to start resizing if the mouse is currently in the white space to the right or left of the rectangle.

  1: 
  2:         void WindowMouseDown(object sender, MouseButtonEventArgs e)
  3:         {
  4:             if (ResizeEnabled)
  5:             {
  6:                 // Capture the mouse
  7:                 ((FrameworkElement)sender).CaptureMouse();
  8:                 // Store the start position
  9:                 _initialResizePoint = e.GetPosition(Canvas);
 10:                 _initialWindowSize.Width = window.ActualWidth;
 11:                 _initialWindowLocation.X = Canvas.GetLeft(window);
 12:                 // Set resizing to true
 13:                 _isResizing = true;
 14:             }
 15:         }

Now, as the mouse moves (before the mouse button goes up), we want to resize to the left or right depending on the side the mouse is currently on.

  1:         void WindowMouseMove(object sender, MouseEventArgs e)
  2:         {
  3:             if (ResizeEnabled)
  4:             {
  5:                 if (!_isResizing)
  6:                 {
  7:                     Point pos = e.GetPosition(window);
  8:                     if (pos.X <= HotSpotWidth)
  9:                     {
 10:                         window.Cursor = Cursors.SizeWE;
 11:                         _resizeAnchor = ResizeAnchor.Left;
 12:                     }
 13:                     else if (pos.X >= (window.ActualWidth - HotSpotWidth))
 14:                     {
 15:                         window.Cursor = Cursors.SizeWE;
 16:                         _resizeAnchor = ResizeAnchor.Right;
 17:                     }
 18:                     else
 19:                     {
 20:                         window.Cursor = null;
 21:                         _resizeAnchor = ResizeAnchor.None;
 22:                     }
 23:                 }
 24:                 else
 25:                 {
 26:                     Point position = e.GetPosition(Canvas);
 27:                     if (Canvas != null && position.X <= Canvas.ActualWidth && position.X >= 0)
 28:                     {
 29:                         double deltaX = position.X - _initialResizePoint.X;
 30: 
 31:                         switch (_resizeAnchor)
 32:                         {
 33:                             case ResizeAnchor.Left:
 34:                                 ResizeLeft(deltaX);
 35:                                 break;
 36:                             case ResizeAnchor.Right:
 37:                                 ResizeRight(deltaX);
 38:                                 break;
 39:                         }
 40:                     }
 41:                     if (SelectionChanged != null)
 42:                     {
 43:                         SelectionChanged(Left, Right, _resizeAnchor == ResizeAnchor.Right ? Direction.Right : Direction.Left);
 44:                     }
 45:                 }
 46:             }
 47:         }

  1: 
  2: 
  3:         private void ResizeRight(double deltaX)
  4:         {
  5:             //Right = deltaX;
  6:             window.Width = Math.Min(Width - (_initialWindowLocation.X), Math.Max(_initialWindowSize.Width + deltaX, MinWindowWidth));
  7:         }
  8: 
  9:         private void ResizeLeft(double deltaX)
 10:         {
 11:             if ((_initialWindowSize.Width - deltaX) > MinWindowWidth)
 12:             {
 13:                 // fix to avoid to move the window when we reached the minimal width resizing from the left
 14:                 double maxX = _initialWindowLocation.X + (_initialWindowSize.Width - MinWindowWidth);
 15:                 Canvas.SetLeft(window, Math.Min(_initialResizePoint.X + deltaX, maxX));
 16:                 if (_initialResizePoint.X + deltaX < maxX)
 17:                 {
 18:                     window.Width = _initialWindowSize.Width - deltaX;
 19:                 }
 20:                 _initialWindowLocation.X = _initialResizePoint.X + deltaX;
 21:             }
 22:         }

Finally, when the mouse button goes up, we want to stop resizing the selector

  1: 
  2:         void WindowMouseUp(object sender, MouseButtonEventArgs e)
  3:         {
  4:             if ((ResizeEnabled) && (_isResizing))
  5:             {
  6:                 // Release the mouse
  7:                 ((FrameworkElement)sender).ReleaseMouseCapture();
  8:                 // Set resizing to false
  9:                 _isResizing = false;
 10:                 if (SelectionFinishedChange != null)
 11:                 {
 12:                     SelectionFinishedChange(Left, Right, _resizeAnchor == ResizeAnchor.Left ? Direction.Left : Direction.Right);
 13:                 }
 14:             }
 15:         }

This is the basic functionality. You can probably guess the implementation of the rest of the code but I’ll save you that effort and post the entire control as a silverlight project here.

Download File - RegionSelector

You can expose the Left and Right (Width + Left) properties of this selector control to determine the selected positions on a higher level grid and thus determining the selected values of a range.

I hope that this saves you the trouble that I went through to figure out mouse capturing and resizing.