为切换按钮提供默认文本 wpf c#
Give the togglebutton a default text wpf c#
我有一个如下所示的这种样式的切换按钮,切换按钮工作得很好,但我想在打开 MainWindow 时为切换按钮设置一个默认文本,它应该显示在 false 状态下,而不是禁用
仅当我对其进行操作(使其打开或关闭)时,切换按钮才会显示文本值,它会显示文本,但默认情况下,用户似乎已被禁用(参见图片)
启动应用后:
设置为:
设置为关闭:
问题是当我 运行 在点击 Toggle 按钮之前应用程序时,屏幕上显示的是 Tooglebutton 被禁用,我需要将此控件初始化为状态“OFF”,
可能吗?
我该怎么做?
App.xaml
<Style x:Key="myToggleSwitch" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<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 40 0" VerticalAlignment="Center" FontWeight="DemiBold" HorizontalAlignment="Right" Foreground="White" FontSize="12" />
<TextBlock x:Name="txtOn" Text="ON" Margin="40 0 0 0" VerticalAlignment="Center" FontWeight="DemiBold" Foreground="White" HorizontalAlignment="Left" FontSize="12" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True" >
<Trigger.EnterActions>
<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>
</Trigger.EnterActions>
<!-- some out fading -->
<Trigger.ExitActions>
<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>
</Trigger.ExitActions>
<Setter Property="Foreground" Value="{DynamicResource IdealForegroundColorBrush}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource GrayBrush7}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
MainWindow.xaml.cs
<Grid>
<ToggleButton x:Name="tog" Style="{StaticResource myToggleSwitch}" Width="150" Checked="tog_Checked" Unchecked="tog_Unchecked" ></ToggleButton>
</Grid>
更新:
<Style x:Key="myToggleSwitch" TargetType="{x:Type ToggleButton}">
<Setter Property="IsChecked" Value="False"/> <!-- What I have added -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<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 40 0" VerticalAlignment="Center" FontWeight="DemiBold" HorizontalAlignment="Right" Foreground="White" FontSize="12" />
<TextBlock x:Name="txtOn" Text="ON" Margin="40 0 0 0" VerticalAlignment="Center" FontWeight="DemiBold" Foreground="White" HorizontalAlignment="Left" FontSize="12" />
</Grid>
更新 2(测试 Jason 的解决方案)。
这是我得到的:
由于您的颜色是通过对 IsChecked
状态变化作出反应来设置的,因此您只需要您的初始值与 false
状态相匹配。将边框颜色设置为关闭颜色(红色)而不是白色。那应该可以满足您的需求。
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid x:Name="toggleSwitch">
<Border x:Name="Border" CornerRadius="10"
Background="#C2283B"
Width="80" Height="25">
...
</Setter.Value>
同时将“打开”文本的默认不透明度设置为 0 以防止其显示。
<TextBlock x:Name="txtOn" Text="ON" Opacity="0" Margin="40 0 0 0" VerticalAlignment="Center" FontWeight="DemiBold" Foreground="White" HorizontalAlignment="Left" FontSize="12" />
我有一个如下所示的这种样式的切换按钮,切换按钮工作得很好,但我想在打开 MainWindow 时为切换按钮设置一个默认文本,它应该显示在 false 状态下,而不是禁用
仅当我对其进行操作(使其打开或关闭)时,切换按钮才会显示文本值,它会显示文本,但默认情况下,用户似乎已被禁用(参见图片)
启动应用后:
设置为:
设置为关闭:
问题是当我 运行 在点击 Toggle 按钮之前应用程序时,屏幕上显示的是 Tooglebutton 被禁用,我需要将此控件初始化为状态“OFF”,
可能吗?
我该怎么做?
App.xaml
<Style x:Key="myToggleSwitch" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<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 40 0" VerticalAlignment="Center" FontWeight="DemiBold" HorizontalAlignment="Right" Foreground="White" FontSize="12" />
<TextBlock x:Name="txtOn" Text="ON" Margin="40 0 0 0" VerticalAlignment="Center" FontWeight="DemiBold" Foreground="White" HorizontalAlignment="Left" FontSize="12" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True" >
<Trigger.EnterActions>
<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>
</Trigger.EnterActions>
<!-- some out fading -->
<Trigger.ExitActions>
<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>
</Trigger.ExitActions>
<Setter Property="Foreground" Value="{DynamicResource IdealForegroundColorBrush}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource GrayBrush7}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
MainWindow.xaml.cs
<Grid>
<ToggleButton x:Name="tog" Style="{StaticResource myToggleSwitch}" Width="150" Checked="tog_Checked" Unchecked="tog_Unchecked" ></ToggleButton>
</Grid>
更新:
<Style x:Key="myToggleSwitch" TargetType="{x:Type ToggleButton}">
<Setter Property="IsChecked" Value="False"/> <!-- What I have added -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<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 40 0" VerticalAlignment="Center" FontWeight="DemiBold" HorizontalAlignment="Right" Foreground="White" FontSize="12" />
<TextBlock x:Name="txtOn" Text="ON" Margin="40 0 0 0" VerticalAlignment="Center" FontWeight="DemiBold" Foreground="White" HorizontalAlignment="Left" FontSize="12" />
</Grid>
更新 2(测试 Jason 的解决方案)。
这是我得到的:
由于您的颜色是通过对 IsChecked
状态变化作出反应来设置的,因此您只需要您的初始值与 false
状态相匹配。将边框颜色设置为关闭颜色(红色)而不是白色。那应该可以满足您的需求。
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid x:Name="toggleSwitch">
<Border x:Name="Border" CornerRadius="10"
Background="#C2283B"
Width="80" Height="25">
...
</Setter.Value>
同时将“打开”文本的默认不透明度设置为 0 以防止其显示。
<TextBlock x:Name="txtOn" Text="ON" Opacity="0" Margin="40 0 0 0" VerticalAlignment="Center" FontWeight="DemiBold" Foreground="White" HorizontalAlignment="Left" FontSize="12" />