图形用户界面开发指南

### 图形用户界面开发指南 #### 1. 访问和显示 UI 可以使用 `MainWindow` 属性来访问窗口本身并显示 UI。以下是一个简单示例： ```powershell $xaml = '<?xml version="1.0" encoding="utf-8"?> <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="350" Height="350"> <Label Content="Hello world" /> </Window>' $ui = Import-Xaml $xaml $ui.MainWindow.ShowDialog() ``` #### 2. 事件处理 在 UI 中，当按钮被按下、选择发生变化、按键被按下等情况时会引发事件。要对事件做出反应，必须创建一个事件处理程序并将其附加到引发事件的控件上。事件处理程序必须在 `ShowDialog` 运行之前添加。 ##### 2.1 KeyDown 事件 以下是一个示例，允许按下 Escape 键关闭窗口： ```powershell $xaml = '<?xml version="1.0" encoding="utf-8"?> <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="350" Height="350"> <Label Content="Hello world" /> </Window>' $ui = Import-Xaml $xaml $ui.MainWindow.add_KeyDown({ param ( $sender, $eventArgs ) if ($eventArgs.Key -eq 'ESC') { $sender.Close() } }) $ui.MainWindow.ShowDialog() ``` ##### 2.2 按钮的 Click 事件 可以通过添加事件处理程序来使用按钮的 `Click` 事件。以下是一个使退出按钮关闭父窗口的示例： ```powershell $xaml = '<?xml version="1.0" encoding="utf-8"?> <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="350" Height="350"> <Button Name="Button" Content="Exit" /> </Window>' $ui = Import-Xaml $xaml $ui.Controls['Button'].add_Click({ param ( $sender, $eventArgs ) $ui.MainWindow.Close() }) $ui.MainWindow.ShowDialog() ``` 还可以更新按钮点击事件以更新另一个标签的内容： ```powershell $xaml = '<?xml version="1.0" encoding="utf-8"?> <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="350" Height="350"> <StackPanel> <Button Name="Button" Content="Run" /> <Label Name="Label" /> </StackPanel> </Window>' $ui = Import-Xaml $xaml $ui.Controls['Button'].add_Click({ param ( $sender, $eventArgs ) $ui.Controls['Label'].Content = 'Hello world' }) $ui.MainWindow.ShowDialog() ``` ##### 2.3 ComboBox 的 SelectionChanged 事件 `SelectionChanged` 事件可以像按钮的 `Click` 事件一样使用。当选择发生变化时，可以通过 `ComboBox` 控件的 `SelectedItem` 属性获取选择项。 ```powershell $xaml = '<?xml version="1.0" encoding="utf-8"?> <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="350" Height="350"> <StackPanel> <ComboBox Name="ComboBox"> <ComboBoxItem>Apple</ComboBoxItem> <ComboBoxItem>Orange</ComboBoxItem> </ComboBox> <Label Name="Label" /> </StackPanel> </Window>' $ui = Import-Xaml $xaml $ui.Controls['ComboBox'].add_SelectionChanged({ param ( $sender, $eventArgs ) $ui.Controls['Label'].Content = ( 'Selected a {0}' -f $sender.SelectedItem.Content ) }) $ui.MainWindow.ShowDialog() ``` #### 3. 以编程方式添加元素 当事件触发时，一个控件可能会向 UI 中添加更多值。例如，点击按钮可能会显示命令的结果。可以使用 `ListView` 控件来显示更复杂的值。 ```powershell $xaml = '<?xml version="1.0" encoding="utf-8"?> <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="350" Height="350"> <DockPanel> <Button Name="Button" Content="Get-Process" DockPanel.Dock="Top" /> <ListView Name="ListView"> <ListView.View> <GridView /> </ListView.View> </ListView> </DockPanel> </Window>' $ui = Import-Xaml $xaml $ui.Controls['Button'].add_Click({ param ( $sender, $eventArgs ) $data = Get-Process | Select-Object Name, ID $listView = $ui.Controls['ListView'] # Clear any previous content $listView.View.Columns.Clear() foreach ($property in $data[0].PSObject.Properties) { $column = [System.Windows.Controls.GridViewColumn]@{ DisplayMemberBinding = ( [System.Windows.Data.Binding]$property.Name ) Header = $property.Name } $listView.View.Columns.Add($column) } $listView.ItemsSource = $data }) $ui.MainWindow.ShowDialog() ``` #### 4. 对 ListView 进行排序 为 UI 添加列排序是一个有用的示例，因为它引入了额外的挑战。需要存储和跟踪两个值来实现多列排序： - 当前正在排序的列 - 列的排序方向 以下是实现排序的代码： ```powershell function Import-Xaml { [CmdletBinding()] param ( [Xml]$Xaml, [Hashtable]$State = @{} ) Add-Type -AssemblyName PresentationFramework $window = [System.Windows.Markup.XamlReader]::Load( [System.Xml.XmlNodeReader]$Xaml ) $controls = @{} foreach ($control in $Xaml.SelectNodes('//*[@Name]')) { $controls[$control.Name] = $window.FindName($control.Name) } [PSCustomObject]@{ ```