Rick Kierner posted on November 6, 2009 06:15

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

image

I’d like mine to look more like this:

image

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="*"/>
  10:                 </Grid.RowDefinitions>
  11:                 <TabPanel x:Name="HeaderPanel" Margin="2,2,2,0" IsItemsHost="True" Panel.ZIndex="1" Grid.Column="0" Grid.Row="0" KeyboardNavigation.TabIndex="1"/>
  12:                 <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">
  13:                     <ContentPresenter x:Name="PART_SelectedContentHost" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Content="{TemplateBinding SelectedContent}" ContentSource="SelectedContent" ContentStringFormat="{TemplateBinding SelectedContentStringFormat}" ContentTemplate="{TemplateBinding SelectedContentTemplate}"/>
  14:                 </Border>
  15:             </Grid>
  16:             <ControlTemplate.Triggers>
  17:                 <Trigger Property="TabStripPlacement" Value="Bottom">
  18:                     <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="1"/>
  19:                     <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
  20:                     <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
  21:                     <Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
  22:                     <Setter Property="Margin" TargetName="HeaderPanel" Value="2,0,2,2"/>
  23:                 </Trigger>
  24:                 <Trigger Property="TabStripPlacement" Value="Left">
  25:                     <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
  26:                     <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
  27:                     <Setter Property="Grid.Column" TargetName="HeaderPanel" Value="0"/>
  28:                     <Setter Property="Grid.Column" TargetName="ContentPanel" Value="1"/>
  29:                     <Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
  30:                     <Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
  31:                     <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
  32:                     <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
  33:                     <Setter Property="Margin" TargetName="HeaderPanel" Value="2,2,0,2"/>
  34:                 </Trigger>
  35:                 <Trigger Property="TabStripPlacement" Value="Right">
  36:                     <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
  37:                     <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
  38:                     <Setter Property="Grid.Column" TargetName="HeaderPanel" Value="1"/>
  39:                     <Setter Property="Grid.Column" TargetName="ContentPanel" Value="0"/>
  40:                     <Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
  41:                     <Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
  42:                     <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
  43:                     <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
  44:                     <Setter Property="Margin" TargetName="HeaderPanel" Value="0,2,2,2"/>
  45:                 </Trigger>
  46:                 <Trigger Property="IsEnabled" Value="False">
  47:                     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
  48:                 </Trigger>
  49:             </ControlTemplate.Triggers>
  50:         </ControlTemplate>
  51:  
  52: 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.  
  53:  
  54: <Grid ClipToBounds="True" SnapsToDevicePixels="True" KeyboardNavigation.TabNavigation="Local">
  55:                 <Grid.ColumnDefinitions>
  56:                     <ColumnDefinition x:Name="ColumnDefinition0"/>
  57:                     <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
  58:                 </Grid.ColumnDefinitions>
  59:                 <Grid.RowDefinitions>
  60:                     <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
  61:                     <RowDefinition x:Name="RowDefinition1" Height="*"/>
  62:                 </Grid.RowDefinitions>
  63:                 <ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
  64:                     <TabPanel x:Name="HeaderPanel" Margin="2,2,2,0" IsItemsHost="True" Panel.ZIndex="1" Grid.Column="0" Grid.Row="0" KeyboardNavigation.TabIndex="1"/>
  65:                 </ScrollViewer>
  66:                 <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">
  67:                     <ContentPresenter x:Name="PART_SelectedContentHost" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Content="{TemplateBinding SelectedContent}" ContentSource="SelectedContent" ContentStringFormat="{TemplateBinding SelectedContentStringFormat}" ContentTemplate="{TemplateBinding SelectedContentTemplate}"/>
  68:                 </Border>
  69:             </Grid>
  70:  
  71: 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.  
  72:  
  73: <ControlTemplate x:Key="ScrollViewerTemplate" TargetType="{x:Type ScrollViewer}">
  74:             <Grid x:Name="Grid" Background="{TemplateBinding Background}">
  75:                 <Grid.ColumnDefinitions>
  76:                     <ColumnDefinition Width="*"/>
  77:                     <ColumnDefinition Width="Auto"/>
  78:                 </Grid.ColumnDefinitions>
  79:                 <Grid.RowDefinitions>
  80:                     <RowDefinition Height="*"/>
  81:                     <RowDefinition Height="Auto"/>
  82:                 </Grid.RowDefinitions>
  83:                 <Rectangle x:Name="Corner" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Grid.Column="1" Grid.Row="1"/>
  84:                 <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"/>
  85:                 <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"/>
  86:                 <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"/>
  87:             </Grid>
  88:         </ControlTemplate>
  89:  

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.

image

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

image

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>
  10:                         <Style TargetType="{x:Type RepeatButton}">
  11:                             <Setter Property="OverridesDefaultStyle" Value="True"/>
  12:                             <Setter Property="Focusable" Value="False"/>
  13:                             <Setter Property="IsTabStop" Value="False"/>
  14:                             <Setter Property="Template">
  15:                                 <Setter.Value>
  16:                                     <ControlTemplate TargetType="{x:Type RepeatButton}">
  17:                                         <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}"/>
  18:                                     </ControlTemplate>
  19:                                 </Setter.Value>
  20:                             </Setter>
  21:                         </Style>
  22:                     </RepeatButton.Style>
  23:                 </RepeatButton>
  24:                 <Track x:Name="PART_Track" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Column="1">
  25:                     <Track.DecreaseRepeatButton>
  26:                         <RepeatButton Command="ScrollBar.PageLeftCommand">
  27:                             <RepeatButton.Style>
  28:                                 <Style TargetType="{x:Type RepeatButton}">
  29:                                     <Setter Property="OverridesDefaultStyle" Value="True"/>
  30:                                     <Setter Property="Background" Value="Transparent"/>
  31:                                     <Setter Property="Focusable" Value="False"/>
  32:                                     <Setter Property="IsTabStop" Value="False"/>
  33:                                     <Setter Property="Template">
  34:                                         <Setter.Value>
  35:                                             <ControlTemplate TargetType="{x:Type RepeatButton}">
  36:                                                 <Rectangle Fill="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>
  37:                                             </ControlTemplate>
  38:                                         </Setter.Value>
  39:                                     </Setter>
  40:                                 </Style>
  41:                             </RepeatButton.Style>
  42:                         </RepeatButton>
  43:                     </Track.DecreaseRepeatButton>
  44:                     <Track.IncreaseRepeatButton>
  45:                         <RepeatButton Command="ScrollBar.PageRightCommand">
  46:                             <RepeatButton.Style>
  47:                                 <Style TargetType="{x:Type RepeatButton}">
  48:                                     <Setter Property="OverridesDefaultStyle" Value="True"/>
  49:                                     <Setter Property="Background" Value="Transparent"/>
  50:                                     <Setter Property="Focusable" Value="False"/>
  51:                                     <Setter Property="IsTabStop" Value="False"/>
  52:                                     <Setter Property="Template">
  53:                                         <Setter.Value>
  54:                                             <ControlTemplate TargetType="{x:Type RepeatButton}">
  55:                                                 <Rectangle Fill="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>
  56:                                             </ControlTemplate>
  57:                                         </Setter.Value>
  58:                                     </Setter>
  59:                                 </Style>
  60:                             </RepeatButton.Style>
  61:                         </RepeatButton>
  62:                     </Track.IncreaseRepeatButton>
  63:                     <Track.Thumb>
  64:                         <Thumb Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="HorizontalGripper">
  65:                             <Thumb.Style>
  66:                                 <Style TargetType="{x:Type Thumb}">
  67:                                     <Setter Property="OverridesDefaultStyle" Value="True"/>
  68:                                     <Setter Property="IsTabStop" Value="False"/>
  69:                                     <Setter Property="Template">
  70:                                         <Setter.Value>
  71:                                             <ControlTemplate TargetType="{x:Type Thumb}">
  72:                                                 <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}"/>
  73:                                             </ControlTemplate>
  74:                                         </Setter.Value>
  75:                                     </Setter>
  76:                                 </Style>
  77:                             </Thumb.Style>
  78:                         </Thumb>
  79:                     </Track.Thumb>
  80:                 </Track>
  81:                 <RepeatButton IsEnabled="{TemplateBinding IsMouseOver}" Command="ScrollBar.LineRightCommand" Grid.Column="2" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="RightArrow">
  82:                     <RepeatButton.Style>
  83:                         <Style TargetType="{x:Type RepeatButton}">
  84:                             <Setter Property="OverridesDefaultStyle" Value="True"/>
  85:                             <Setter Property="Focusable" Value="False"/>
  86:                             <Setter Property="IsTabStop" Value="False"/>
  87:                             <Setter Property="Template">
  88:                                 <Setter.Value>
  89:                                     <ControlTemplate TargetType="{x:Type RepeatButton}">
  90:                                         <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}"/>
  91:                                     </ControlTemplate>
  92:                                 </Setter.Value>
  93:                             </Setter>
  94:                         </Style>
  95:                     </RepeatButton.Style>
  96:                 </RepeatButton>
  97:             </Grid>
  98:             <ControlTemplate.Triggers>
  99:                 <Trigger Property="IsEnabled" Value="False">
 100:                     <Setter Property="Background" TargetName="Bg" Value="#FFF4F4F4"/>
 101:                 </Trigger>
 102:             </ControlTemplate.Triggers>
 103:         </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>
  10:                 <Style TargetType="{x:Type RepeatButton}">
  11:                     <Setter Property="OverridesDefaultStyle" Value="True"/>
  12:                     <Setter Property="Focusable" Value="False"/>
  13:                     <Setter Property="IsTabStop" Value="False"/>
  14:                     <Setter Property="Template">
  15:                         <Setter.Value>
  16:                             <ControlTemplate TargetType="{x:Type RepeatButton}">
  17:                                 <Border Background="{x:Null}" Height="18" Width="18" >
  18:                                     <Path Data=" M 8 15 L 8 3 L 2 9 Z" Fill="White" />
  19:                                 </Border>
  20:                             </ControlTemplate>
  21:                         </Setter.Value>
  22:                     </Setter>
  23:                 </Style>
  24:             </RepeatButton.Style>
  25:         </RepeatButton>
  26:         <RepeatButton IsEnabled="{TemplateBinding IsMouseOver}" Command="ScrollBar.PageRightCommand" Grid.Column="2" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="RightArrow">
  27:             <RepeatButton.Style>
  28:                 <Style TargetType="{x:Type RepeatButton}">
  29:                     <Setter Property="OverridesDefaultStyle" Value="True"/>
  30:                     <Setter Property="Focusable" Value="False"/>
  31:                     <Setter Property="IsTabStop" Value="False"/>
  32:                     <Setter Property="Template">
  33:                         <Setter.Value>
  34:                             <ControlTemplate TargetType="{x:Type RepeatButton}">
  35:                                 <Border Background="{x:Null}" Height="18" Width="18" >
  36:                                     <Path Data=" M 9 15 L 9 3 L 15 9 Z" Fill="White" />
  37:                                 </Border>
  38:                             </ControlTemplate>
  39:                         </Setter.Value>
  40:                     </Setter>
  41:                 </Style>
  42:             </RepeatButton.Style>
  43:         </RepeatButton>
  44:     </Grid>
  45:     <ControlTemplate.Triggers>
  46:         <Trigger Property="IsEnabled" Value="False">
  47:             <Setter Property="Background" TargetName="Bg" Value="#FFF4F4F4"/>
  48:         </Trigger>
  49:     </ControlTemplate.Triggers>
  50: </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.

image


Posted in:   Tags:
Comments are closed
Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2014 Rick.Brain.Flush()