Null reference exception in designer page when using static resource

I have used my xaml code like below:
<SolidColorBrush x:Key="ScrollBarBackground" Color="White" />

<Style x:Key="MetroScrollBarStyle" TargetType="{x:Type ScrollBar}">
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Background" Value="{StaticResource ScrollBarBackground}" />
</Trigger>
</Style.Triggers>
</Style>
<Style BasedOn="{StaticResource MetroScrollBarStyle}" TargetType="{x:Type ScrollBar}" />

It causes null reference exception in designer page (Null reference exception). if i'm modifying the above code snippet as,

<SolidColorBrush x:Key="ScrollBarBackground" Color="White" />

<Style TargetType="{x:Type ScrollBar}">
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Background" Value="{StaticResource ScrollBarBackground}" />
</Trigger>
</Style.Triggers>
</Style>

It works fine in designer. but i couldnt find the reason behind this.

Any one please share your ideas.

Thanks in advance.

Regards,

Jayapradha