问题描述
我已使用此代码创建了一个客户ToggleSwitch，然后根据自己的需要更改了设计。 WPF toggleswitch code
但是，当它加载到我的页面上时，它看起来像这样：
对此我真的很陌生，所以我了解到我遇到了一个基于用户的错误，但是我几个小时后还是无法解决！
我显然需要确保它加载了一个检查值，但是，如果我将isChecked ="true"放在xaml中，则它仍然像未分配的图片一样加载。
实际上，我在代码中有一个设置“ toggleDefault”，我想在加载表格时使用它来表示：
togContact = toggleDefault
但是，由于我什至无法使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以具有opacity为0。
下面的按钮将加载为红色，然后关闭?
<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>