wpf - IsChecked="false" 时更改 ToogleButton 的颜色
问题描述
当然,这个问题已经被问过了,但我还没有找到。我想在 IsChecked="false" 时更改 ToogleButton 的颜色。ToogleButton 所在的网格的背景是深色的。因此,当 IsChecked 属性为 false 时,用户会看到:
如果 IsChecked 为真,则 ToogleButton 的颜色很好:
我正在使用材料设计。
我尝试了以下代码,但它改变了 ToogleButton 的形状:
<ToggleButton IsChecked="{Binding Path=SelectedAllData, Mode=TwoWay}"
Width="50" Height="20" Background="{StaticResource PrimaryHueDarkBrush}" Cursor="Hand">
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Style.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Background" Value="{StaticResource PrimaryHueLightBrush}"/>
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
另外我想知道如何将IsEnababled
属性设置为false
when IsChecked="true"
。谢谢!
编辑
解决方案
Fill
模板中的Ellipse
是当前硬编码的,因此您必须复制整个模板并对其进行编辑:
<ToggleButton>
<ToggleButton.Template>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<ControlTemplate.Resources>
<SineEase x:Key="RippleEasingFunction" EasingMode="EaseInOut"/>
<Storyboard x:Key="ShowRipple">
<DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="Opacity"
EasingFunction="{StaticResource RippleEasingFunction}"
To="0.26" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
EasingFunction="{StaticResource RippleEasingFunction}"
From="1" To="2.5" Duration="0:0:0.2"/>
<DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
EasingFunction="{StaticResource RippleEasingFunction}"
From="1" To="2.5" Duration="0:0:0.2"/>
</Storyboard>
<Storyboard x:Key="HideRipple">
<DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="Opacity"
EasingFunction="{StaticResource RippleEasingFunction}"
To="0" Duration="0:0:0.3"/>
</Storyboard>
</ControlTemplate.Resources>
<Viewbox Width="34">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition From="*" To="Checked">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="23.5">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="Checked" To="Unchecked">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder">
<EasingDoubleKeyFrame KeyTime="0" Value="23.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder"
Duration="0" To="23.5" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder"
Duration="0" To="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Rectangle x:Name="Track"
Fill= "{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(materialDesign:ToggleButtonAssist.SwitchTrackOffBackground)}"
Opacity="0.26"
HorizontalAlignment="Left"
Height="15"
Margin="4.211,5,4.211,0"
Stroke="{x:Null}"
VerticalAlignment="Top"
Width="40"
RadiusY="7.5"
RadiusX="7.5"/>
<Grid x:Name="ThumbHolder"
HorizontalAlignment="Left" VerticalAlignment="Top">
<Ellipse x:Name="RippleThumb"
Fill="{DynamicResource PrimaryHueLightBrush}"
Height="25" Width="25"
IsHitTestVisible="False"
Opacity="0.26"
Margin="0"
HorizontalAlignment="Center" VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1"/>
</Ellipse.RenderTransform>
</Ellipse>
<AdornerDecorator CacheMode="{Binding RelativeSource={RelativeSource Self}, Path=(materialDesign:ShadowAssist.CacheMode)}">
<Ellipse x:Name="Thumb"
Fill="#FFFAFAFA" Stroke="{x:Null}"
HorizontalAlignment="Center" VerticalAlignment="Center"
Width="25" Height="25"
Margin="0,0,0,0"
RenderTransformOrigin="0.5,0.5"
Effect="{DynamicResource MaterialDesignShadowDepth1}">
</Ellipse>
</AdornerDecorator>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
Margin="{TemplateBinding Padding}"
x:Name="ContentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
FlowDirection="LeftToRight"/>
<Grid.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Grid.RenderTransform>
</Grid>
</Grid>
</Viewbox>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="Thumb" Property="Fill" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
<Setter TargetName="Track" Property="Fill" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(materialDesign:ToggleButtonAssist.SwitchTrackOnBackground)}" />
<Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidForegroundBrush}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsChecked" Value="True" />
<Condition Property="materialDesign:ToggleButtonAssist.HasOnContent" Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="ContentPresenter" Property="Content" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(materialDesign:ToggleButtonAssist.OnContent)}" />
<Setter TargetName="ContentPresenter" Property="ContentTemplate" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(materialDesign:ToggleButtonAssist.OnContentTemplate)}" />
</MultiTrigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidBrush}"/>
<Setter TargetName="Thumb" Property="Fill" Value="Red" />
</Trigger>
<Trigger Property="Button.IsDefaulted" Value="true"/>
<Trigger Property="IsMouseOver" Value="true"/>
<Trigger Property="IsPressed" Value="true">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource ShowRipple}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource HideRipple}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Thumb" Property="Fill" Value="#BDBDBD" />
<Setter TargetName="Track" Property="Fill">
<Setter.Value>
<SolidColorBrush Color="Black" Opacity=".12" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
您可以通过设置触发器的Value
属性来更改颜色。在我的示例中IsChecked
设置为。Red
推荐阅读
- android - Recyclerview过滤器在kotlin android中不起作用
- rest - 如何访问 delta Lake 中的金表以获取 Web 仪表板和其他?
- javascript - psuh 数据到数据属性
- c++ - 如何在 C++ 中“链接”管道超过 2 个管道?目前我在第二个命令上从 Bash 收到错误的文件描述符错误
- php - 服务器是否应该在 400 Bad Request 上返回错误页面或再次呈现表单
- pip - 强制 pip 卸载
- asp.net-core - 如何从 ASP.NET Core Identity 类访问其他实体?
- swift - 滚动后collectionview项目将不在中心
- excel - 如何使用 vba 更改代码中的一行
- c# - 具有 AAD 应用程序 ID 的应用程序无权向收件人生成有关 [...] 的通知