Elena
Elena

Reputation: 41

How to dynamically change the color of a checkbox in C#

I'm making a simulation of a minimum spanning tree algorithm in C#. For each vertex in my graph I am using a checkbox as a visual representation. I would like to change the color of the checkbox each time the vertex is added to the minimum spanning tree. The checkbox was designed using expression blend 4 and it already has the basic attributes (base, mouse over, selected and such). The base color is black and I would like it to be green when the vertex is added to the tree.

This is an example of how I am using the checkboxes:

private void DeselectAll()
{
    foreach (var n in graf.Noduri)
    {
        CheckBox c = (CheckBox)n.graficNod.Content;
        c.IsChecked = false;
    }
}

where n is of the type cNod which has graficNod as an attribute of the type Nod which was created in expression blend, using xaml.

How can I change the base color of graficNod?

Nod.xaml looks like this:

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
mc:Ignorable="d"
x:Class="SimulareGrafuri.Nod"
x:Name="UserControl"
Width="10"
Height="10"    
d:DesignWidth="640" d:DesignHeight="480">
<UserControl.Resources>
    <ControlTemplate x:Key="CheckBoxControlTemplate1" TargetType="{x:Type CheckBox}">
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="MouseOver">
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse">
                                <EasingColorKeyFrame KeyTime="0" Value="#FFD0CACA"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse">
                                <EasingColorKeyFrame KeyTime="0" Value="Black"/>
                            </ColorAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.StrokeThickness)" Storyboard.TargetName="ellipse">
                                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Pressed">
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse">
                                <EasingColorKeyFrame KeyTime="0" Value="Black"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse">
                                <EasingColorKeyFrame KeyTime="0" Value="#FF5A5454"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Disabled"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="CheckStates">
                    <VisualState x:Name="Checked">
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse">
                                <EasingColorKeyFrame KeyTime="0" Value="Black"/>
                            </ColorAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle">
                                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                                <EasingColorKeyFrame KeyTime="0" Value="#FF540000"/>
                            </ColorAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.StrokeThickness)" Storyboard.TargetName="rectangle">
                                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="rectangle">
                                <EasingThicknessKeyFrame KeyTime="0" Value="-2"/>
                            </ThicknessAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse">
                                <EasingColorKeyFrame KeyTime="0" Value="#FFA70808"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unchecked">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="rectangle">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Indeterminate"/>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Ellipse x:Name="ellipse" Fill="Black" Margin="0" Stroke="Black" Width="Auto"/>
            <Rectangle x:Name="rectangle" Fill="{x:Null}" Margin="6,6,82,72" Opacity="0" Stroke="Black"/>
        </Grid>
    </ControlTemplate>
</UserControl.Resources>



<CheckBox Content="CheckBox" Template="{DynamicResource CheckBoxControlTemplate1}"/>

Upvotes: 2

Views: 2818

Answers (1)

Liviu Trifoi
Liviu Trifoi

Reputation: 3030

Simple: I see you've changed the checkbox quite a lot to resemble a vertex, but now it will always, be a black ellipse because you set the "Fill" explicitly :

<Ellipse x:Name="ellipse" Fill="Black" Margin="0" Stroke="Black" Width="Auto"/>

Use instead a TemplateBinding which will change the fill whenever you set the background property of the checkbox:

<Ellipse x:Name="ellipse" Fill="{TemplateBinding Background}" Margin="0" Stroke="Black" Width="Auto"/>

and change your checkbox declaration to:

<CheckBox x:Name="chkVertex" Content="CheckBox" Template="{DynamicResource CheckBoxControlTemplate1}" Background="Red"/>

You can change the color now in code-behind whenever you like, using:

chkVertex.Background = //whatever color you like

or you could bind the Background property of the checkbox in xaml, to a background property of the vertex, to have a cleaner approach.

Upvotes: 2

Related Questions