Materialdesigninxamltoolkit: How do I change the border color in wpf checbox?

Created on 9 Jan 2020  路  3Comments  路  Source: MaterialDesignInXAML/MaterialDesignInXamlToolkit

How do I change the border color in wpf checbox?

For example, I want to express it with white border when it is black.

from
CheckBoxFromGrid

to
checkbox

Please tell me how to change.
Thank you.

question

Most helpful comment

Try this:

<StackPanel VerticalAlignment="Center" Margin="32, 0">
    <CheckBox 
        Content="Normal CheckBox [IsChecked = False]"/>

    <CheckBox 
        Content="Normal CheckBox [IsChecked = True]"
        IsChecked="True"/>


    <CheckBox 
        Content="Custom CheckBox [IsChecked = False]">
        <CheckBox.Resources>
            <!--Unchecked state-->
            <SolidColorBrush x:Key="MaterialDesignCheckBoxOff" Color="Red"/>
            <!--Checked state-->
            <SolidColorBrush x:Key="PrimaryHueMidBrush" Color="Green"/>
        </CheckBox.Resources>
    </CheckBox>

    <CheckBox 
        Content="Custom CheckBox [IsChecked = True]"
        IsChecked="True">
        <CheckBox.Resources>
            <!--Unchecked state-->
            <SolidColorBrush x:Key="MaterialDesignCheckBoxOff" Color="Red"/>
            <!--Checked state-->
            <SolidColorBrush x:Key="PrimaryHueMidBrush" Color="Green"/>
        </CheckBox.Resources>
    </CheckBox>
</StackPanel>

Output:
Custom CheckBox

All 3 comments

Try this:

<StackPanel VerticalAlignment="Center" Margin="32, 0">
    <CheckBox 
        Content="Normal CheckBox [IsChecked = False]"/>

    <CheckBox 
        Content="Normal CheckBox [IsChecked = True]"
        IsChecked="True"/>


    <CheckBox 
        Content="Custom CheckBox [IsChecked = False]">
        <CheckBox.Resources>
            <!--Unchecked state-->
            <SolidColorBrush x:Key="MaterialDesignCheckBoxOff" Color="Red"/>
            <!--Checked state-->
            <SolidColorBrush x:Key="PrimaryHueMidBrush" Color="Green"/>
        </CheckBox.Resources>
    </CheckBox>

    <CheckBox 
        Content="Custom CheckBox [IsChecked = True]"
        IsChecked="True">
        <CheckBox.Resources>
            <!--Unchecked state-->
            <SolidColorBrush x:Key="MaterialDesignCheckBoxOff" Color="Red"/>
            <!--Checked state-->
            <SolidColorBrush x:Key="PrimaryHueMidBrush" Color="Green"/>
        </CheckBox.Resources>
    </CheckBox>
</StackPanel>

Output:
Custom CheckBox

Hi, my goal is to change the border color dynamically and I am struggling on this.
I did the following:

<Style TargetType="{x:Type local:CustomCheckbox}" x:Key="dirtyCustomCheckbox" BasedOn="{StaticResource MaterialDesignCheckBox}">
    <Style.Resources>
        <SolidColorBrush x:Key="MaterialDesignCheckBoxOff" Color="Red" />
    </Style.Resources>
</Style>

<Style TargetType="{x:Type local:CustomCheckbox}" BasedOn="{StaticResource MaterialDesignCheckBox}">
    <Style.Triggers>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding IsDirty, RelativeSource={RelativeSource Self}}" Value="True" />
                <Condition Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}" Value="True" />
            </MultiDataTrigger.Conditions>
            <MultiDataTrigger.Setters>
                <Setter Property="Background" Value="Red" />
            </MultiDataTrigger.Setters>
        </MultiDataTrigger>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding IsDirty, RelativeSource={RelativeSource Self}}" Value="True" />
                <Condition Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}" Value="False" />
            </MultiDataTrigger.Conditions>
            <MultiDataTrigger.Setters>
                <Setter Property="Style" Value="{StaticResource dirtyCustomCheckbox}" />
            </MultiDataTrigger.Setters>
        </MultiDataTrigger>
    </Style.Triggers>
</Style>

However it doesn't work as it rises an exception: ArgumentException: Style object is not allowed to affect the Style property of the object to which it applies.

Basically I have this IsDirty dependency property and I would like to change the background if IsDirty == true and IsChecked == true (this works) and change the border color if IsDirty == true and IsChecked == false.
This would be easy on a standard checkbox by using a setter: . But this doesn't work with MaterialCheckbox.
I'm using a style in a dictionary, so that every CustomCheckbox inherits from it.
Many thanks if someone could help me out with this.

Was this page helpful?
0 / 5 - 0 ratings