Not able to change background color of checkcox with CheckBoxKey style.

Ribbon for WPF Forum

Posted 4 years ago by Piyush Parsai
Version: 15.1.0621
Avatar

Hi,

We are trying to change the background of checkboxes in our application depending upon some property.
For this we have used trigger to change background color of checkbox. But it’s not working.

We have used the ribbon:RibbonStyles.CheckBoxKey style for standard WPF checkboxes. However, I want to set background color using different trigger, so I need the style to accomplish this.
If we don’t use this style than we are able to change the background of checkbox.

Version no which we are using is 11.1.545.0. Can you point me to a style that you do provide that is very similar to CheckBoxKey.

 

Thanks,
Piyush

Comments (9)

Posted 4 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hello,

Your company has licensed WPF Studio so whoever is listed on the account should have access to download our default styles/templates.  You can then look up the CheckBox style we provide in the Ribbon portion of the XAML and clone/alter it as you need.  You can put the altered style in your Application.Resources using the same key to have it override our own default style.


Actipro Software Support

Posted 4 years ago by Piyush Parsai
Avatar

Hi,

Could you please share the link, from where i can download default styles/templates.

Version which i am using is : 11.1.545.0

Thanks,

Piyush

[Modified 4 years ago]

Posted 4 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hello,

You don't seem to be associated with your company's account, but if you ask one of your co-workers who is, they can download the default styles and templates if they go to your company's Organization Account page, and then to the Purchases and Licenses tab.  A link is available there.


Actipro Software Support

Posted 4 years ago by Piyush Parsai
Avatar

Hi,

Thanks for quick response.

I was able to pull out the style for checkboxkey. But not able to figure it out to make it work as per my requirement.

Below is the changed style i am using: 

 <Style TargetType="CheckBox" BasedOn="{StaticResource {x:Static ribbon:RibbonStyles.CheckBoxKey}}">
        <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <DockPanel Background="Transparent" SnapsToDevicePixels="True">
                    <!-- 1/28/2010 - Set FlowDirection to LeftToRight so check is always drawn left-to-right -->
                    <Border x:Name="OuterBorder" DockPanel.Dock="Left" Width="13" Height="13" BorderThickness="1"
								VerticalAlignment="Center"
								BorderBrush="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxOuterBorderNormalBrush}}"
								SnapsToDevicePixels="True" FlowDirection="LeftToRight">
                        <Border x:Name="InnerBorder" Margin="1" BorderThickness="1"
									BorderBrush="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxInnerBorderNormalBrush}}"
									Background="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxInnerBackgroundNormalBrush}}"
									SnapsToDevicePixels="True">
                            <Grid>
                                <Path x:Name="CheckBox" Margin="-1" HorizontalAlignment="Center" VerticalAlignment="Center"
											Visibility="Collapsed"
											Fill="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxForegroundBrush}}"
											Data="M 0.5,6.5 L 3.5,9.5 L 4.5,9.5 L 7.5,1.5 L 6,0.5 L 3.5,7 L 1.5,5 Z"
											SnapsToDevicePixels="False" />
                                <Rectangle x:Name="Indeterminate" Visibility="Collapsed" Opacity="0.5"
											Fill="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxForegroundBrush}}" />
                            </Grid>
                        </Border>
                    </Border>
                    <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
								VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="True">
                        <ContentPresenter x:Name="contentPresenter" Margin="{TemplateBinding Padding}"
									SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
									ContentTemplate="{TemplateBinding ContentTemplate}" RecognizesAccessKey="True"
									Content="{TemplateBinding Content}" />
                    </Grid>
                </DockPanel>

                <ControlTemplate.Triggers>
                    <Trigger Property="HasContent" Value="true">
                        <Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}" />
                        <Setter Property="Padding" Value="2,0,0,0" />
                    </Trigger>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="CheckBox" Property="Visibility" Value="Visible" />
                    </Trigger>
                    <Trigger Property="IsChecked" Value="{x:Null}">
                        <Setter TargetName="Indeterminate" Property="Visibility" Value="Visible" />
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsEnabled" Value="True" />
                            <Condition Property="IsMouseOver" Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="OuterBorder" Property="BorderBrush"
									Value="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxOuterBorderHoverBrush}}" />
                        <Setter TargetName="OuterBorder" Property="Background"
									Value="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxOuterBackgroundHoverBrush}}" />
                        <Setter TargetName="InnerBorder" Property="BorderBrush"
									Value="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxInnerBorderHoverBrush}}" />
                        <Setter TargetName="InnerBorder" Property="Background"
									Value="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxInnerBackgroundHoverBrush}}" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsEnabled" Value="True" />
                            <Condition Property="IsKeyboardFocused" Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="OuterBorder" Property="BorderBrush"
									Value="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxOuterBorderHoverBrush}}" />
                        <Setter TargetName="OuterBorder" Property="Background"
									Value="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxOuterBackgroundHoverBrush}}" />
                        <Setter TargetName="InnerBorder" Property="BorderBrush"
									Value="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxInnerBorderHoverBrush}}" />
                        <Setter TargetName="InnerBorder" Property="Background"
									Value="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxInnerBackgroundHoverBrush}}" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsEnabled" Value="True" />
                            <Condition Property="IsPressed" Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="OuterBorder" Property="BorderBrush"
									Value="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxOuterBorderPressedBrush}}" />
                        <Setter TargetName="OuterBorder" Property="Background"
									Value="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxOuterBackgroundPressedBrush}}" />
                        <Setter TargetName="InnerBorder" Property="BorderBrush"
									Value="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxInnerBorderPressedBrush}}" />
                        <Setter TargetName="InnerBorder" Property="Background"
									Value="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxInnerBackgroundPressedBrush}}" />
                    </MultiTrigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="OuterBorder" Property="BorderBrush"
									Value="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxOuterBorderDisabledBrush}}" />
                        <Setter TargetName="OuterBorder" Property="Background"
									Value="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxOuterBackgroundDisabledBrush}}" />
                        <Setter TargetName="InnerBorder" Property="BorderBrush"
									Value="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxInnerBorderDisabledBrush}}" />
                        <Setter TargetName="InnerBorder" Property="Background"
									Value="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxInnerBackgroundDisabledBrush}}" />
                        <!--<Setter Property="Foreground"
									Value="{DynamicResource {x:Static editorsThemes:EditorsCommonDictionary.ButtonForegroundDisabledBrushKey}}" />-->
                    </Trigger>
                    <DataTrigger Binding="{Binding IsUpdated}" Value="True">
                        <Setter Property="Background" Value="Yellow"/>
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
        <Setter Property="FontFamily" Value="{StaticResource NMXFontFamily}"/>
        <Setter Property="FontSize" Value="11" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="AutomationProperties.AutomationId" 
                Value="{Binding RelativeSource={RelativeSource Self}, Path=Content, TargetNullValue={x:Static sys:String.Empty}}" />
    </Style>

 But after this change my checkbox are not visible. I can check / uncheck them but they are not visible or displayed properly. They become transparent.

 

My actual requriement is, I want to run this trigger on checkboxes:

<DataTrigger Binding="{Binding IsUpdated}" Value="True">
        <Setter Property="Background" Value="Yellow"/>
</DataTrigger>

 So that background of checkbox will get change accordingly.

 

Please suggest me how i can make it work.

 

Thanks,
Piyush

Posted 4 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hello,

It looks like you changed all of the brush resource references from their defaults and perhaps what you entered isn't resolving correctly.  That's probably why you don't see things working correctly now.  I would suggest reverting back to our original style and adding your data trigger in.


Actipro Software Support

Posted 4 years ago by Piyush Parsai
Avatar

Hi,

I have tried what you are suggested like this:

 <Style TargetType="CheckBox" BasedOn="{StaticResource {x:Static ribbon:RibbonStyles.CheckBoxKey}}">
        <Setter Property="FontFamily" Value="{StaticResource NMXFontFamily}"/>
        <Setter Property="FontSize" Value="11" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="AutomationProperties.AutomationId" 
                Value="{Binding RelativeSource={RelativeSource Self}, Path=Content, TargetNullValue={x:Static sys:String.Empty}}" />
 
        <Style.Triggers>
        <DataTrigger Binding="{Binding IsUpdated}" Value="True">
            <Setter Property="Background" Value="Yellow"/>
        </DataTrigger>
        </Style.Triggers>
</Style>

 But this is not working.

Background of checkbox is not getting higlighted when trigger runs.
If i remove the BasedOn style

BasedOn="{StaticResource {x:Static ribbon:RibbonStyles.CheckBoxKey}}"

 than this trigger works. But i don't want to remove BasedOn becasue it will change style of checkbox.

Please suggeste me some workaround for this.

 

Thanks,
Piyush

Posted 4 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

If the background isn't taking effect and you are sure that the DataTrigger is actually firing, perhaps it's something in the Template that is overriding the background setting.  You could include our default Template setter too and add your DataTrigger to the end of that instead.  But note that you'll want to use the TargetName in your Setter that we do in our own template triggers when setting backgrounds.


Actipro Software Support

Posted 4 years ago by Piyush Parsai
Avatar

Hi,

In checkbox control template ComponentResourceKey is given as

ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},
 ResourceId=OfficeCheckBoxOuterBorderPressedBrush}

 Please refer this code:

<Setter TargetName="OuterBorder" Property="BorderBrush" 
 Value="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxOuterBorderPressedBrush}}" />

When I added checkbox template in my style, ComponentResourceKey doesn't get resolved.
It seems reference to TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxOuterBorderPressedBrush
is not getting in style.

Can you let us know how we can give reference of TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxOuterBorderPressedBrush in our style.

OR

What assembly we reference we need to add to resolve reference "TypeInTargetAssembly={x:Type editors:PartEditBox},ResourceId=OfficeCheckBoxOuterBorderPressedBrush"

[Modified 4 years ago]

Posted 4 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hello,

The resource you mention is in the Editors assembly and you need to make sure you have the "editors" xmlns set appropriate at the top of your XAML so it can be recognized.  All of our Editors samples have it at the top if you need an example.


Actipro Software Support

The latest build of this product (v2019.1 build 0681) was released 1 month ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.