I am working on a project that was originally created by someone else, they have a xaml resource dictionary containing all the button styles that are used in the entire solution.
I am reworking a window within the solution and it would really help me to know which buttons look like what, both so I know which can work somewhere else and so I can scavenge pieces of a style that fit a new button I am trying to make.
My problem is that there are over 30 different button styles to look through.
Is anyone aware of a good way to preview the results of applying a style to its targetType? It doesn’t need to be simple, just hopefully as simple as can be given the circumstances.
note I tried Expression, I didn’t see an option in there but I haven’t really experimented with it ever.
The best thing I can think of right now is to create a blank window only containing a button which I then type in the style I want to check out, and I just go through until I find what I want. Does anyone have a better system?
I am including below an example of a style, in case it helps, but it looks like it has many dependencies itself. I am only on month 2 of Silverlight so going through 30+ of the below is a bit daunting.
<Style TargetType="Button" x:Key="RightButtonBarButtonStyle">
<Setter Property="Padding" Value="15,0,15,0" />
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontFamily" Value="Segoie"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="grid" RenderTransformOrigin="0.5,0.5" Height="25">
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2">
<VisualTransition.GeneratedEasingFunction>
<CubicEase EasingMode="EaseOut"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="0.7" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" To="0.98" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0.98" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisualElement" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="border" BorderBrush="{StaticResource CoreButtonBorderBrush}" BorderThickness="0,1,1,1" CornerRadius="0,15,15,0" Background="{StaticResource CoreButtonBackgroundBrush}"/>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="10,0,10,0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Border BorderBrush="Black" BorderThickness="0" Height="1" Margin="11,1,11,0" VerticalAlignment="Top" Background="{StaticResource CoreButtonTopLineBrush}"/>
<Border BorderBrush="Black" BorderThickness="0" Height="1" Margin="12,0,13,-1" Background="{StaticResource CoreButtonBottomLineBrush}" VerticalAlignment="Bottom" Opacity="0.5"/>
<Border x:Name="DisabledVisualElement" Background="Black" IsHitTestVisible="false" Opacity="0" CornerRadius="0,15,15,0" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Edit
It appears I was too quick to dismiss Expression. By default (I am assuming default anyway) there is a resource tab on the right side of the program (next to Properties and Data). If it is not open you can go to menu up to and select Window->Resources.
From there is shows all your resources grouped by xaml files, to preview what the style will look like you press the button to the right of the corresponding name. Only one button type didn’t appear properly (claimed there was a duplicate key name, don’t see why that would prevent a preview but it does, so I am guessing other complications will cause a similar result).
I am currently looking around VS2010 to see if I can find similar functionality but I currently doubt there is, since that seems more an expression thing.
So if anyone knows of the feature being present in Visual Studio 2010 please let me know since that will save me from having to jump between projects and refresh projects once I start editing. I’d also like to avoid purchasing Expression if I can.
It appears I was too quick to dismiss Expression. By default (I am assuming default anyway) there is a resource tab on the right side of the program (next to Properties and Data). If it is not open you can go to menu up to and select Window->Resources.
From there is shows all your resources grouped by xaml files, to preview what the style will look like you press the button to the right of the corresponding name. Only one button type didn’t appear properly (claimed there was a duplicate key name, don’t see why that would prevent a preview but it does, so I am guessing other complications will cause a similar result).
I am currently looking around VS2010 to see if I can find similar functionality but I currently doubt there is, since that seems more an expression thing.
So if anyone knows of the feature being present in Visual Studio 2010 please let me know since that will save me from having to jump between projects and refresh projects once I start editing. I’d also like to avoid purchasing Expression if I can.