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

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.

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

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.

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

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.

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

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.

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"

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.