Problem changing Font color on collapsed Expand Button

Oct 4, 2012 at 2:17 AM
Edited Oct 6, 2012 at 3:15 PM

Hey guys I'm creating a metro theme and have enclosed some screen shots but I'm having some trouble finding the place in the source code to alter the font color for the Expand Button and I also need to change the Arrow color to white when the mouse is hovered over. 

I had some success with modifying a place in the NavigationPane.xaml but while it worked on the attached Demo apparently the compiled .dll didn't act the same in my personal app. Again I have enclosed a screen shot of my app as well.

I managed to find the spot for these buttons fine.

Need to find the spot for this button.

and the spot for this.

Oct 6, 2012 at 5:30 AM

Anyone still working on this project?

Coordinator
Oct 6, 2012 at 7:19 AM
Edited Oct 6, 2012 at 7:19 AM

Hi Adam, I think the best solution would be to create a "Metro Theme" for the control. Most of the colors and the arrows too can be modified in the theme.
You can copy an existing one and modify just the parts you need.

Are you using the default theme now ? The 3 picture you posted kare not visible, can you post them again ?

Oct 6, 2012 at 3:16 PM
Edited Oct 6, 2012 at 3:24 PM

Hows that I fixed the images.  Also That's what i am doing is modifying one of the Themes. But I need to modify the control a bit I think to allow for the font colors to change when mouse over.

Also here is what it looks like inside my project.

Coordinator
Oct 6, 2012 at 6:47 PM
Edited Oct 6, 2012 at 6:55 PM

All the buttons in the control are instances of NavigationPaneButton and share the same default style in \Themes\NavigationPane\NavigationPane.xaml

The part that presents the text is this :

        <Grid x:Name="headerContent" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
         <ContentPresenter  x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
        </Grid>

Once you override that style placing the text inside a TextBlock... something like this:

        <Grid x:Name="headerContent" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
         <TextBlock x:Name="MyTextBlockName">
         <ContentPresenter  x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
         </TextBlock>
        </Grid>

Then with some triggers for you can easily change the color... the green line in the example:

      <Trigger Property="DisplayState" Value="Over">
       <Setter
        Property="Background" TargetName="border" Value="{DynamicResource {ComponentResourceKey ResourceId=ButtonBorderInnerOver, TypeInTargetAssembly={x:Type local:NavigationPane}}}"/>
       <Setter
        Property="Background" TargetName="grid" Value="{DynamicResource {ComponentResourceKey ResourceId=ButtonBackgroundOver, TypeInTargetAssembly={x:Type local:NavigationPane}}}"/>
       <Setter Property="Visibility" TargetName="shine" Value="Visible"/>
       <Setter Property="Effect" TargetName="border" Value="{DynamicResource {ComponentResourceKey ResourceId=ButtonShadow, TypeInTargetAssembly={x:Type local:NavigationPane}}}"/>
       <Setter Property="Foreground" TargetName="test" Value="White"/>
      </Trigger>

In the same way you can change the arrow. The arrow is a DrawingBrush ( in the themes is defined in mthe common.xaml file ) If you create a copy of it and change the color then you can use it as on a Over Trigger. The arrow is on the NavigationPaneExpander so to change its behaviour you should override the NavigationPaneExpander Style... something like this should work:

<Trigger Property="IsMouseOver" Value="True" SourceName="arrow">
<Setter Property="Fill" TargetName="arrow" Value="here the resource for the white arrow copy you made"/>
</Trigger>

...should work :)

Oct 7, 2012 at 3:26 AM
Unfortunately this isn’t working. I tried this before I posted even. Copying the Style to the Metro Folder I made gives errors. I basically copied the Windows Live and common xaml files, made a Metro folder, renamed Windows live to Metro, inside named this to Metro as well.
<System:String x:Key="{ComponentResourceKey ResourceId=ActiveTheme, TypeInTargetAssembly={x:Type local:NavigationPane}}">Metro</System:String>
Then I basically started modifying the Theme. I got the main button working as intended but still cannot get the Navigation Bar once collapsed to change the font to white when hovered over, nor can I get it to alter the Arrow.
This is what I have for the arrow
    <DrawingBrush x:Key="{ComponentResourceKey ResourceId=ArrowRightOver, TypeInTargetAssembly={x:Type local:NavigationPane}}" Stretch="None">
        <DrawingBrush.Drawing>
            <DrawingGroup>
                <GeometryDrawing Geometry="F1 M 29.9139,54.4583L 32.9139,57.4567L 29.9139,60.4583">
                    <GeometryDrawing.Pen>
                        <Pen Thickness="1" StartLineCap="Round" EndLineCap="Round" LineJoin="Round" Brush="{DynamicResource {ComponentResourceKey ResourceId=ButtonForeColorActive, TypeInTargetAssembly={x:Type local:NavigationPane}}}"/>
                    </GeometryDrawing.Pen>
                </GeometryDrawing>
            </DrawingGroup>
        </DrawingBrush.Drawing>
    </DrawingBrush>
ButtonForeColor is inside the Metro.xaml file like this 
<SolidColorBrush x:Key="{ComponentResourceKey ResourceId=ButtonForeColorActive, TypeInTargetAssembly={x:Type local:NavigationPane}}" Color="White" />

I tried copying 
    <Style TargetType="{x:Type local:NavigationPaneExpander}">
and placing it into the Metro file but it gives errors. When I add the trigger you suggest at the appropriate place it looks like it works in the demo provided but when compiled and inside another app it doesn’t work.
could you test this and tell me if you can get it to work?
From: [email removed]
Sent: Saturday, October 06, 2012 12:47 PM
To: [email removed]
Subject: Re: Problem changing Font color on collapsed Expand Button [NavigationPane:397972]

From: 0xfefi

All the buttons in the control are instances of NavigationPaneButton and share the same default style in \Themes\NavigationPane\NavigationPane.xaml

The part that presents the text is this :

        <Grid x:Name="headerContent" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
         <ContentPresenter  x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
        </Grid>

Once you override that style placing the text inside a TextBlock... something like this:

<Grid x:Name="headerContent" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
<TextBlock x:Name="MyTextBlockName">
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
</TextBlock>
</Grid>

Then with some triggers for you can easily change the color... the green line in the example:

      <Trigger Property="DisplayState" Value="Over">
       <Setter
        Property="Background" TargetName="border" Value="{DynamicResource {ComponentResourceKey ResourceId=ButtonBorderInnerOver, TypeInTargetAssembly={x:Type local:NavigationPane}}}"/>
       <Setter
        Property="Background" TargetName="grid" Value="{DynamicResource {ComponentResourceKey ResourceId=ButtonBackgroundOver, TypeInTargetAssembly={x:Type local:NavigationPane}}}"/>
       <Setter Property="Visibility" TargetName="shine" Value="Visible"/>
       <Setter Property="Effect" TargetName="border" Value="{DynamicResource {ComponentResourceKey ResourceId=ButtonShadow, TypeInTargetAssembly={x:Type local:NavigationPane}}}"/>
       <Setter Property="Foreground" TargetName="test" Value="White"/>
      </Trigger>
In the same way you can change the arrow. The arrow is a DrawingBrush ( in the themes is defined in mthe common.xaml file )
If you create a copy of it and change the color then you can use it as on a Over Trigger.
The arrow is on the NavigationPaneExpander so to change its behaviour you should override the NavigationPaneExpander Style...
something like this should work:
<Trigger Property="IsMouseOver" Value="True" SourceName="arrow">
  <Setter Property="Fill" TargetName="arrow" Value="here the resource for the white arrow copy you made"/>
</Trigger>
...should work :)
Coordinator
Oct 8, 2012 at 3:16 AM

MMMM... it was a bit more complicated than I thought... sorry if I've a bit too hasty :)

I changed the control adding the possibility to distinguish between Normal color Active color and Over color ... as for the color you can specify different arrows: ArrowLeft, ArrowLeftOver

If you download the latest changeset you'll find a new theme ( the one I used testing ) called Metro Blue... You should find anything you need there.
Basically you should be able to set your theme just specifing the colors and adding new resources for the Over states.
Unless you have made other changes, with the last changeset, you should not need to ovveride the styles.

It wasn't working because the color is assigned based on the control state in various parts ( a lot actually ), so changing just the NavigationPaneButton wasn't enough. Same for the arrows, over color wasn't implemented

I Hope the changes applied to the control works for you

Oct 8, 2012 at 5:54 AM
Thanks that’s exactly what I needed. I modified it a bit more to allow for Selected foreground to remain white since it was still a blue background. But, thanks to your initial tweaks I was able to find the places I needed to modify them.
From: [email removed]
Sent: Sunday, October 07, 2012 9:16 PM
To: [email removed]
Subject: Re: Problem changing Font color on collapsed Expand Button [NavigationPane:397972]

From: 0xfefi

MMMM... it was a bit more complicated than I thought... sorry if I've a bit too hasty :)

I changed the control adding the possibility to distinguish between Normal color Active color and Over color ... as for the color you can specify different arrows: ArrowLeft, ArrowLeftOver

If you download the latest changeset you'll find a new theme ( the one I used testing ) called Metro Blue... You should find anything you need there.
Basically you should be able to set your theme just specifing the colors and adding new resources for the Over states.
Unless you have made other changes, with the last changeset, you should not need to ovveride the styles.

It wasn't working because the color is assigned based on the control state in various parts ( a lot actually ), so changing just the NavigationPaneButton wasn't enough. Same for the arrows, over color wasn't implemented

I Hope the changes applied to the control works for you