Как установить переключаемый цвет для ToggleButton в xaml?

Question

Так что, возможно, это действительно простой ответ. В своем приложении UWP я пытался начать использовать встроенные элементы управления Windows вместо своих собственных кнопок, созданных из границ вокруг текстовых блоков. Я делаю это потому, что это проще, но самое главное, мне нужна удобная кнопка переключения.

Я узнал о CommandBar и AppBarToggleButton, и, похоже, это именно то, что я хочу. Я могу установить цвет фона CommandBar просто отлично, но при переключении AppBarToggleButton всегда является цветом акцента пользователя. Я должен быть в состоянии определить это, чтобы соответствовать брендингу моего приложения (зеленый). У меня такое чувство, что мне нужно использовать какую-то тему, поскольку ее нет в меню свойств кисти объекта xaml, но с тех пор я потерялся.

Так что это мой код, хотя он очень простой.

<CommandBar Background="{StaticResource MapButtonsBackgroundAcrylic}">
    <AppBarToggleButton x:Name="tog_view_mode" Icon="View" Label="View Mode" Foreground="White"/>
    <AppBarSeparator Foreground="White"/>
    <AppBarToggleButton x:Name="tog_edit_mode" Icon="Edit" Label="Edit Mode" Foreground="White"/>
</CommandBar>

И вот что это мне дает. Мой пользовательский акцент - синий. Кроме того, изменение черного текста не очень хорошо.

Поскольку в моем приложении будет несколько переключателей, я хотел бы либо создать один стиль, который я могу назначить им, либо изменить цвет акцента, который видит приложение? Я не уверен, какая здесь правильная процедура, поскольку я новичок в модификации встроенных элементов управления.

Так что мне нужен способ, когда при переключении,

• Фон должен быть зеленым, скажем, # FF008000
• Передний план должен быть белым.

Кто-нибудь может мне помочь?

Answer 1

Вы можете переопределить шаблон стиля для AppBarToggleButton, чтобы добиться этого. Для этого вам нужно щелкнуть правой кнопкой мыши на AppBarToggleButton> Изменить шаблон> Редактировать копию .

Затем добавьте соответствующий код в визуальное состояние. В вашем случае визуальное состояние " Проверено ".

    <VisualState x:Name="Checked">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckedHighlightBackground" Storyboard.TargetProperty="Opacity">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowCheckGlyph" Storyboard.TargetProperty="Opacity">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Background">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="Your color here(green)"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                    </ObjectAnimationUsingKeyFrames>
                    <PointerUpThemeAnimation Storyboard.TargetName="OverflowContentRoot" />
                  </Storyboard>
         </VisualState>

Надеюсь, это поможет .. пожалуйста, не стесняйтесь задавать любые вопросы, которые могут у вас возникнуть.