跳至主要內容

Switch 开关

乌龙茶原创2024年3月18日大约 2 分钟C#WPFWPF主题控件

按钮样式

提示

添加ToggleButtonAsButtonStyle样式应用

<ToggleButton nl:ButtonAssist.Type="Primary" 
              Content="Primary" 
              Style="{StaticResource ToggleButtonAsButtonStyle}" />

样式效果与Button一致，详情请看Button说明。

Switch样式

提示

添加ToggleButtonAsSwitchStyle样式应用

颜色

使用SwitchOffBackground和SwitchOnBackground属性控制切换背景颜色

SwitchBackground
SwitchBackground
<ToggleButton Style="{StaticResource ToggleButtonAsSwitchStyle}" />

<ToggleButton nl:ToggleButtonAssist.SwitchOffBackground="#ff4949"
              nl:ToggleButtonAssist.SwitchOnBackground="#13ce66"
              IsChecked="True"
              Style="{StaticResource ToggleButtonAsSwitchStyle}" />

尺寸

通过Size控制ToggleButton大小，默认提供三种效果选项Small、Default以及Large

Size
Size
<ToggleButton nl:ToggleButtonAssist.ActiveText="Open"
              nl:ToggleButtonAssist.InactiveText="Close"
              nl:ToggleButtonAssist.Size="Large"
              IsChecked="True"
              Style="{StaticResource ToggleButtonAsSwitchStyle}" />

<ToggleButton nl:ToggleButtonAssist.ActiveText="Open"
              nl:ToggleButtonAssist.InactiveText="Close"
              IsChecked="True"
              Style="{StaticResource ToggleButtonAsSwitchStyle}" />

<ToggleButton nl:ToggleButtonAssist.ActiveText="Open"
              nl:ToggleButtonAssist.InactiveText="Close"
              nl:ToggleButtonAssist.Size="Small"
              IsChecked="True"
              Style="{StaticResource ToggleButtonAsSwitchStyle}" />

文字描述

使用ActiveText属性与InactiveText属性来设置开关的文字描述。

text
text
<ToggleButton nl:ToggleButtonAssist.ActiveText="Pay by month"
              nl:ToggleButtonAssist.InactiveText="Pay by year"
              IsChecked="True"
              Style="{StaticResource ToggleButtonAsSwitchStyle}" />

 <ToggleButton nl:ToggleButtonAssist.ActiveText="Pay by month"
               nl:ToggleButtonAssist.InactiveText="Pay by year"
               nl:ToggleButtonAssist.SwitchOffBackground="#ff4949"
               nl:ToggleButtonAssist.SwitchOnBackground="#13ce66"
               IsChecked="True"
               Style="{StaticResource ToggleButtonAsSwitchStyle}" />

使用InlinePrompt属性来控制文本是否显示在点内。

inlineprompt
inlineprompt
<ToggleButton nl:ToggleButtonAssist.ActiveText="是"
              nl:ToggleButtonAssist.InactiveText="否"
              nl:ToggleButtonAssist.InlinePrompt="True"
              IsChecked="True"
              Style="{StaticResource ToggleButtonAsSwitchStyle}" />

<ToggleButton nl:ToggleButtonAssist.ActiveText="Y"
              nl:ToggleButtonAssist.InactiveText="N"
              nl:ToggleButtonAssist.InlinePrompt="True"
              nl:ToggleButtonAssist.SwitchOffBackground="#ff4949"
              nl:ToggleButtonAssist.SwitchOnBackground="#13ce66"
              IsChecked="True"
              Style="{StaticResource ToggleButtonAsSwitchStyle}" />

<ToggleButton Width="60"
              nl:ToggleButtonAssist.ActiveText="超出内容"
              nl:ToggleButtonAssist.InactiveText="超出内容"
              nl:ToggleButtonAssist.InlinePrompt="True"
              IsChecked="True"
              Style="{StaticResource ToggleButtonAsSwitchStyle}" />

<ToggleButton nl:ToggleButtonAssist.ActiveText="完整展示多个内容"
              nl:ToggleButtonAssist.InactiveText="多个内容"
              nl:ToggleButtonAssist.InlinePrompt="True"
              nl:ToggleButtonAssist.Size="Large"
              nl:ToggleButtonAssist.SwitchOffBackground="#ff4949"
              nl:ToggleButtonAssist.SwitchOnBackground="#13ce66"
              IsChecked="True"
              Style="{StaticResource ToggleButtonAsSwitchStyle}" />

显示自定义图标

使用InactiveIcon和ActiveIcon属性来添加图标。 使用InlinePrompt属性来控制图标显示在点内。

icon
icon
<ToggleButton nl:ToggleButtonAssist.ActiveIcon="{DynamicResource check-icon}"
              nl:ToggleButtonAssist.InactiveIcon="{DynamicResource close-icon}"
              IsChecked="True"
              Style="{StaticResource ToggleButtonAsSwitchStyle}" />

<ToggleButton nl:ToggleButtonAssist.ActiveIcon="{DynamicResource check-icon}"
              nl:ToggleButtonAssist.InactiveIcon="{DynamicResource close-icon}"
              nl:ToggleButtonAssist.InlinePrompt="True"
              IsChecked="True"
              Style="{StaticResource ToggleButtonAsSwitchStyle}" />

禁用状态

设置原生IsEnabled属性，接受一个Boolean，设置false即可禁用。

isenabled
isenabled
<ToggleButton IsChecked="True"
              IsEnabled="False"
              Style="{StaticResource ToggleButtonAsSwitchStyle}" />

<ToggleButton IsChecked="True"
              Style="{StaticResource ToggleButtonAsSwitchStyle}" />

加载状态

设置Loading属性，接受一个Boolean，设置true即加载中状态。

loading
loading
<ToggleButton nl:ToggleButtonAssist.Loading="True"
              IsChecked="True"
              Style="{StaticResource ToggleButtonAsSwitchStyle}" />

<ToggleButton nl:ToggleButtonAssist.Loading="True" 
              Style="{StaticResource ToggleButtonAsSwitchStyle}" />

自定义动作图标

使用InactiveActionIcon和ActiveActionIcon属性来添加图标。

actionicon
actionicon
<ToggleButton nl:ToggleButtonAssist.ActiveActionIcon="{DynamicResource active-action-icon}"
              nl:ToggleButtonAssist.InactiveActionIcon="{DynamicResource inactive-action-icon}"
              Style="{StaticResource ToggleButtonAsSwitchStyle}" />