编辑 MahApps Metro Circle Toggle 按钮

Question

我知道围绕 MahApps Metro 样式存在一些问题，但我还没有找到可以解决我遇到的问题的问题。我有一个正在维护的应用程序，其中很多都是我使用中央样式 XAML 存储库帮助构建的。我没有构建的部分使用 MahApps 的 Metro Circle Toggle Button 样式。根据我的利益相关者的说法，我需要将选定状态更改为与按钮的正常状态形成鲜明对比。但是，我无法在我的应用程序中找到访问该样式的位置。

我的直觉是在我的存储库中创建一个完整的样式来替换 Metro 样式，但我想我会四处打听这里是否有人可以帮助我。

如有任何提示，我们将不胜感激。

更新 1： 我尝试使用 BasedOn 属性来减少代码量。然后，当 "IsChecked" 为 True 时，我将背景颜色设置为从黑色切换为白色。这是我添加的代码：

   <Style x:Key="CustomCircleToggleButtonStyle"
       TargetType="{x:Type ToggleButton}"
       BasedOn="{StaticResource  MetroCircleToggleButtonStyle}">
    <Setter Property="Background" Value="{StaticResource DarkBorder}"/>
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True" >
            <Setter Property="Background" Value="White"/>
        </Trigger>
    </Style.Triggers>
  </Style>

不幸的是，MahApps 下沉时有一些动画使按钮从黑色变为白色，然后逐渐变为深蓝色，我正试图摆脱这种颜色。

这是 wpf 切换按钮：

   <ToggleButton Width="50" IsEnabled="{Binding IsMultipleSelected,Converter=    {StaticResource BooleanNegate}}"
                          Height="50"
                          Style="{DynamicResource CustomCircleToggleButtonStyle}" 
                          Command="{Binding Path=GroupSelectCommand}" 
                          IsChecked="{Binding IsLasoSelected}">

            <Rectangle Width="20"
                           Height="20"
                           Fill="{DynamicResource IconButtonActiveBorder}">
                <Rectangle.OpacityMask>
                    <VisualBrush Stretch="Fill"
                                 Visual="{DynamicResource appbar_lasso}" />
                </Rectangle.OpacityMask>
            </Rectangle>
        </ToggleButton>

我希望将其中的很多内容移动到样式中，但我必须保持功能。

Answer 1

是的，它不适用于您的示例的原因是您无法覆盖通过样式中的触发器与 ControlTemplate 交互的触发器....

因此，如果我们看一下第 615 行 here（顺便说一句，我假设您的 metro 文件中有一个同名文件）我们会在模板中看到 ControlTemplate.Triggers IsChecked 正在更改 ellipsebg 椭圆的不透明度。它又很难填充 {DynamicResource AccentColorBrush}...

所以...您可以在实例级别覆盖该画笔...或者，只需编辑完整样式模板以一起使用不同的画笔。

换句话说，您可以将 Fill="{DynamicResource AccentColorBrush}" 的第 630 行更改为另一个画笔或画笔资源，它会继承到每个实例（我会选择保留可集中维护的属性）。

或者，例如：

<StackPanel>
  <StackPanel.Resources>
     <SolidColorBrush x:Key="AccentColorBrush">Red</SolidColorBrush>
     <Style TargetType="ToggleButton" 
            BasedOn="{DynamicResource CustomCircleToggleButtonStyle}"/>
  </StackPanel.Resources>

  <ToggleButton/>
  <ToggleButton/>
  <ToggleButton/>

</StackPanel>

有道理吗？ :)

Answer 2

为了结束这个循环，post 我对其他有问题的人的回答，我最终创建了一个样式，并将其放入我的样式库中。我认为我的解决方案可能有点独特，因为我实际上无法访问我的解决方案中的 MahApps.Metro 源代码。

这是我所做的：

   <Style x:Key="CircleButton" TargetType="ToggleButton">
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="Margin" Value="2"/>
    <Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisual}"/>
    <Setter Property="Margin" Value="2 2 2 2"/>
    <Setter Property="Width" Value="45"/>
    <Setter Property="Height" Value="45"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Grid>
                    <Ellipse x:Name="BorderCircle">
                        <Ellipse.Fill>
                            <SolidColorBrush Color="SlateGray"/>
                        </Ellipse.Fill>
                    </Ellipse>
                    <Ellipse  x:Name="BodyCircle" Margin="3" >
                        <Ellipse.Fill >
                            <SolidColorBrush Color="Black"/>
                        </Ellipse.Fill>
                    </Ellipse>
                    <Rectangle x:Name="Mask"
                        Width="20"
                           Height="20"
                           Fill="{DynamicResource IconButtonActiveBorder}">
                        <Rectangle.OpacityMask>
                            <VisualBrush Stretch="Fill"
                                 Visual="{DynamicResource appbar_lasso}" />
                        </Rectangle.OpacityMask>
                    </Rectangle>
                    <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="BodyCircle" Property="Fill" Value="White"/>
                        <Setter TargetName="BorderCircle" Property="Fill" Value="Black"/>
                        <Setter TargetName="Mask" Property="Fill" Value="Black"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="BodyCircle" Property="Fill" Value="DarkOrange"/>
                        <Setter TargetName="BorderCircle" Property="Fill" Value="Black"/>
                        <Setter TargetName="Mask" Property="Fill" Value="Black"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这让我可以完全控制切换按钮的所有方面，并获得与以前相同的外观。我所要做的就是从 WPF 视图中调用它来实现它：

    <ToggleButton  IsEnabled="{Binding IsMultipleSelected,Converter={StaticResource BooleanNegate}}"
                          Style="{DynamicResource CircleButton}" 
                          Command="{Binding Path=GroupSelectCommand}" 
                          IsChecked="{Binding IsLasoSelected}">
        </ToggleButton>

希望这对其他人有所帮助。

编辑 MahApps Metro Circle Toggle 按钮

Editing a MahApps Metro Circle Toggle button

wpf

user-interface

xaml

mahapps.metro