UWP入门(八)--几个简单的控件

原文:UWP入门(八)--几个简单的控件

每天看几个,要不聊几天我就可以看完啦,加油!

看效果

1. CheckBox

      <TextBlock Grid.Row="0" Text="CheckBox" VerticalAlignment="Center" />
        <StackPanel Grid.Column="1"
                    Margin="20,10,0,10"
                    Orientation="Horizontal">
            <CheckBox Name="MyCheckBox"
                      Content="Agree?"
                      Tapped="MyCheckBox_Tapped" />
            <TextBlock Name="CheckBoxResultTextBlock" />
        </StackPanel>
  private void MyCheckBox_Tapped(object sender, TappedRoutedEventArgs e)
        {
            CheckBoxResultTextBlock.Text = MyCheckBox.IsChecked.ToString();
        }

2. RadioButton

 <TextBlock Grid.Row="2"
                   Text="RadioButton"
                   VerticalAlignment="Center" />
        <StackPanel Grid.Row="2"
                    Grid.Column="1"
                    Orientation="Horizontal"
                    Margin="20,10,0,10">
            <RadioButton Name="YesRadioButton"
                         Content="Yes"
                         GroupName="MyGroup"
                         Checked="RadioButton_Checked" />
            <RadioButton Name="NoRadioButton"
                         Content="No"
                         GroupName="MyGroup"
                         Checked="RadioButton_Checked" />
            <TextBlock Name="RadioButtonTextBlock" />
        </StackPanel>
 private void RadioButton_Checked(object sender, RoutedEventArgs e)
        {
            RadioButtonTextBlock.Text = (bool)YesRadioButton.IsChecked ? "Yes" : "No";
        }

3. CombomBox

 <TextBlock Grid.Row="3"
                   Text="ComboBox"
                   Name="MyComboBox"
                   VerticalAlignment="Center" />
        <StackPanel Orientation="Horizontal"
                    Grid.Row="3"
                    Grid.Column="1"
                    Margin="20,10,0,10">
            <ComboBox SelectionChanged="ComboBox_SelectionChanged" >
                <ComboBoxItem Content="Fourth" />
                <ComboBoxItem Content="Fifth" />
                <ComboBoxItem Content="Sixth" IsSelected="True" />
            </ComboBox>
            <TextBlock Name="ComboBoxResultTextBlock" />
        </StackPanel>
private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (ComboBoxResultTextBlock == null) return;

            var combo = (ComboBox)sender;
            var item = (ComboBoxItem)combo.SelectedItem;
            ComboBoxResultTextBlock.Text = item.Content.ToString();
        }

4. ListBox

  <TextBlock Grid.Row="4" Text="ListBox" VerticalAlignment="Center" />
        <StackPanel Grid.Row="4" Grid.Column="1"  Margin="20,10,0,10">
            <ListBox Name="MyListBox"
                     SelectionMode="Multiple"
                     SelectionChanged="ListBox_SelectionChanged">
                <ListBoxItem Content="First" />
                <ListBoxItem Content="Second" />
                <ListBoxItem Content="Third" />
            </ListBox>
            <TextBlock Name="ListBoxResultTextBlock" />
        </StackPanel>
       private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var selectedItems = MyListBox.Items.Cast<ListBoxItem>()
                                  .Where(p => p.IsSelected)
                                    .Select(t => t.Content.ToString())
                                      .ToArray();

            ListBoxResultTextBlock.Text = string.Join(", ", selectedItems);

        }

5. image

 <TextBlock Grid.Row="5" Text="Image" VerticalAlignment="Center" />
        <Image Source="Assets/StoreLogo.png"
               HorizontalAlignment="Left"
               Width="250"
               Height="50"
               Grid.Row="5"
               Grid.Column="1"
               Stretch="Uniform"
               Margin="20,10,0,10" />

image 的四种拉伸方法

  • None
    • 不做任何处理,一般比较大
  • Fill
    • 占据所给的最大空间,比例会失调
  • Uniform
    • 按比例伸缩,占据所给的最大空间
  • UniformFill
    • 按比例伸缩,占据大小

6. 漂亮的 ToggleSwitch

<TextBlock Grid.Row="8"
                   Text="ToggleSwitch"
                   VerticalAlignment="Center" />
        <StackPanel Grid.Row="8"
                      Grid.Column="1"
                      Margin="20,10,0,10" >
            <ToggleSwitch>
                <ToggleSwitch.OffContent>
                    <TextBlock Text="I'm off right now." />
                </ToggleSwitch.OffContent>
                <ToggleSwitch.OnContent>
                    <TextBlock Text="I'm on!" />
                </ToggleSwitch.OnContent>
            </ToggleSwitch>
        </StackPanel>

不需要代码

7. ToggleButton

<TextBlock Grid.Row="7" Text="ToggleButton" VerticalAlignment="Center"  />
        <StackPanel Orientation="Horizontal"
                    Grid.Row="7"
                    Grid.Column="1"
                    Margin="20,10,0,10" >
            <ToggleButton Name="MyToggleButton"
                          Content="Premium Option"
                          IsThreeState="True"
                          Click="MyToggleButton_Click" />
            <TextBlock Name="ToggleButtonResultTextBlock" />
        </StackPanel>
 private void MyToggleButton_Click(object sender, RoutedEventArgs e)
        {
            ToggleButtonResultTextBlock.Text = MyToggleButton.IsChecked.ToString();
        }

代码

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="10,10,0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="0" Text="CheckBox" VerticalAlignment="Center" />
        <StackPanel Grid.Column="1"
                    Margin="20,10,0,10"
                    Orientation="Horizontal">
            <CheckBox Name="MyCheckBox"
                      Content="Agree?"
                      Tapped="MyCheckBox_Tapped" />
            <TextBlock Name="CheckBoxResultTextBlock" />
        </StackPanel>

        <TextBlock Grid.Row="2"
                   Text="RadioButton"
                   VerticalAlignment="Center" />
        <StackPanel Grid.Row="2"
                    Grid.Column="1"
                    Orientation="Horizontal"
                    Margin="20,10,0,10">
            <RadioButton Name="YesRadioButton"
                         Content="Yes"
                         GroupName="MyGroup"
                         Checked="RadioButton_Checked" />
            <RadioButton Name="NoRadioButton"
                         Content="No"
                         GroupName="MyGroup"
                         Checked="RadioButton_Checked" />
            <TextBlock Name="RadioButtonTextBlock" />
        </StackPanel>

        <TextBlock Grid.Row="3"
                   Text="ComboBox"
                   Name="MyComboBox"
                   VerticalAlignment="Center" />
        <StackPanel Orientation="Horizontal"
                    Grid.Row="3"
                    Grid.Column="1"
                    Margin="20,10,0,10">
            <ComboBox SelectionChanged="ComboBox_SelectionChanged" >
                <ComboBoxItem Content="Fourth" />
                <ComboBoxItem Content="Fifth" />
                <ComboBoxItem Content="Sixth" IsSelected="True" />
            </ComboBox>
            <TextBlock Name="ComboBoxResultTextBlock" />
        </StackPanel>

        <TextBlock Grid.Row="4" Text="ListBox" VerticalAlignment="Center" />
        <StackPanel Grid.Row="4" Grid.Column="1"  Margin="20,10,0,10">
            <ListBox Name="MyListBox"
                     SelectionMode="Multiple"
                     SelectionChanged="ListBox_SelectionChanged">
                <ListBoxItem Content="First" />
                <ListBoxItem Content="Second" />
                <ListBoxItem Content="Third" />
            </ListBox>
            <TextBlock Name="ListBoxResultTextBlock" />
        </StackPanel>

        <TextBlock Grid.Row="5" Text="Image" VerticalAlignment="Center" />
        <Image Source="Assets/StoreLogo.png"
               HorizontalAlignment="Left"
               Width="250"
               Height="50"
               Grid.Row="5"
               Grid.Column="1"
               Stretch="Uniform"
               Margin="20,10,0,10" />

        <TextBlock Grid.Row="7" Text="ToggleButton" VerticalAlignment="Center"  />
        <StackPanel Orientation="Horizontal"
                    Grid.Row="7"
                    Grid.Column="1"
                    Margin="20,10,0,10" >
            <ToggleButton Name="MyToggleButton"
                          Content="Premium Option"
                          IsThreeState="True"
                          Click="MyToggleButton_Click" />
            <TextBlock Name="ToggleButtonResultTextBlock" />
        </StackPanel>

        <TextBlock Grid.Row="8"
                   Text="ToggleSwitch"
                   VerticalAlignment="Center" />
        <StackPanel Grid.Row="8"
                      Grid.Column="1"
                      Margin="20,10,0,10" >
            <ToggleSwitch>
                <ToggleSwitch.OffContent>
                    <TextBlock Text="I'm off right now." />
                </ToggleSwitch.OffContent>
                <ToggleSwitch.OnContent>
                    <TextBlock Text="I'm on!" />
                </ToggleSwitch.OnContent>
            </ToggleSwitch>
        </StackPanel>

    </Grid>

cs 代码

public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
        private void MyCheckBox_Tapped(object sender, TappedRoutedEventArgs e)
        {
            CheckBoxResultTextBlock.Text = MyCheckBox.IsChecked.ToString();
        }

        private void RadioButton_Checked(object sender, RoutedEventArgs e)
        {
            RadioButtonTextBlock.Text = (bool)YesRadioButton.IsChecked ? "Yes" : "No";
        }

        private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (ComboBoxResultTextBlock == null) return;

            var combo = (ComboBox)sender;
            var item = (ComboBoxItem)combo.SelectedItem;
            ComboBoxResultTextBlock.Text = item.Content.ToString();

        }

        private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var selectedItems = MyListBox.Items.Cast<ListBoxItem>()
                                  .Where(p => p.IsSelected)
                                    .Select(t => t.Content.ToString())
                                      .ToArray();

            ListBoxResultTextBlock.Text = string.Join(", ", selectedItems);

        }

        private void MyToggleButton_Click(object sender, RoutedEventArgs e)
        {
            ToggleButtonResultTextBlock.Text = MyToggleButton.IsChecked.ToString();
        }
    }
时间: 2024-12-23 20:00:04

UWP入门(八)--几个简单的控件的相关文章

用C#实现简单的控件数组

控件|数组   用C#实现简单的控件数组 我的一个同学在做计算器程序,另一个同学在做井字棋游戏.这两个程序有个共同的特点:包含数个具有同类功能的控件(计算器的数字按钮及井字棋的九个落子位).如果一个个地创建这些控件,不得不写大量重复的代码,修改起来比较麻烦.一个更好的选择是建立控件数组.下面是Button数组的简单实现:   Button[] btns = new Button[9];   private void ShowButtonArray()  {   for(int i = 0; i

Win32开发入门(15):ListView控件

这个控件其实不用阿拉来介绍,因为它太常见了,就好像我们一出门就会看到妹子一样常见.当然 也可以说,它是对ListBox的扩充. 在使用该控件之前,我先介绍VS的一个相当好玩的功能. 在代码文件的#include指令上右击,从弹出的菜单中选择"生成包含文件关系图",如下图: 开发入门(15):ListView控件-"> 然后你喝一口咖啡,你会看到这样的东西:

Android开发入门(十二)列表控件 12.3 ListView的总结范例

使用一个例子,来总结一下ListView的基本使用. 1. 新建一个工程:ListViewDemo. 2. main.xml中的代码. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_pare

Android开发入门(十二)列表控件 12.2 ListView的扩展功能

ListView是一个可以被深度扩展的视图.在做项目的时候,扩展ListView去显示数据是必不可免的.接下 来会展示如何在ListView中去选择多个物件,以及如何使用ListView的"过滤"功能. 1. 使用上一 节的工程:BasicViews5. 2. 在BasicViews5Activity.java中添加一些代码. String[] presidents; /** Called when the activity is first created. */ @Override

Android开发入门(十二)列表控件 12.1 ListView的基本使用

今天总结一下Android中的列表控件:ListView和Spinner. ListView可以垂直并可滑动地地显示 一些信息.下面阐述如何使用ListView显示一系列的信息. 1. 创建一个工程:BasicViews5. 2. strings.xml中的代码. <?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">He

asp.net简单页面控件赋值实现方法_实用技巧

本文实例讲述了asp.net简单页面控件赋值的方法.分享给大家供大家参考,具体如下: /// <summary> /// 赋值 表名,控件名,要查询的唯一数据 /// </summary> protected void SetEvaluate(string TableName, string UpName, string Id) { ContentPlaceHolder cph = (ContentPlaceHolder)Page.Master.FindControl("

一个简单Led控件

Led控件,可能是非常经典和常用的了,但是很遗憾的是,这个名称至少涵盖了三种控件: 1.是7段式的有发光二极管构成的Led,通常用来显示数字. 2.是指示灯,通常用来闪烁,指示电源,等状态. 3.是由发光二极管阵列组成的模拟显示屏,这种led屏有较高的分辨率,所以可以显示中文内容和一定容量的界面. 这篇文章里面说的是1.其中2这种在codeproject上面有很多例子,我曾经改写其中的例子成为在移动设备上使用. 今天我用c#写了这样一个Led控件.我也曾经下载过,可惜好像没有什么源码,想来这个东

ASP入门教程-使用其他表单控件

除了使用INPUT标记创建输入型表单控件外,也可以使用TEXTAREA标记创建多行文本框,或使用SELECT标记创建选项选单,还可以使用FIELDSET标记以表单中的控件进行分组. 1.在表单中使用多行文本框控件 一)格式: <form name="表单的名称" method="get | post" action="URL"> <TEXTAREA name="字符串" ROWS="整数"

DevExpress入门:从初步使用该控件到多维数据集控件PivotGridControl

例子基于Winform开发,我使用的是VS2005,因为工作就用这个,版本低了点,但是很多控件的使用都不会 因为版本高低而存在太大差异. 其实原本是想从下载安装开始去分享这套控件的使用,但是觉得那样 显得太俗了,我是一个乐于突破定势的男孩子(毕竟有些女的都30岁还自称为女孩,我才开始奔三为什么不能 是男孩子呢),我决定从比较棘手的PivotGridControl控件开始分享我近些日子使用DevExpress的心得经验. 说实话正题开始前我还想再啰嗦句废话,我原本还想在PivotGridContr