locked
Setting BorderBrush color of backButton RRS feed

  • Question

  • When I set the BorderBrush color of the backButton in Properties it does not show ; borderBrush stays white on the screen in the design window and at runtime.

    Is there a workaround ?

    I could replace it by a graphic but rendition is not satisfactory.

    I am using VB

    Thank you.






    • Edited by Mitchb00 Thursday, December 26, 2013 1:29 PM
    Thursday, December 26, 2013 9:36 AM

Answers

  • If you examine the AppBarButton's template you can see that it doesn't have a Border and the BorderBrush style is not used. the BackgroundEllipse fills with a AppBarItemBackgroundThemeBrush.

                                    <Grid HorizontalAlignment="Center" Height="40" Margin="0,0,0,5" Width="40">
                                        <Ellipse x:Name="BackgroundEllipse" Fill="{ThemeResource AppBarItemBackgroundThemeBrush}" Height="40" UseLayoutRounding="False" Width="40"/>
                                        <Ellipse x:Name="OutlineEllipse" Height="40" Stroke="{ThemeResource AppBarItemForegroundThemeBrush}" StrokeThickness="2" UseLayoutRounding="False" Width="40"/>
                                        <ContentPresenter x:Name="Content" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                                    </Grid>

    To override this you can create your own AppBarItemBackgroundThemeBrush resource earlier in the resource search path (in Page.Resources, for example) or you can create a copied template and change the Fill property in the Ellipse. Either way make sure you fall back to defaults for high contrast modes.

    --Rob

    • Marked as answer by Mitchb00 Tuesday, December 31, 2013 12:22 PM
    Tuesday, December 31, 2013 1:02 AM
    Moderator

All replies

  • What type of control is your backButton and what does its template look like? Exactly what results are you looking for? The BorderBrush color will only apply if you are using a control with a template that exposes it.

    You can select your button in the designer, right click, and choose Edit Template.Edit a copy... to make a copy of the template to examine. Assuming you are using a Button or an AppBarButton you can see the default templates documented at Button styles and templates (Windows)‎  or AppBarButton styles and templates (Windows)‎ . Those pages document the styles and brushes used to display the control and you can look through the template to see how the brushes are used.

    How best to change things will depend on the results you want. Likely solutions will be to edit the template or to add your own brush resource.

    --Rob

    Thursday, December 26, 2013 8:56 PM
    Moderator
  • I am trying to change the circular button with a left arrow that appears at the upper left corner of BasicPages. Foreground color changes the color of the arrow fine, but border color brush does not. I tried to edit the template as you describe, but the button changes to a tiny square and becomes unusable.

    I will see if I can change the AppBarButton style.

    If I find no other way, I will use graphics captured from the screen and switched to negative to simulate the button.

    Friday, December 27, 2013 10:18 AM
  • If you examine the AppBarButton's template you can see that it doesn't have a Border and the BorderBrush style is not used. the BackgroundEllipse fills with a AppBarItemBackgroundThemeBrush.

                                    <Grid HorizontalAlignment="Center" Height="40" Margin="0,0,0,5" Width="40">
                                        <Ellipse x:Name="BackgroundEllipse" Fill="{ThemeResource AppBarItemBackgroundThemeBrush}" Height="40" UseLayoutRounding="False" Width="40"/>
                                        <Ellipse x:Name="OutlineEllipse" Height="40" Stroke="{ThemeResource AppBarItemForegroundThemeBrush}" StrokeThickness="2" UseLayoutRounding="False" Width="40"/>
                                        <ContentPresenter x:Name="Content" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                                    </Grid>

    To override this you can create your own AppBarItemBackgroundThemeBrush resource earlier in the resource search path (in Page.Resources, for example) or you can create a copied template and change the Fill property in the Ellipse. Either way make sure you fall back to defaults for high contrast modes.

    --Rob

    • Marked as answer by Mitchb00 Tuesday, December 31, 2013 12:22 PM
    Tuesday, December 31, 2013 1:02 AM
    Moderator
  • Thank you Rob. I understand now.

    Tuesday, December 31, 2013 12:23 PM