[源码下载]

背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch

作者:webabcd

介绍
背水一战 Windows 10 之 控件(选择类)

  • ListBox
  • RadioButton
  • CheckBox
  • ToggleSwitch

示例
1、ListBox 的示例
Controls/SelectionControl/ListBoxDemo.xaml

<Page
    x:Class="Windows10.Controls.SelectionControl.ListBoxDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.SelectionControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"

    xmlns:common="using:Windows10.Common">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10" Orientation="Horizontal">

            <!--
                ListBox - 列表框控件
            -->

            <!--
                通过 xaml 方式为 ListBox 添加数据

                注:如果需要 ListBox 的 item 横向排列的话,可以参考 /Controls/CollectionControl/FlipViewDemo.xaml 中用于显示小点点的 ListBox 的实现
            -->
            <ListBox x:Name="listBox1" Margin="5" Width="200" Height="300" HorizontalAlignment="Left" VerticalAlignment="Top">
                <ListBox.Items>
                    <ListBoxItem Content="ListBoxItem1" />
                    <ListBoxItem Content="ListBoxItem2" />
                    <ListBoxItem Content="ListBoxItem3" />
                    <ListBoxItem Content="ListBoxItem4" />
                    <ListBoxItem Content="ListBoxItem5" />
                </ListBox.Items>
            </ListBox>

            <ListBox x:Name="listBox2" Margin="5" ItemsSource="{x:Bind Employees}" Width="200" Height="300" HorizontalAlignment="Left" VerticalAlignment="Top">
                <ListBox.ItemTemplate>
                    <DataTemplate x:DataType="common:Employee">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{x:Bind Name}" />
                            <TextBlock Text="{x:Bind Age}" Margin="5 0 0 0" />
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
            <TextBlock Name="lblMsg2" Margin="5" Width="300" TextWrapping="Wrap" />

        </StackPanel>
    </Grid>
</Page>

Controls/SelectionControl/ListBoxDemo.xaml.cs

/*
 * ListBox - 列表框控件(继承自 Selector, 请参见 /Controls/SelectionControl/SelectorDemo.xaml)
 *     SelectionMode - 选择的模式
 *         Single - 单选(默认)
 *         Multiple - 仅通过鼠标多选
 *         Extended - 通过鼠标和辅助键(ctrl, shift)多选
 *     ScrollIntoView(object item) - 滚动到指定数据对象
 *     SelectAll() - 选中所有项
 *     SelectedItems - 获取当前选中的数据对象集合
 *
 *
 * ListBoxItem - 列表框控件的 item(继承自 SelectorItem, 请参见 /Controls/SelectionControl/SelectorDemo.xaml)
 */

using System.Collections.ObjectModel;
using Windows.UI.Xaml.Controls;
using Windows10.Common;
using System.Linq;

namespace Windows10.Controls.SelectionControl
{
    public sealed partial class ListBoxDemo : Page
    {
        );

        public ListBoxDemo()
        {
            this.InitializeComponent();

            // 通过鼠标结合 ctrl键 shift键 多选
            listBox1.SelectionMode = SelectionMode.Extended;

            // 仅通过鼠标多选
            listBox2.SelectionMode = SelectionMode.Multiple;
            listBox2.Loaded += ListBox2_Loaded;
        }

        private void ListBox2_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            listBox2.SelectAll();
            // 滚动到最后一条数据
            listBox2.ScrollIntoView(this.Employees.Last());

            lblMsg2.Text = string.Join(", ", listBox2.SelectedItems.Cast<Employee>().Select(p => p.Name));
        }
    }
}

2、RadioButton 的示例
Controls/SelectionControl/RadioButtonDemo.xaml

<Page
    x:Class="Windows10.Controls.SelectionControl.RadioButtonDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.SelectionControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <!--
                RadioButton - 单选框控件
                    GroupName - 单选框的组名,同一组单选框只能有一个为选中状态

                注:RadioButton 继承自 ToggleButton,关于 ToggleButton 的知识点请参见“/Controls/ButtonControl/ToggleButtonDemo.xaml”
            -->

            <RadioButton Name="rad1" GroupName="groupName1" Margin="5" IsChecked="True" Content="groupName1 - RadioButton1" />
            <RadioButton Name="rad2" GroupName="groupName1" Margin="5" Content="groupName1 - RadioButton2" />

            <RadioButton Name="rad3" GroupName="groupName2" Margin="5" IsChecked="True" Content="groupName2 - RadioButton1" />
            <RadioButton Name="rad4" GroupName="groupName2" Margin="5" Content="groupName2 - RadioButton2" />

        </StackPanel>
    </Grid>
</Page>

Controls/SelectionControl/RadioButtonDemo.xaml.cs

/*
 * RadioButton - 单选框控件(继承自 ToggleButton, 请参见 /Controls/ButtonControl/ToggleButtonDemo.xaml)
 */

using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.SelectionControl
{
    public sealed partial class RadioButtonDemo : Page
    {
        public RadioButtonDemo()
        {
            this.InitializeComponent();
        }
    }
}

3、CheckBox 的示例
Controls/SelectionControl/CheckBoxDemo.xaml

<Page
    x:Class="Windows10.Controls.SelectionControl.CheckBoxDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.SelectionControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <!--
                CheckBox - 复选框控件

                注:CheckBox 继承自 ToggleButton,关于 ToggleButton 的知识点请参见“/Controls/ButtonControl/ToggleButtonDemo.xaml”
            -->

            <CheckBox Name="chk1" Margin="5" IsChecked="True" Content="CheckBox1" />

            <CheckBox Name="chk2" Margin="5" IsChecked="False" Content="CheckBox2" />

        </StackPanel>
    </Grid>
</Page>

Controls/SelectionControl/CheckBoxDemo.xaml.cs

/*
 * CheckBox - 复选框控件(继承自 ToggleButton, 请参见 /Controls/ButtonControl/ToggleButtonDemo.xaml)
 */

using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.SelectionControl
{
    public sealed partial class CheckBoxDemo : Page
    {
        public CheckBoxDemo()
        {
            this.InitializeComponent();
        }
    }
}

4、ToggleSwitch 的示例
Controls/SelectionControl/ToggleSwitchDemo.xaml

<Page
    x:Class="Windows10.Controls.SelectionControl.ToggleSwitchDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.SelectionControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">

        <StackPanel Margin="10 0 10 10">

            <TextBlock Name="lblMsg" Margin="5" />

            <!--
                ToggleSwitch - 状态切换控件
                    Header - 可以设置一个纯文本,不能命中测试,空 Header 的话不会占用任何空间
                    HeaderTemplate - 可以将 Header 设置为任何 xaml,且支持命中测试
                    OffContent, OffContentTemplate - 关闭状态时的显示内容
                    OnContent, OnContentTemplate - 打开状态时的显示内容
                    IsOn - 是否是 On 的状态
                    Toggled - “打开/关闭”状态改变后触发的事件
            -->

            <ToggleSwitch Name="toggleSwitch1" Margin="5" Header="wifi1" OnContent="OnContent" OffContent="OffContent" IsOn="True"
                          Toggled="toggleSwitch1_Toggled"
                          Style="{StaticResource MyToggleSwitchStyle}" />

            <ToggleSwitch Name="toggleSwitch2" Margin="5" IsOn="True" Style="{StaticResource MyToggleSwitchStyle}">
                <ToggleSwitch.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock Text="wifi2" Foreground="Yellow" />
                    </DataTemplate>
                </ToggleSwitch.HeaderTemplate>
                <ToggleSwitch.OnContentTemplate>
                    <DataTemplate>
                        <TextBlock Text="OnContent" Foreground="Orange" />
                    </DataTemplate>
                </ToggleSwitch.OnContentTemplate>
                <ToggleSwitch.OffContentTemplate>
                    <DataTemplate>
                        <TextBlock Text="OffContent" Foreground="Blue" />
                    </DataTemplate>
                </ToggleSwitch.OffContentTemplate>
            </ToggleSwitch>

        </StackPanel>
    </Grid>
</Page>

Controls/SelectionControl/ToggleSwitchDemo.xaml.cs

/*
 * ToggleSwitch - 状态切换控件(继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/)
 */

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.SelectionControl
{
    public sealed partial class ToggleSwitchDemo : Page
    {
        public ToggleSwitchDemo()
        {
            this.InitializeComponent();
        }

        private void toggleSwitch1_Toggled(object sender, RoutedEventArgs e)
        {
            lblMsg.Text = $"toggleSwitch1_Toggled, IsOn:{toggleSwitch1.IsOn}";
        }
    }
}

OK
[源码下载]

背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch的更多相关文章

  1. 背水一战 Windows 10 (32) - 控件(选择类): Selector, ComboBox

    [源码下载] 背水一战 Windows 10 (32) - 控件(选择类): Selector, ComboBox 作者:webabcd 介绍背水一战 Windows 10 之 控件(选择类) Sel ...

  2. 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog

    [源码下载] 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog 作者:webabcd 介绍背水一战 Windows 10 之 控 ...

  3. 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu

    [源码下载] 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu 作者:webabcd 介绍背水一战 Windows 10 之 控件(弹 ...

  4. 背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox

    [源码下载] 背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox 作者:webabcd 介绍背水一战 Windows 10 之 控件(文本类) AutoSug ...

  5. 背水一战 Windows 10 (77) - 控件(控件基类): ContentControl, UserControl, Page

    [源码下载] 背水一战 Windows 10 (77) - 控件(控件基类): ContentControl, UserControl, Page 作者:webabcd 介绍背水一战 Windows ...

  6. 背水一战 Windows 10 (44) - 控件(日期类): CalendarView, DatePicker, TimePicker

    [源码下载] 背水一战 Windows 10 (44) - 控件(日期类): CalendarView, DatePicker, TimePicker 作者:webabcd 介绍背水一战 Window ...

  7. 背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑

    [源码下载] 背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑 作者:webabcd 介绍背水一战 Windows 10 之 控件(媒体类) InkCanv ...

  8. 背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout

    [源码下载] 背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout 作者:webabcd 介绍背水一战 Windows 10 之 ...

  9. 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing

    [源码下载] 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing 作者:webabcd 介绍背水一 ...

随机推荐

  1. Enum简单例子DropdownList

    借鉴:http://www.cnblogs.com/suizhikuo/archive/2013/06/07/3125225.html vs2012 mvc4 最终效果: 1.建立mvc4 Inter ...

  2. 微软BI 之SSIS 系列 - MVP 们也不解的 Scrip Task 脚本任务中的一个 Bug

    开篇介绍 前些天自己在整理 SSIS 2012 资料的时候发现了一个功能设计上的疑似Bug,在 Script Task 中是可以给只读列表中的变量赋值.我记得以前在 2008 的版本中为了弄明白这个配 ...

  3. python+selenium实现跨浏览器兼容性测试

    python https://www.python.org/ python是一种脚本语言, 易学易用,可以助你快速实现业务逻辑,高效集成系统. ----- http://zh.wikipedia.or ...

  4. 小结 javascript中的类型检测

    先吐槽一下博客园的编辑器,太不好用了,一旦粘贴个表格进来就会卡死,每次都要用html编辑器写,不爽! 关于javascript的类型检测,早在实习的时候就应该总结,一直拖到现在,当时因为这个问题还出了 ...

  5. 【Matlab】随机游走产生图像效果

    随机游走类似布朗运动,就是随机的向各个方向走吧.产生的图像实在漂亮,所以还是贴出分享. clear all; close all; clc; n=100000; x= 0; y= 0; pixel=z ...

  6. C# winform如何在textbox中判断输入的是字母还是数字?

    1.用正规式using System.Text.RegularExpressions; string pattern = @"^\d+(\.\d)?$";if(Text1.Text ...

  7. 【计算几何初步-凸包-Jarvis步进法。】【HDU1392】Surround the Trees

    [科普]什么是BestCoder?如何参加? Surround the Trees Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65 ...

  8. OI不得不知的那些数学定理

    Binomial theorem One can define\[{r \choose k}=\frac{r\,(r-1) \cdots (r-k+1)}{k!} =\frac{(r)_k}{k!}\ ...

  9. EM 期望最大化算法

    (EM算法)The EM Algorithm EM是我一直想深入学习的算法之一,第一次听说是在NLP课中的HMM那一节,为了解决HMM的参数估计问题,使用了EM算法.在之后的MT中的词对齐中也用到了. ...

  10. css让文字在一行内显示

    1.例如 p元素,里面的文字不换行显示,超出部分不隐藏 p{ width:100px; word-break:keep-all; white-space:nowrap; } 2.例如 p元素,里面的文 ...