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