NoesisStyles.xaml uses Styles and ControlTemplates to manage the appearance of all controls, nothing is hardcoded inside NoesisGUI library.
For example, the ToggleButton has the following template:
<!-- ToggleButton Template -->
<ControlTemplate x:Key="ToggleButtonTemplate" TargetType="{x:Type ToggleButton}">
<Grid>
<VisualStateManager.VisualStateGroups>
...
</VisualStateManager.VisualStateGroups>
<Border x:Name="BaseBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="1"/>
<Border x:Name="OverBorder"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="1">
<Border.Background>
<SolidColorBrush Color="{StaticResource OverOverlay}" Opacity="0"/>
</Border.Background>
</Border>
<Border x:Name="CheckBorder"
Margin="{TemplateBinding BorderThickness}"
BorderThickness="1"
CornerRadius="0.01">
<Border.Background>
<SolidColorBrush Color="{StaticResource CheckBgColor}" Opacity="0"/>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{StaticResource CheckBdColor}" Opacity="0"/>
</Border.BorderBrush>
</Border>
<Border x:Name="FocusBorder"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="1">
<Border.BorderBrush>
<SolidColorBrush Color="{StaticResource FocusColor}" Opacity="0"/>
</Border.BorderBrush>
<Border x:Name="FocusInnerBorder"
BorderThickness="1"
CornerRadius="0.01">
<Border.Background>
<SolidColorBrush Color="{StaticResource FocusGlowColor}" Opacity="0"/>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{StaticResource FocusShineColor}" Opacity="0"/>
</Border.BorderBrush>
</Border>
</Border>
<Border x:Name="DisabledBorder"
CornerRadius="1.5">
<Border.Background>
<SolidColorBrush Color="{StaticResource DisabledOverlay}" Opacity="0"/>
</Border.Background>
</Border>
<Border
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ContentPresenter x:Name="ContentHost"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextElement.Foreground>
<SolidColorBrush Color="{StaticResource NormalFgColor}"/>
</TextElement.Foreground>
</ContentPresenter>
</Border>
</Grid>
</ControlTemplate>
As you can see there are several Border elements, each one used to define the appearance of a VisualStateGroup:
- "BaseBorder" contains bindings to define the base color of the button.
- "OverBorder" defines the color of the overlay rendered when mouse is over.
- "CheckBorder" defines the color and border of the overlay rendered when toggle is checked.
- "FocusBorder" defines the color and border of the overlay rendered when button has keyboard focus.
- "DisabledBorder" defines the color and border of the overlay rendered when button is disabled.
Each VisualState animates the opacity of the brushes used by these elements to show the appropriate look. You can see there which element is modified by each VisualState and know what color resource is being used then.