每天看几个，要不聊几天我就可以看完啦，加油！
看效果
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(); } }