编辑MahApps Metro Circle切换按钮

时间:2016-12-08 14:41:30

标签: wpf xaml user-interface mahapps.metro

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

我的直觉是在我的存储库中创建一个完整的样式来取代Metro Style,但我想我会问周围是否有人可以帮助我。

非常感谢任何提示。

更新1: 我尝试使用BasedOn属性来保持代码量。然后,当" IsChecked"然后我将背景颜色设置为从黑色切换为白色。是真的。 这是我添加的代码:

   <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>

我希望将其中很多内容转化为风格,但我必须保持功能。

2 个答案:

答案 0 :(得分:2)

是的,所以它不能用你的例子的原因是你不能通过Style中的触发器覆盖与ControlTemplate交互的触发器....

所以,如果我们去看看第615行here(顺便说一下,我假设你的地铁中有一个文件命名相同),我们在模板中看到了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>

有意义吗? :)

答案 1 :(得分:1)

为了关闭循环,并针对问题向其他人发布我的答案,我最终创建了一个我放在我的样式库中的样式。我认为我的解决方案可能有点独特,因为我实际上并没有在我的解决方案中访问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>

希望这有助于其他人。