首页 > 解决方案 > 给togglebutton一个默认文本wpf c#

问题描述

我有一个如下所示的这种风格的切换按钮,切换按钮工作完美,但我想在打开 MainWindow 时为切换按钮设置默认文本,它应该显示处于 false 状态,而不是禁用

切换按钮仅在我对其进行操作(使其打开或关闭)时才会显示文本值,它会显示文本,但默认情况下,用户似乎被禁用(见图)

启动应用程序后:

在此处输入图像描述

出发 :

在此处输入图像描述

出发:

在此处输入图像描述

问题是当我在单击 Toggle 按钮之前运行应用程序时,屏幕上显示的是一个 Tooglebutton 已禁用,我需要将此控件初始化为“OFF”,

可能吗?

我怎样才能做到这一点?

应用程序.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>

主窗口.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 的解决方案)。

这是我得到的:

在此处输入图像描述

标签: c#wpfxamltogglebutton

解决方案


由于您的颜色是通过对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" />

在此处输入图像描述


推荐阅读