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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

GridCheckBox Change Rectangle Color

Thread ID:

Created:

Updated:

Platform:

Replies:

126395 Oct 13,2016 09:07 AM UTC Oct 14,2016 11:08 AM UTC UWP 2
loading
Tags: SfDataGrid
Alianna Alghamdi
Asked On October 13, 2016 09:07 AM UTC

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!

Alianna Alghamdi
Replied On 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"/>
                 

Jai Ganesh S [Syncfusion]
Replied On 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 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;