UWP入门（八）--几个简单的控件-CFANZ编程社区

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

看效果

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

2. RadioButton

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"

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

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>

.Items.Cast<ListBoxItem>()
                                  .Where(p => p.IsSelected)
                                    .Select(t => t.Content.ToString())
                                      .ToArray();

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

5. image

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"

private void MyToggleButton_Click(object

代码

<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