nikobarli
Topic Author
Posts: 180
Joined: 26 Apr 2017, 06:23

Cannot modify some of Toggle Button style

18 Jul 2017, 09:32

I couldn't modify the color of toggle button border and the semi transparent layer when the mouse hovering it. It always use bluish colors.

I tried to modify all of the color definitions inside NoesisStyle.xaml to some reddish color, however, the above colors are still in blue. Please see here for the screen capture:
https://www.dropbox.com/s/w5d6vxja6ojnj ... e.PNG?dl=0

It seems that the colors are hardcoded somewhere in the code.
 
User avatar
ai_enabled
Posts: 231
Joined: 18 Jul 2013, 05:28
Contact:

Re: Cannot modify some of Toggle Button style

18 Jul 2017, 09:45

It's very strange. Alas, there is no visual inspector so it's hard to find out where this blue brush is coming from.
My first thought was that this is a default FocusVisualStyle but you wrote that this brush border is displayed on hover. In that case it must be related to the template or triggers.
I would recommend to set a custom Template for this control (with simple Border (template binding Background and Border brushes) and ContentPresenter) to check if the blue brush still appearing on hover. If so, then it's 100% coming from the (inherited) style triggers.

We're using completely custom themes for our games and we never seen any issue related to hardcoded brushes/colors so this is very unlikely.
AtomicTorch Studio Pte. Ltd. http://atomictorch.com
 
User avatar
sfernandez
Site Admin
Posts: 2983
Joined: 22 Dec 2011, 19:20

Re: Cannot modify some of Toggle Button style

18 Jul 2017, 11:49

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.
 
nikobarli
Topic Author
Posts: 180
Joined: 26 Apr 2017, 06:23

Re: Cannot modify some of Toggle Button style

19 Jul 2017, 03:57

Ah yes, sorry, it was my fault. The style is overridden elsewhere, thus modifying the colors inside NoesisStyle.xaml didn't take effect.
 
User avatar
sfernandez
Site Admin
Posts: 2983
Joined: 22 Dec 2011, 19:20

Re: Cannot modify some of Toggle Button style

19 Jul 2017, 23:41

Ok, I'm setting this thread as solved then.

Who is online

Users browsing this forum: Google [Bot] and 71 guests