CheckBox IsChecked not reflecting in UI [WPF, XAML, C#]-CodePudding

so I have this WPF application which custom styling (but just colors and spacing and stuff). My Checkboxes have this weird behavior when clicking them that the IsChecked state is not represented in the UI. When clicking the CheckBox the click animation happens but no tick appears. This is how it looks

Here an example from a Window content:

<CheckBox Grid.Row="3" x:Name="CheckboxBattAlerts" VerticalAlignment="Center" IsChecked="False" IsThreeState="False"
          Content="{x:Static p:Resources.Option_BatteryAlerts}"
          Checked="CheckboxBattAlerts_CheckedChanged" Unchecked="CheckboxBattAlerts_CheckedChanged" />

CheckChanged handle method:

private void CheckboxBattAlerts_CheckedChanged(object sender, RoutedEventArgs e)
{
    App.Current.BattAlertsEnabled = CheckboxBattAlerts.IsChecked ?? false;
}

The IsChecked is changing as it should though.

Maybe this is because of styling, but on removing the styling I couldn't see a change. (I commented out the code below) Here is the XAML styling that applies to the CheckBox:

<Application.Resources>
    (...)
    <Style TargetType="{x:Type Control}">
        <Setter Property="Foreground" Value="{StaticResource TextBlockBrush}" />
        <Setter Property="Margin" Value="6,4" />
        <Setter Property="FontSize" Value="10pt" />
        <Setter Property="FontWeight" Value="Normal" />
        <Setter Property="FontFamily" Value="Bahnschrift SemiLight" />
    </Style>

    <Style TargetType="{x:Type CheckBox}">
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="Margin" Value="4,2"/>
    </Style>
</Application.Resources>

Also when I add Background="White" Foreground="Red" to any CheckBox, nothing changes.

I searched around but the "solutions" I've been able to find didn't help at all.

So, what am I missing? Any ideas?

CodePudding user response：

The problem is that you are using the default CheckBox on a black background. The check mark is therefore not visible.

To change the colors you must override the default template. You can find an example template at Microsoft Docs: CheckBox ControlTemplate Example. You want to adjust the colors of the "optionMark" and "indeterminateMark" elements, as well as the colors defined in the triggers (e.g., mouse over etc.):

<CheckBox IsChecked="False"
          HorizontalAlignment="Left">
  <CheckBox.Template>
    <ControlTemplate TargetType="{x:Type CheckBox}">
      <Grid x:Name="templateRoot"
            Background="Transparent"
            SnapsToDevicePixels="True">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Border x:Name="checkBoxBorder"
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                Margin="1"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
          <Grid x:Name="markGrid">
            <Path x:Name="optionMark"
                  Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z "
                  Fill="{TemplateBinding Foreground}"
                  Margin="1"
                  Opacity="0"
                  Stretch="None" />
            <Rectangle x:Name="indeterminateMark"
                        Fill="Gray"
                        Margin="2"
                        Opacity="0" />
          </Grid>
        </Border>
        <ContentPresenter x:Name="contentPresenter"
                          Grid.Column="1"
                          Focusable="False"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          Margin="{TemplateBinding Padding}"
                          RecognizesAccessKey="True"
                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
      </Grid>
      <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver"
                  Value="true">
          <Setter Property="Background"
                  TargetName="checkBoxBorder"
                  Value="white" />
          <Setter Property="BorderBrush"
                  TargetName="checkBoxBorder"
                  Value="White" />
          <Setter Property="Fill"
                  TargetName="optionMark"
                  Value="Black" />
          <Setter Property="Fill"
                  TargetName="indeterminateMark"
                  Value="Black" />
        </Trigger>
        <Trigger Property="IsEnabled"
                  Value="false">
          <Setter Property="Background"
                  TargetName="checkBoxBorder"
                  Value="Gray" />
          <Setter Property="BorderBrush"
                  TargetName="checkBoxBorder"
                  Value="Gray" />
          <Setter Property="Fill"
                  TargetName="optionMark"
                  Value="Gray" />
          <Setter Property="Fill"
                  TargetName="indeterminateMark"
                  Value="Gray" />
        </Trigger>
        <Trigger Property="IsPressed"
                  Value="true">
          <Setter Property="Background"
                  TargetName="checkBoxBorder"
                  Value="White" />
          <Setter Property="BorderBrush"
                  TargetName="checkBoxBorder"
                  Value="White" />
          <Setter Property="Fill"
                  TargetName="optionMark"
                  Value="Black" />
          <Setter Property="Fill"
                  TargetName="indeterminateMark"
                  Value="Black" />
        </Trigger>
        <Trigger Property="IsChecked"
                  Value="true">
          <Setter Property="Opacity"
                  TargetName="optionMark"
                  Value="1" />
          <Setter Property="Opacity"
                  TargetName="indeterminateMark"
                  Value="0" />
        </Trigger>
        <Trigger Property="IsChecked"
                  Value="{x:Null}">
          <Setter Property="Opacity"
                  TargetName="optionMark"
                  Value="0" />
          <Setter Property="Opacity"
                  TargetName="indeterminateMark"
                  Value="1" />
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </CheckBox.Template>
</CheckBox>