Rick.Brain.Flush()

2010 Goals

admin — Mon, 04 Jan 2010 07:17:00 -0700

I was tagged by Jeremiah Peschka in his post about 2010 goals. So here’s my response.

I am a huge fan of goals. In my opinion if you don’t have a roadmap of where you want to go, there’s zero chance that you will end up anywhere near there. Goals are huge; they’re important; they’re critical to success. If you don’t have success, you have reached some degree of failure. And no one likes to be a failure. And they are VERY hard to create. There are several things that go into creating good goals. Lucky for you, I’ve created a 3-step process to help anyone create good goals.

1.) Plan

First, a long term plan is necessary before identifying annual goals. The term “long-term” is relative. I refuse to plan any further back professionally than I have professional history. So if I’ve been working for about 10 years, there’s no way to have a realistic 20 year plan. Quite often, it’s not realistic to have a valid 10 year plan. But in my case, I think it is possible.

In ten years, I want to be a noteworthy developer, leader, mentor, and manager in Central Ohio. I want to be someone that people look to for career, professional, and technical guidance.

Note a few attributes about my “long-term” plan. There’s nothing that is measureable, a few things are quite subjective. That’s because it’s my plan. I have definitions of terms like “noteworthy” and “that people look to” in my head. And that’s good enough. My plan in particular is very soft. When I was 1 year out of school, my one-year plan sounded more like “I want to be a good programmer and provide a value-added skill set to the project I’m on.” So I’ve gotten softer; I feel like my skill set has developed into that of a mentor, leader, and organizer. This is the most rewarding work I do on a day-to-day basis. I did intentionally leave “developer” in my plan because I write code, I do it well, I do it fast. But I work with a bunch of developers. Lots of people write code well and fast. I demand a lot of myself and one of those things is to be unique (noteworthy). So because of that, I don’t *just* code. I offer a unique multiplier to projects with my softer skills.

2.) Quantify

Goals should have measurable outcomes. These are completely different from plans. Goals have a definitive pass/fail quantifier. Some things are easy to quantify. Previous goals I’ve had are “Earn Certification XYZ by June 200X”. If I earn that specific certification by June of 200X, then I have attained my goal. If don’t earn it or earn it after June, I am a failure. There’s no gray area here. You are successful or a failure. That may be harsh but as soon as we get wishy washy on our definitions of success or failure, you end up with meaningless goals, no destination, and ultimately a wasted effort.

Here are my goals for 2010:

Read 6 books that are oriented to professional or technical development by December 31, 2010
Create an LLC to be a parent to potential side projects by March 1, 2010
Continue my 3 mentee relationships and meet with each person at least once per month during 2010
Create at least 1 online system that is built to provide a continuous revolving income stream to subsidize my personal income

And there you have it. 4 measurable goals. I’ll break them down to highlight the effort I put into the wording of my goals and to explain them in more detail.

Reading

I enjoy reading. I think that reading provides an excellent way to improve one’s self. I intend to once again read 6 books. I have a few in mind but don’t want to limit my self to those in case a better one pops up. I don’t change my goals. These will signify my success for the 2010 calendar year.

LLC

Over the past 3-4 years, I’ve had several ideas for small companies or services that require little to no maintenance or attention. Sometimes, these ideas would have produced a little bit of money and therefore would have required some type of business to own them. But because I am was a chicken, I’ve never created the LLC and therefore never followed through with my ideas. This year, I’ll create an LLC to host systems or services I have ideas about.

Mentoring

Mentoring is AWESOME. Helping people become more by providing guidance, leadership, education, and opportunities has been the most fun I’ve had in my professional career. I love doing it and I have recently established 3 relationships with people in that capacity. I want to continue this effort but “continue” isn’t quantifiable. I want to meet each month to make sure that progress is made… A meeting is quantifiable.

Online Service

This one is related to the LLC goal. I am currently working on a nice piece of software that will provide an interesting service. I fully expect to be able to release a production quality instance by May. I am hoping that creating one service will lead to additional ones.

3.) Measure

Throughout the year, these goals should be checked for status. This will create a motivational element throughout the year and remind you that you should be working hard to accomplish your goals and not be a failure. To be more specific, I like to keep a spreadsheet on my desktop that identifies the goals for the year and a list of achievements that are related and not related to those goals. This helps me keep track of how I’m doing and whether I can regard this year as a successful year. Additionally, it helps me provide the necessary information to my employer for my annual review. I tend to incorporate my goals into my company’s annual review process but I could certainly see that effort as optional.

Notes:

I also create personal goals. I’ve chosen not to share them in this venue. If you’re interested in talking about personal goals, hit me up via email or IM and I can share my unique view on personal goal setting as well

Conclusion

You now have 3 easy steps, some examples and some explanations. Get to work, become better at whatever you want to become better at.

CodeMash 2010, Here I Come

admin — Wed, 18 Nov 2009 22:25:49 -0700

I’ll be attending CodeMash early next year. Not only that but my AWESOME employer, HMB, is sending a total of 10 people to make sure that we can capitalize on the fantastic content that comes out of CodeMash each year. To further emphasize the role that this conference plays on HMB, HMB has 48 employees. That means that over 20% of our staff is being offered the opportunity to attend at no cost to the attendee.

If you’re interested in attending CodeMash, I recommend that you register early. This conference has a strong tradition of selling out. The speakers at this conference in particular are typically the best of breed for the given technology they are speaking on.

For information more than

CodeMash is a unique event that will educate developers on current practices, methodologies, and technology trends in a variety of platforms and development languages such as Java, .Net, Ruby, Python and PHP.

make sure you visit the CodeMash website.

I can also personally vouch for the PreCompiler even that happens the day prior to the conference. The PreCompiler is that part of a conference that everyone says “would have been cool if they had done …” Basically, some excellent teachers, subject matter experts, and technologists have volunteered their time to *show* you how they do best practices or develop software in a particular language/technology. There will be hands on sessions on TDD/BDD, Ruby, Coaching, the Software Craftsmanship, and a whole lot of other topics. I like to think of these sessions as “The best showing how they do what they do best” I recommend trying it out.

CodeMash is held at the Kalahari Resort in Sandusky, OH on Jan 13-15.

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.