c# - 将 isChecked 绑定添加到自定义 ToggleSwitch
问题描述
我使用此代码创建了一个客户 ToggleSwitch，然后更改设计以适合我。 WPF 切换开关代码
但是，当它加载到我的页面上时，它看起来像这样：
我对此真的很陌生，所以我知道我有一个基于用户的错误，我真的不明白，但是几个小时后我无法修复它！
我显然需要确保它加载了一个选中的值，但是如果我放入isChecked ="true"xaml 那么它仍然像未分配的图片一样加载。实际上，我的代码中有一个设置“toggleDefault”，我想在加载表单时使用它来表示：
togContact = toggleDefault
但是，由于我什至无法让 XAML 状态正常工作，所以这也不起作用。
任何建议都会很棒。
XAML 自定义代码：
<Window.Resources>
<Style x:Key="myToggleSwitch" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Viewbox>
<Grid x:Name="toggleSwitch">
<Border x:Name="Border" CornerRadius="10"
Background="#FFFFFFFF"
Width="80" Height="25">
<Border.Effect>
<DropShadowEffect ShadowDepth="0.5" Direction="0" Opacity="0.3" />
</Border.Effect>
<Ellipse x:Name="Ellipse" Fill="#FFFFFFFF" Stretch="Uniform"
Margin="2 2 2 1"
Stroke="Gray" StrokeThickness="0.2"
HorizontalAlignment="Left" Width="22" >
<Ellipse.Effect>
<DropShadowEffect BlurRadius="10" ShadowDepth="1" Opacity="0.3" Direction="260" />
</Ellipse.Effect>
</Ellipse>
</Border>
<TextBlock x:Name="txtOff" Text="OFF" Margin="0 0 8 0" VerticalAlignment="Center" FontWeight="DemiBold" HorizontalAlignment="Right" Foreground="White"/>
<TextBlock x:Name="txtOn" Text="ON" Margin="15 0 0 0" VerticalAlignment="Center" FontWeight="DemiBold" Foreground="White" HorizontalAlignment="Left"/>
</Grid>
</Viewbox>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Checked">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="#34A543"
Duration="0:0:0.1" />
<ThicknessAnimation Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="Margin"
To="56 2 2 1"
Duration="0:0:0.1" />
<DoubleAnimation
Storyboard.TargetName="txtOff"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="1.0" To="0.0" Duration="0:0:0:0.1" />
<DoubleAnimation
Storyboard.TargetName="txtOn"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="0.0" To="1.0" Duration="0:0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Unchecked">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="#C2283B"
Duration="0:0:0.1" />
<ThicknessAnimation Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="Margin"
To="2 2 2 1"
Duration="0:0:0.1" />
<DoubleAnimation
Storyboard.TargetName="txtOff"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="0" To="1.0" Duration="0:0:0:0.1" />
<DoubleAnimation
Storyboard.TargetName="txtOn"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="1.0" To="0.0" Duration="0:0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
下面是我在网格中的控制代码：
<ToggleButton x:Name="togContact" IsChecked="true" Margin="5" Grid.Column="2" Grid.Row="0" Height="20" Style="{StaticResource myToggleSwitch}" />
编辑：我尝试将此添加到 XAML：
IsChecked="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=IsChecked, Mode=TwoWay}"
这没有改变。
然后我尝试在 C# 代码中将 isChecked 设置为 FALSE。这很有趣，因为它使 OFF 在加载时出现在 UI 中。
然后我尝试在 c# 代码中将 isChecked 更改为 True，但出现异常！
{"'Border' name cannot be found in the name scope of 'System.Windows.Controls.ControlTemplate'."}
所以我显然已经填满了自定义切换按钮代码......
解决方案
发生这种情况是因为按钮正在加载以下样式：
<Grid x:Name="toggleSwitch">
<Border x:Name="Border" CornerRadius="10"
Background="#C2283B"
Width="80" Height="25">
<Border.Effect>
<DropShadowEffect ShadowDepth="0.5" Direction="0" Opacity="0.3" />
</Border.Effect>
<Ellipse x:Name="Ellipse" Fill="#FFFFFFFF" Stretch="Uniform"
Margin="2 2 2 1"
Stroke="Gray" StrokeThickness="0.2"
HorizontalAlignment="Left" Width="22" >
<Ellipse.Effect>
<DropShadowEffect BlurRadius="10" ShadowDepth="1" Opacity="0.3" Direction="260" />
</Ellipse.Effect>
</Ellipse>
</Border>
<TextBlock x:Name="txtOff" Text="OFF" Margin="0 0 8 0" VerticalAlignment="Center" FontWeight="DemiBold" HorizontalAlignment="Right" Foreground="White"/>
<TextBlock x:Name="txtOn" Opacity="0" Text="ON" Margin="15 0 0 0" VerticalAlignment="Center" FontWeight="DemiBold" Foreground="White" HorizontalAlignment="Left"/>
</Grid>
要将切换按钮加载为 ON 或 OFF，您需要更改切换开关中边框的背景颜色，并将 txtOff 或 txtOn 设置TextBlock为opacity0。
下面的按钮将加载为红色和关闭
<Window.Resources>
<Style x:Key="myToggleSwitch" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Viewbox>
<Grid x:Name="toggleSwitch">
<Border x:Name="Border" CornerRadius="10"
<!-- Background color here -->
Background="#C2283B"
Width="80" Height="25">
<Border.Effect>
<DropShadowEffect ShadowDepth="0.5" Direction="0" Opacity="0.3" />
</Border.Effect>
<Ellipse x:Name="Ellipse" Fill="#FFFFFFFF" Stretch="Uniform"
Margin="2 2 2 1"
Stroke="Gray" StrokeThickness="0.2"
HorizontalAlignment="Left" Width="22" >
<Ellipse.Effect>
<DropShadowEffect BlurRadius="10" ShadowDepth="1" Opacity="0.3" Direction="260" />
</Ellipse.Effect>
</Ellipse>
</Border>
<TextBlock x:Name="txtOff" Text="OFF" Margin="0 0 8 0" VerticalAlignment="Center" FontWeight="DemiBold" HorizontalAlignment="Right" Foreground="White"/>
<!-- Opacity change here -->
<TextBlock x:Name="txtOn" Opacity="0" Text="ON" Margin="15 0 0 0" VerticalAlignment="Center" FontWeight="DemiBold" Foreground="White" HorizontalAlignment="Left"/>
</Grid>
</Viewbox>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Checked">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="#34A543"
Duration="0:0:0.1" />
<ThicknessAnimation Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="Margin"
To="56 2 2 1"
Duration="0:0:0.1" />
<DoubleAnimation
Storyboard.TargetName="txtOff"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="1.0" To="0.0" Duration="0:0:0:0.1" />
<DoubleAnimation
Storyboard.TargetName="txtOn"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="0.0" To="1.0" Duration="0:0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Unchecked">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="#C2283B"
Duration="0:0:0.1" />
<ThicknessAnimation Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="Margin"
To="2 2 2 1"
Duration="0:0:0.1" />
<DoubleAnimation
Storyboard.TargetName="txtOff"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="0" To="1.0" Duration="0:0:0:0.1" />
<DoubleAnimation
Storyboard.TargetName="txtOn"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="1.0" To="0.0" Duration="0:0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
推荐阅读
- c++ - 为什么循环这个数组时我的代码不能正常工作
- kubernetes - 如何在命令行上替换 Helm values.yaml 中数组项中的特定属性值而不是整个数组/映射？
- sql - SQL Group by，但如果值相同则允许重复
- dart - 使用 Dart 中的 map() 等内置方法将嵌套列表（二维列表）转换为一个元素列表
- c++ - 重载索引运算符在 C++ 中不起作用
- android - 将回收站视图中显示的选中复选框的项目保存在列表中
- docker - 如何在 docker 上的 juypter 上的 pyspark 上的 spark 上启动 graphframes？
- javascript - React Material-UI 获取检查的项目列表
- javascript - 如何在不复制片段的情况下传递道具
- python - 如何在 python 中使用多个参数从 API 端点正确获取数据？