We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

GridCheckBox Change Rectangle Color

Hi!

Is there a way to change the rectangle color, or the whole check box, if possible in the gridcheckbox column? I have tried all sorts of properties but it still doesn't change. Would be glad if you guys can help me.

Thanks!

2 Replies

AA Alianna Alghamdi October 13, 2016 09:09 AM UTC

Btw, here's the code:

<syncfusion:GridCheckBoxColumn  HeaderStyle="{StaticResource headerStyle2}"  HeaderTemplate="{StaticResource checkIn}"  AllowEditing="True" MappingName="OfficerCheckIn" TextAlignment="Left"/>
                 


JG Jai Ganesh S Syncfusion Team October 14, 2016 11:08 AM UTC

 
Hi Alianna, 
 
Your requirement can be achieved by customize the default style for CheckBox like below, 
 
<Page.Resources> 
        <Style TargetType="CheckBox"> 
            <Setter Property="Background" Value="Black" /> 
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/> 
            <Setter Property="Padding" Value="8,5,0,0" /> 
            <Setter Property="HorizontalAlignment" Value="Left" /> 
            <Setter Property="VerticalAlignment" Value="Center" /> 
            <Setter Property="HorizontalContentAlignment" Value="Left"/> 
            <Setter Property="VerticalContentAlignment" Value="Top"/> 
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /> 
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" /> 
            <Setter Property="MinWidth" Value="120" /> 
            <Setter Property="MinHeight" Value="32" /> 
            <Setter Property="UseSystemFocusVisuals" Value="True" /> 
            <Setter Property="Template"> 
                <Setter.Value> 
                    <ControlTemplate TargetType="CheckBox"> 
                        <Grid Background="{TemplateBinding Background}" 
                  BorderBrush="{TemplateBinding BorderBrush}" 
                  BorderThickness="{TemplateBinding BorderThickness}"> 
                            <VisualStateManager.VisualStateGroups> 
                                <VisualStateGroup x:Name="CombinedStates"> 
                                    <VisualState x:Name="UncheckedNormal" /> 
                                    <VisualState x:Name="UncheckedPointerOver"> 
                                        <Storyboard> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                               Storyboard.TargetProperty="Stroke"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                        </Storyboard> 
                                    </VisualState> 
                                    <VisualState x:Name="UncheckedPressed"> 
                                        <Storyboard> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                               Storyboard.TargetProperty="Fill"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                               Storyboard.TargetProperty="Stroke"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <DoubleAnimation Storyboard.TargetName="NormalRectangle" 
                                 Storyboard.TargetProperty="StrokeThickness" 
                                 To="{ThemeResource CheckBoxCheckedStrokeThickness}" 
                                 Duration="0" /> 
                                        </Storyboard> 
                                    </VisualState> 
                                    <VisualState x:Name="UncheckedDisabled"> 
                                        <Storyboard> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                               Storyboard.TargetProperty="Fill"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                               Storyboard.TargetProperty="Stroke"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                                               Storyboard.TargetProperty="Foreground"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                        </Storyboard> 
                                    </VisualState> 
                                    <VisualState x:Name="CheckedNormal"> 
                                        <Storyboard> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                               Storyboard.TargetProperty="Fill"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <DoubleAnimation Storyboard.TargetName="NormalRectangle" 
                                 Storyboard.TargetProperty="StrokeThickness" 
                                 To="{ThemeResource CheckBoxCheckedStrokeThickness}" 
                                 Duration="0" /> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                               Storyboard.TargetProperty="Stroke"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltTransparentBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <DoubleAnimation Storyboard.TargetName="CheckGlyph" 
                                 Storyboard.TargetProperty="Opacity" 
                                 To="1" 
                                 Duration="0" /> 
                                        </Storyboard> 
                                    </VisualState> 
                                    <VisualState x:Name="CheckedPointerOver"> 
                                        <Storyboard> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                               Storyboard.TargetProperty="Fill"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                               Storyboard.TargetProperty="Stroke"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <DoubleAnimation Storyboard.TargetName="CheckGlyph" 
                                 Storyboard.TargetProperty="Opacity" 
                                 To="1" 
                                 Duration="0" /> 
                                        </Storyboard> 
                                    </VisualState> 
                                    <VisualState x:Name="CheckedPressed"> 
                                        <Storyboard> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                               Storyboard.TargetProperty="Fill"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                               Storyboard.TargetProperty="Stroke"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <DoubleAnimation Storyboard.TargetName="NormalRectangle" 
                                 Storyboard.TargetProperty="StrokeThickness" 
                                 To="{ThemeResource CheckBoxCheckedStrokeThickness}" 
                                 Duration="0" /> 
                                            <DoubleAnimation Storyboard.TargetName="CheckGlyph" 
                                 Storyboard.TargetProperty="Opacity" 
                                 To="1" 
                                 Duration="0" /> 
                                        </Storyboard> 
                                    </VisualState> 
                                    <VisualState x:Name="CheckedDisabled"> 
                                        <Storyboard> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                               Storyboard.TargetProperty="Fill"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                               Storyboard.TargetProperty="Stroke"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
                                               Storyboard.TargetProperty="Foreground"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                                               Storyboard.TargetProperty="Foreground"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <DoubleAnimation Storyboard.TargetName="CheckGlyph" 
                                 Storyboard.TargetProperty="Opacity" 
                                 To="1" 
                                 Duration="0" /> 
                                        </Storyboard> 
                                    </VisualState> 
                                    <VisualState x:Name="IndeterminateNormal"> 
                                        <Storyboard> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                               Storyboard.TargetProperty="Stroke"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundAccentBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                               Storyboard.TargetProperty="Fill"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
                                               Storyboard.TargetProperty="Foreground"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
                                               Storyboard.TargetProperty="Glyph"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="&#xE73C;" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <DoubleAnimation Storyboard.TargetName="CheckGlyph" 
                                 Storyboard.TargetProperty="Opacity" 
                                 To="1" 
                                 Duration="0" /> 
                                        </Storyboard> 
                                    </VisualState> 
                                    <VisualState x:Name="IndeterminatePointerOver"> 
                                        <Storyboard> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                               Storyboard.TargetProperty="Stroke"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                               Storyboard.TargetProperty="Fill"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
                                               Storyboard.TargetProperty="Foreground"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
                                               Storyboard.TargetProperty="Glyph"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="&#xE73C;" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <DoubleAnimation Storyboard.TargetName="CheckGlyph" 
                                 Storyboard.TargetProperty="Opacity" 
                                 To="1" 
                                 Duration="0" /> 
                                        </Storyboard> 
                                    </VisualState> 
                                    <VisualState x:Name="IndeterminatePressed"> 
                                        <Storyboard> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                               Storyboard.TargetProperty="Stroke"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                               Storyboard.TargetProperty="Fill"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
                                               Storyboard.TargetProperty="Foreground"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
                                               Storyboard.TargetProperty="Glyph"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="&#xE73C;" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <DoubleAnimation Storyboard.TargetName="CheckGlyph" 
                                 Storyboard.TargetProperty="Opacity" 
                                 To="1" 
                                 Duration="0" /> 
                                        </Storyboard> 
                                    </VisualState> 
                                    <VisualState x:Name="IndeterminateDisabled"> 
                                        <Storyboard> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                               Storyboard.TargetProperty="Fill"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                               Storyboard.TargetProperty="Stroke"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
                                               Storyboard.TargetProperty="Foreground"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                                               Storyboard.TargetProperty="Foreground"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
                                               Storyboard.TargetProperty="Glyph"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="&#xE73C;" /> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <DoubleAnimation Storyboard.TargetName="CheckGlyph" 
                                 Storyboard.TargetProperty="Opacity" 
                                 To="1" 
                                 Duration="0" /> 
                                        </Storyboard> 
                                    </VisualState> 
                                </VisualStateGroup> 
                            </VisualStateManager.VisualStateGroups> 
                            <Grid.ColumnDefinitions> 
                                <ColumnDefinition Width="20" /> 
                                <ColumnDefinition Width="*" /> 
                            </Grid.ColumnDefinitions> 
                            <Grid VerticalAlignment="Top" Height="32"> 
                                <Rectangle x:Name="NormalRectangle" 
                        Fill="Transparent" 
                        Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" 
                        StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}" 
                        UseLayoutRounding="False" 
                        Height="20" 
                        Width="20" /> 
                                <FontIcon x:Name="CheckGlyph" 
                        FontFamily="{ThemeResource SymbolThemeFontFamily}" 
                        Glyph="&#xE001;" 
                        FontSize="20" 
                        Foreground="Green" 
                        Opacity="0" /> 
                            </Grid> 
                            <ContentPresenter x:Name="ContentPresenter" 
                            ContentTemplate="{TemplateBinding ContentTemplate}" 
                            ContentTransitions="{TemplateBinding ContentTransitions}" 
                            Content="{TemplateBinding Content}" 
                            Margin="{TemplateBinding Padding}" 
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                            Grid.Column="1" 
                            AutomationProperties.AccessibilityView="Raw" 
                            TextWrapping="Wrap" /> 
                        </Grid> 
                    </ControlTemplate> 
                </Setter.Value> 
            </Setter> 
        </Style> 
    </Page.Resources> 
 
 
 
In the above sample, we have changed the Checkbox background as black. 
Screen Shot: 
 
Regards, 
Jai Ganesh S 
 


Loader.
Up arrow icon