WPF的页面设计和实用功能实现

目录

一、TextBlock和TextBox

1. 在TextBlock中实时显示当前时间

二、ListView

1.ListView显示数据

三、ComboBox

1. ComboBox和CheckBox组合实现下拉框多选

四、Button

1. 设计Button按钮的边框为圆角，并对指针悬停时的颜色进行设置

一、TextBlock和TextBox

1. 在TextBlock中实时显示当前时间

可以通过绑定和定时器的方式来实现在TextBlock中显示当前实时时间。

<Window x:Class="RealTime.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:RealTime"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <TextBlock Name="timeTextBlock"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center"
                 FontSize="24"
                 Width="300"
                 Height="40"/>
    </Grid>
</Window>

cs

using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Timers;
using System.Windows.Threading;

namespace RealTime
{
    public partial class MainWindow : Window
    {
        private DispatcherTimer _timer;

        public MainWindow()
        {
            InitializeComponent();

            // 初始化定时器
            _timer = new DispatcherTimer();
            _timer.Interval = TimeSpan.FromSeconds(1); // 每秒更新时间
            _timer.Tick += Timer_Tick; // 定时器的 Tick 事件
            _timer.Start(); // 启动定时器
        }

        private void Timer_Tick(object sender, EventArgs e)
        {
            // 获取当前时间并更新 TextBox
            timeTextBlock.Text = DateTime.Now.ToString("yyyy/MM/dd:HH:mm:ss");
        }
    }
}

 生成效果

说明1：

• DispatcherTimer：WPF 提供了 DispatcherTimer 类，它允许你在指定的时间间隔后执行代码，并且能够在 UI 线程上安全地更新 UI 元素。DispatcherTimer 每次触发时会调用 Tick 事件。

• Interval：设置为每秒触发一次。

• Tick 事件：每秒钟触发一次，在 Timer_Tick 方法中更新时间。这里使用了 DateTime.Now.ToString("HH:mm:ss") 格式来显示当前的小时、分钟和秒。

说明2：

• DateTime.Now.ToString("HH:mm:ss") 显示小时、分钟和秒。

• DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") 显示完整的日期和时间。

二、ListView

1.ListView显示数据

<Window x:Class="ListView.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ListView"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <StackPanel>
            <ListView Name="StudentList"
                      MouseDoubleClick="StudentList_MouseDoubleClick"
                      Margin="10">
                <ListView.View>
                    <GridView>
                        <GridViewColumn Header="姓名"
                                        Width="100"
                                        DisplayMemberBinding="{Binding Name}"></GridViewColumn>
                        <GridViewColumn Header="年龄"
                                        Width="100"
                                        DisplayMemberBinding="{Binding Age}"></GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>
            <StackPanel Orientation="Horizontal">
                <Button Name="Mode1"
                        Margin="10"
                        HorizontalAlignment="Left"
                        Content="方式一"
                        Click="Mode1_Click"></Button>
                <Button Name="Mode2"
                        Margin="10"
                        HorizontalAlignment="Left"
                        Content="方式二"
                        Click="Mode2_Click"></Button>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

CS

using System.Collections.ObjectModel;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ListView
{
    public class Student
    {
        public string? Name { get; set; }
        public string? Age { get; set; }
    }
    public partial class MainWindow : Window
    {
        public ObservableCollection<Student> Items { get; set; }
        public MainWindow()
        {
            InitializeComponent();           
        }

        private void Mode1_Click(object sender, RoutedEventArgs e)
        {
            StudentList.ItemsSource = null;
            StudentList.Items.Clear();
            // 初始化选项集合
            Items = new ObservableCollection<Student>
            {
                new Student { Name = "张三", Age = "20"},
                new Student { Name = "李四", Age = "21"},
                new Student { Name = "王五", Age = "22"},
                new Student { Name = "赵六", Age = "23"}
            };
            // 将Items集合绑定到ListView的ItemsSource
            StudentList.ItemsSource = Items;
        }

        private void Mode2_Click(object sender, RoutedEventArgs e)
        {
            StudentList.ItemsSource = null;
            StudentList.Items.Clear();
            StudentList.Items.Add(new Student { Name = "孙悟空", Age = "10000" });
            StudentList.Items.Add(new Student { Name = "悟能", Age = "5000" });
            StudentList.Items.Add(new Student { Name = "悟净", Age = "3000" });
            StudentList.Items.Add(new Student { Name = "唐僧", Age = "30" });
        }

        private void StudentList_MouseDoubleClick(object sender, MouseButtonEventArgs e)
        {
            if(StudentList.SelectedItem is Student student)
            {
                MessageBox.Show("姓名：" + student.Name + ",年龄:" + student.Age);
            }
        }
    }
}

页面显示说明：

初始页面

通过 ItemsSource = 列表的形式，将数据绑定到页面上，点击方式一

通过Items.Add(new 自定义类 { 属性 = "", 属性 = ""....... })的方式绑定数据，点击方式二

双击查看选择了那一条数据

三、ComboBox

1. ComboBox和CheckBox组合实现下拉框多选

说明：实现ComboBox下拉框是CheckBox，通过CheckBox的勾选情况判断选择了哪些项目

<Window x:Class="ComboBox.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ComboBox"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <StackPanel>
            <!-- 定义多选ComboBox -->
            <ComboBox Name="multiSelectComboBox"
                      Width="200"
                      Height="30"
                      HorizontalAlignment="Left"
                      IsEditable="True"
                      StaysOpenOnEdit="True"
                      IsReadOnly="True"
                      Text="多选列表"
                      Margin="10">
                <!-- 定义ComboBox的ItemTemplate，包含一个CheckBox -->
                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <CheckBox Content="{Binding Name}"
                                  IsChecked="{Binding IsSelected, Mode=TwoWay}" />
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>
            <!-- 按钮显示所选项目 -->
            <Button Content="查看选择了什么选项"
                    Width="170"
                    Height="30"
                    VerticalAlignment="Top"
                    HorizontalAlignment="Left"
                    Margin="10"
                    Click="ShowSelectedOptions_Click" />
        </StackPanel>
    </Grid>
</Window>

CS

using System.Collections.ObjectModel;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ComboBox
{
    public class Student
    {
        public string? Name { get; set; }        
        public bool IsSelected { get; set; }
    }
    public partial class MainWindow : Window
    {
        public ObservableCollection<Student> Items { get; set; }
        public MainWindow()
        {
            InitializeComponent();
            // 初始化选项集合
            Items = new ObservableCollection<Student>
            {
                new Student { Name = "张三"},
                new Student { Name = "李四"},
                new Student { Name = "王五"},
                new Student { Name = "赵六"}
            };
            // 将Items集合绑定到ComboBox的ItemsSource
            multiSelectComboBox.ItemsSource = Items;
        }

        // 显示已选择的选项
        private void ShowSelectedOptions_Click(object sender, RoutedEventArgs e)
        {    
            // 获取所有IsSelected为true的项目
            var selectedItems = Items.Where(item => item.IsSelected).Select(item => item.Name).ToList();
            // 显示选择的项目
            multiSelectComboBox.Text = "你选择了: " + string.Join(", ", selectedItems);
        }
    }
}

页面

点击下拉框，选择两个项目

点击按钮

四、Button

1. 设计Button按钮的边框为圆角，并对指针悬停时的颜色进行设置

<Window x:Class="Button_Coner.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Button_Coner"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <!-- 定义带有悬停效果的按钮样式 -->
        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="border" 
                                Background="{TemplateBinding Background}" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="20">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <!-- 悬停时改变背景颜色 -->
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border" Property="Background" Value="LightCoral"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Grid>
        <Button Width="150" Height="50" Content="圆角按钮" Background="LightBlue"/>
        <Button Width="100" Height="50" Content="测试" BorderBrush="Green" BorderThickness="2" HorizontalAlignment="Left"></Button>
    </Grid>
</Window>

样式