原文: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();
}
}

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

  1. (八)ASP.NET自定义用户控件(1)

    http://blog.csdn.net/laodao1/article/details/5897366 ASP.NET自定义控件组件开发 第一章:从一个简单的控件谈起 起始开发ASP.NET自定义控 ...

  2. ASP.NET自定义控件组件开发 第一章 第一章:从一个简单的控件谈起

    第一章:从一个简单的控件谈起 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接着待续 ASP.NET自定义控件组件开发 第一章 第三 ...

  3. [译]Kinect for Windows SDK开发入门(十八):Kinect Interaction交互控件

    本文译自 http://dotneteers.net/blogs/vbandi/archive/2013/03/25/kinect-interactions-with-wpf-part-i-getti ...

  4. UWP &WP8.1 依赖属性和用户控件 依赖属性简单使用 uwp添加UserControl

    上面说 附加属性.这章节说依赖属性. 所谓依赖属性.白话讲就是添加一个公开的属性. 同样,依赖属性的用法和附加属性的用法差不多. 依赖属性是具有一个get,set的属性,以及反调函数. 首先是声明依赖 ...

  5. VS2010/MFC编程入门之二十三(常用控件:按钮控件的编程实例)

    上一节VS2010/MFC编程入门教程中鸡啄米讲了按钮控件Button.Radio Button和Check Box的基本用法,本节就继续讲按钮控件的内容,通过一个实例让大家更清楚按钮控件在实际的软件 ...

  6. duilib教程之duilib入门简明教程15.自绘控件

    在[2013 duilib入门简明教程 -- 复杂控件介绍 (13)]中虽然介绍了界面设计器上的所有控件,但是还有一些控件并没有被放到界面设计器上,还有一些常用控件duilib并没有提供(比如菜单控件 ...

  7. UWP开发必备:常用数据列表控件汇总比较

    今天是想通过实例将UWP开发常用的数据列表做汇总比较,作为以后项目开发参考.UWP开发必备知识点总结请参照[UWP开发必备以及常用知识点总结]. 本次主要讨论以下控件: GridView:用于显示数据 ...

  8. Android入门(六):Android控件布局属性全解

    第一类:属性值为true或falseandroid:layout_centerHrizontal 水平居中 (Hrizontal表示水平)android:layout_centerVertical 垂 ...

  9. MFC编程入门之二十七(常用控件:图片控件PictureControl)

    上一节讲的是滚动条控件,本节主要讲一种简单实用的控件,图片控件Picture Control.我们可以在界面某个位置放入图片控件,显示图片以美化界面. 图片控件简介 图片控件和前面讲到的静态文本框都是 ...

随机推荐

  1. JSP的C标签遍历Map数据

    JSP的C标签遍历Map数据 Map可以实现较为丰富的数据封装. 第一种: 控制器传递到页面的map格式如下: Map<String, User> dataMap = new HashMa ...

  2. 在jsp页面里面设置全局引用文件

    head.jsp文件 将项目中所需要用到次数比较多的的插件,库等,同意放在一个jsp文件里面,命名为head.jsp文件,相当于一个全局的 <%@ page language="jav ...

  3. Web静态服务器

    Web静态服务器 编程微刊 Web静态服务器-1-显示固定的页面 #coding=utf-8 import socket def handle_client(client_socket): " ...

  4. iOS开发 - OC - block的详解 - 基础篇

    深入理解oc中的block 苹果在Mac OS X10.6 和iOS 4之后引入了block语法.这一举动对于许多OC使用者的编码风格改变很大.就我本人而言,感觉block用起来还是很爽的,但一直以来 ...

  5. 用Ruby实现的论坛灌水工具:CC98 Post Machine

    介绍 ZJU 的校网论坛 CC98 比较活跃.论坛只对校内网开放,而且账号跟学生绑定,每个学生注册的账号数量有限.『十大』是 CC98 的经典页面:基于关注的人数(回帖的用户数而不是回帖的数量)用算法 ...

  6. asp.net中c#求百分比

    double m= 50;double n= 100; Response.Write((m/ (m+ n)).ToString("0%"));Response.Write((m/ ...

  7. 西门子与三菱PLC报文比较

    1.西门子和三菱的几个区别(上位只关心的通讯层面):1. 西门子PLC通讯端口固定102,但是可以连接多个PC端(客户端),三菱PLC通讯端口可以自定义,最多好像8个,但是每个端口只能连接一个客户端: ...

  8. 浅谈java枚举类

    一.什么情况下使用枚举类? 有的时候一个类的对象是有限且固定的,这种情况下我们使用枚举类就比较方便? 二.为什么不用静态常量来替代枚举类呢? public static final int SEASO ...

  9. [ACM] POJ 2689 Prime Distance (筛选范围大素数)

    Prime Distance Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12811   Accepted: 3420 D ...

  10. python 合并两个排序的链表

    题目描述 输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则.   样例 给出 1->3->8->11->15->null,2-& ...