Блог

Итак, у меня это CheckBox Style основано на MaterialDesignActionCheckBox :

 <Style x:Key="MaterialDesignActionAccentCheckBox2" TargetType="{x:Type CheckBox}" BasedOn="{StaticResource MaterialDesignActionCheckBox}">
   <Setter Property="Control.Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type CheckBox}">
            <Ellipse x:Name="ellipse"
                     Width="15"
                     Height="15"
                     Fill="#353535"/>
            <ControlTemplate.Triggers>
               <Trigger Property="IsChecked" Value="False">
                  <Setter TargetName="ellipse" Property="Visibility" Value="Collapsed"/>
               </Trigger>
               <Trigger Property="IsChecked" Value="True">
                  <Setter TargetName="ellipse" Property="Visibility" Value="Visible"/>
               </Trigger>
            </ControlTemplate.Triggers>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
   <Style.Triggers>
      <Trigger Property="IsChecked" Value="True">
         <Setter Property="Background" Value="Transparent"/>
         <Setter Property="Foreground" Value="Transparent"/>
      </Trigger>
      <Trigger Property="IsChecked" Value="False">
         <Setter Property="Background" Value="Transparent"/>
         <Setter Property="BorderThickness" Value="1"/>
         <Setter Property="VerticalContentAlignment" Value="Center"/>
         <Setter Property="FontSize" Value="10"/>
      </Trigger>
   </Style.Triggers>
</Style>
 

И теперь я хотел V , чтобы знак был установлен, когда CheckBox установлен флажок, поэтому я делаю это Transparent (под IsChecked true) и помещаю Ellipse .
После того, как я добавил это ControlTemplate.Triggers , я не вижу своего Ellipse .
Все, что я хочу сделать, это показать это Ellipse внутри моего Checkbox .

Шаблоны Contol определяют внешний вид, визуальные состояния, переходы между ними и необходимые элементы управления для элемента управления. Отсутствие любого из этих компонентов приведет к неожиданному поведению. Вы можете просмотреть все необходимые части и состояния элемента управления в MSDN, например, для элемента CheckBox управления:

• Стили и шаблоны флажков

В вашем стиле флажков отсутствуют некоторые элементы управления и состояния, и именно поэтому он не работает. Важно отметить, что вы не можете основывать шаблон элемента управления на другом, как это возможно для стилей. Следовательно, вам придется скопировать и адаптировать существующий шаблон или создать свой собственный с нуля. Для Material Design вы можете найти стили и шаблоны на GitHub.

Хорошей новостью является то, что вам может быть намного проще достичь своей цели, поскольку некоторые части стиля по умолчанию, такие как флажок для флажка действия, могут быть переопределены.

Создайте стиль, основанный на MaterialDesignActionCheckBox стиле. Установите a PackIcon в качестве значения ToggleButtonAssist.OnContent свойства. Вы можете указать значок, который вам нравится, через Kind свойство. Вы можете взглянуть на PackIconKind перечисление, чтобы найти все доступные значки.

 <Style x:Key="EllipseMaterialDesignActionCheckBox" TargetType="{x:Type CheckBox}" BasedOn="{StaticResource MaterialDesignActionCheckBox}">
   <Setter Property="wpf:ToggleButtonAssist.OnContent">
      <Setter.Value>
         <wpf:PackIcon Kind="Circle" FlowDirection="LeftToRight" />
      </Setter.Value>
   </Setter>
</Style>
 

Вместо значка пакета вы, конечно, можете установить свой эллипс, просто замените значок пакета приведенным ниже кодом. Fill Привязка гарантирует , что к эллипсу будет применен Foreground цвет родительского CheckBox элемента .

 <Ellipse Fill="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type CheckBox}}}" Width="20" Height="20"/>
 

Если вы хотите изменить цвет флажка, вы можете либо применить цвет непосредственно к Fill свойству в стиле, либо добавить параметр настройки к CheckBox стилю, который задает Foreground свойство.

 <Setter Property="Foreground" Value="#353535"/>
 

Чтобы использовать стиль, ссылайтесь на него как StaticResource (или DynamicResource , если вам нужно).

 <CheckBox Style="{StaticResource EllipseMaterialDesignActionCheckBox}"/>
 

Чтобы автоматически применять стиль ко всем CheckBox элементам в области видимости, создайте неявный стиль.

 <Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource EllipseMaterialDesignActionCheckBox}"/>
 

Вот несколько скриншотов для сравнения, мои основные и второстепенные цвета DeepPurple , а Lime ваши могут отличаться. Первый флажок установлен по умолчанию, во втором используется значок пакета в виде круга (использование эллипса то же самое), а в последнем Foreground применяется ваш цвет.