Edit resource dictionary style through c#

Question

I am designing a windows 8 app which has multiple levels. Each level has a number of buttons in it each with the style 'myStyle'.

<Style x:Key="myStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Ellipse StrokeThickness="4" Width="55" Height="55" Stroke="Aquamarine">
                        <Ellipse.Fill>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="GreenYellow"/>
                                <GradientStop Color="#FF1E46FB" Offset=".5"/>
                                <GradientStop Color="GreenYellow" Offset="1"/>
                            </LinearGradientBrush>
                        </Ellipse.Fill>
                    </Ellipse>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

What I am trying to do is manipulate the code behind in c# to change the stroke color of all the buttons in each level. ie Level1 buttons have a red stroke, Level2 buttons have a green stroke etc... Currently I have the stroke set at Aquamarine by default.

I was wondering if anyone could give me any advice on how to do this. Any help would be most appreciated.

Answer 1

Given the comments, I think this should work for you. In your template, use this for the Ellipse, instead of what you have now - everything else is the same:

<Ellipse StrokeThickness="4" Width="55" Height="55" Stroke="{TemplateBinding BorderBrush}">

Then you can assign colors to the buttons individually as you include them in the UI, eg,:

    <Button x:Name="b1" Style="{StaticResource myStyle}" BorderBrush="Red">Level 1 Button</Button>
    <Button x:Name="b2" Style="{StaticResource myStyle}" BorderBrush="Green">Level 2 Button</Button>

Or, you could make the same change to Ellipse and add additional styles based on the main one, for instance:

    <Style x:Key="Level1" BasedOn="{StaticResource myStyle}" TargetType="Button">
        <Setter Property="BorderBrush" Value="Red" />
    </Style>

    <Style x:Key="Level2" BasedOn="{StaticResource myStyle}" TargetType="Button">
        <Setter Property="BorderBrush" Value="Green" />
    </Style>

Then your buttons would look like:

   <Button x:Name="b1" Style="{StaticResource Level1}">Level 1 Button</Button>
   <Button x:Name="b2" Style="{StaticResource Level2}">Level 2 Button</Button>

Answer 2

Solved my issue using your advice Jim. Applied templatebinding to my ellipse stroke in myStyle:

<Style x:Key="myStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Ellipse Stroke="{TemplateBinding Foreground}" RenderTransformOrigin="0.5,0.5" StrokeThickness="3" Width="55" Height="55" Margin="2.5">
                                <Ellipse.Fill>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="White"/>
                                        <GradientStop Color="White" Offset="1"/>
                                        <GradientStop Color="#FF9FA4A4" Offset="0.5"/>
                                    </LinearGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Then used a foreach loop to set the foreground of all of my buttons(pegs) when the level loads.

foreach (Control p in Globals.allPegList)
        {
            p.Foreground = new SolidColorBrush(Globals.color1);
        }

Thanks for the help!

ps: Globals is just a namespace where I have a few global variables declared. color1 is a Color variable. allPegList is a list of all my buttons(pegs) in each level.