Why is my custom Slider not visible at design time? - wpf

Question

I have used this page from MSDN to apply a custom style to my slider control. It works perfectly at run-time as shown in the image below, but at design time, the entire slider control is not visible (hidden/collapsed??). How can I get the slider to be visible at design time?
Slider at run-time:
The XAML showing my implementation of the custom slider on my WPF window:
<Slider Grid.Column="1"
Style="{StaticResource sldGradeability}"
Orientation="Vertical"
Name="sldGrade" Maximum="90" Minimum="0"
SmallChange="1" LargeChange="10"
Margin="5,20,10,20"/>
The XAML for my custom slider style:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!--<SnippetSlider>-->
<Style x:Key="SliderButtonStyle"
TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="IsTabStop"
Value="false" />
<Setter Property="Focusable"
Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--<SnippetThumb>-->
<Style x:Key="SliderThumbStyle"
TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="Height"
Value="16" />
<Setter Property="Width"
Value="25" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Polygon x:Name="polyThumb"
Cursor="Hand"
StrokeThickness="1"
Points="0,8 6,16 24,16 24,0 6,0"
Stroke="{StaticResource brsDarkGrayText}"
Fill="{StaticResource ButtonNormal}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="polyThumb"
Property="Fill"
Value="{StaticResource ButtonOver}" />
</Trigger>
<Trigger Property="IsDragging"
Value="True">
<Setter TargetName="polyThumb"
Property="Fill"
Value="{StaticResource ButtonDown}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--Template when the orientation of the Slider is Vertical.-->
<ControlTemplate x:Key="VerticalSlider"
TargetType="{x:Type Slider}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="90°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="1" Text="80°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="2" Text="70°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="3" Text="60°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="4" Text="50°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="5" Text="40°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="6" Text="30°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="7" Text="20°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="8" Text="10°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="9" Text="0°" Style="{StaticResource SimpleTextRight}"/>
</Grid>
<TickBar Grid.Column="1" x:Name="TopTick"
SnapsToDevicePixels="True"
Placement="Left"
Width="5"
Visibility="Visible"
TickFrequency="10"
Fill="{StaticResource brsDarkGrayText}"/>
<Border x:Name="TrackBackground"
Margin="0"
CornerRadius="2"
Width="5"
Grid.Column="2"
BorderThickness="0">
<Border.Background>
<LinearGradientBrush EndPoint="1,0"
StartPoint="0,0">
<GradientStop Color="{StaticResource LightGrayGradient}"
Offset="0" />
<GradientStop Color="{StaticResource MediumGrayGradient}"
Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Track Grid.Column="2"
x:Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyle}"
Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyle}"
Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
<TickBar x:Name="BottomTick"
SnapsToDevicePixels="True"
Grid.Column="3"
Fill="{StaticResource brsDarkGrayText}"
Placement="Right"
Width="4"
Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TickPlacement"
Value="TopLeft">
<Setter TargetName="TopTick"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement"
Value="BottomRight">
<Setter TargetName="BottomTick"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement"
Value="Both">
<Setter TargetName="TopTick"
Property="Visibility"
Value="Visible" />
<Setter TargetName="BottomTick"
Property="Visibility"
Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!--Slider Control-->
<Style x:Key="sldGradeability"
TargetType="{x:Type Slider}">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="Visibility"
Value="Visible"/>
<Style.Triggers>
<Trigger Property="Orientation"
Value="Vertical">
<Setter Property="MinWidth"
Value="21" />
<Setter Property="MinHeight"
Value="104" />
<Setter Property="Template"
Value="{StaticResource VerticalSlider}" />
</Trigger>
</Style.Triggers>
</Style>
<!--</SnippetSlider>-->
</ResourceDictionary>

Answer 1

It shows up fine in Blend 4 so I think this is a bug in the VS2010 designer somehow. Anyway, the problem seems to be the Orientation is Vertical trigger.
<Style x:Key="sldGradeability" TargetType="{x:Type Slider}">
<!-- ... -->
<Style.Triggers>
<!-- ... -->
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Template" Value="{StaticResource VerticalSlider}" />
</Trigger>
</Style.Triggers>
</Style>
Moving the Template setter up among the Setters and the Slider shows up in the designer
<Style x:Key="sldGradeability" TargetType="{x:Type Slider}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Visibility" Value="Visible"/>
<Setter Property="Template" Value="{StaticResource VerticalSlider}"/>
<Style.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="MinWidth" Value="21" />
<Setter Property="MinHeight" Value="104" />
</Trigger>
</Style.Triggers>
</Style>
Moving the setter may not be what you want do here but maybe you can make use of it somehow