应用程序栏与弹出窗口开发全解析

### 应用程序栏与弹出窗口开发全解析 #### 1. Segoe UI 符号字体展示 在开发中，我们可以通过一系列代码实现对 Segoe UI 符号字体的展示。以下是相关的代码示例： ```xml <Grid> <TextBlock Grid.Row="0" Text="Segoe UI Symbol" HorizontalAlignment="Center" Style="{StaticResource HeaderTextStyle}" /> <Grid Name="characterGrid" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" /> <Slider Grid.Row="2" Orientation="Horizontal" Margin="24 0" Minimum="0" Maximum="511" SmallChange="1" LargeChange="16" ThumbToolTipValueConverter="{StaticResource hexByteConverter}" ValueChanged="OnSliderValueChanged" /> </Grid> ``` 这里的 Slider 控件的 `Maximum` 属性值为 511，它是最大字符代码（0x1FFFF）除以 256 的结果。同时，还定义了 `DoubleToStringHexByteConverter` 类用于转换值： ```csharp public class DoubleToStringHexByteConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { return ((int)(double)value).ToString("X2") + "__"; } public object ConvertBack(object value, Type targetType, object parameter, string language) { return value; } } ``` 对于 Slider 的每个值，会以 16×16 的矩阵形式显示 256 个字符。以下是构建用于显示这些字符的 Grid 面板的代码： ```csharp public sealed partial class MainPage : Page { const int CellSize = 36; const int LineLength = (CellSize + 1) * 16 + 18; FontFamily symbolFont = new FontFamily("Segoe UI Symbol"); TextBlock[] txtblkColumnHeads = new TextBlock[16]; TextBlock[,] txtblkCharacters = new TextBlock[16, 16]; public MainPage() { this.InitializeComponent(); for (int row = 0; row < 34; row++) { RowDefinition rowdef = new RowDefinition(); if (row == 0 || row % 2 == 1) rowdef.Height = GridLength.Auto; else rowdef.Height = new GridLength(CellSize, GridUnitType.Pixel); characterGrid.RowDefinitions.Add(rowdef); if (row != 0 && row % 2 == 0) { TextBlock txtblk = new TextBlock { Text = (row / 2 - 1).ToString("X1"), VerticalAlignment = VerticalAlignment.Center }; Grid.SetRow(txtblk, row); Grid.SetColumn(txtblk, 0); characterGrid.Children.Add(txtblk); } if (row % 2 == 1) { Rectangle rectangle = new Rectangle { Stroke = this.Foreground, StrokeThickness = row == 1 || row == 33 ? 1.5 : 0.5, Height = 1 }; Grid.SetRow(rectangle, row); Grid.SetColumn(rectangle, 0); Grid.SetColumnSpan(rectangle, 34); characterGrid.Children.Add(rectangle); } } for (int col = 0; col < 34; col++) { ColumnDefinition coldef = new ColumnDefinition(); if (col == 0 || col % 2 == 1) coldef.Width = GridLength.Auto; else coldef.Width = new GridLength(CellSize); characterGrid.ColumnDefinitions.Add(coldef); if (col != 0 && col % 2 == 0) { TextBlock txtblk = new TextBlock { Text = "00" + (col / 2 - 1).ToString("X1") + "_", HorizontalAlignment = HorizontalAlignment.Center }; Grid.SetRow(txtblk, 0); Grid.SetColumn(txtblk, col); characterGrid.Children.Add(txtblk); txtblkColumnHeads[col / 2 - 1] = txtblk; } if (col % 2 == 1) { Rectangle rectangle = new Rectangle { Stroke = this.Foreground, StrokeThickness = col == 1 || col == 33 ? 1.5 : 0.5, Width = 1 }; Grid.SetRow(rectangle, 0); Grid.SetColumn(rectangle, col); Grid.SetRowSpan(rectangle, 34); characterGrid.Children.Add(rectangle); } } for (int col = 0; col < 16; col++) for (int row = 0; row < 16; row++) { TextBlock txtblk = new TextBlock { Text = ((char)(16 * col + row)).ToString(), FontFamily = symbolFont, FontSize = 24, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center }; Grid.SetRow(txtblk, 2 * row + 2); Grid.SetColumn(txtblk, 2 * col + 2); characterGrid.Children.Add(txtblk); txtblkCharacters[col, row] = txtblk; } } // 处理 Slider 值改变事件 void OnSliderValueChanged(object sender, RangeBaseValueChangedEventArgs args) { int baseCode = 256 * (int)args.NewValue; for (int col = 0; col < 16; col++) { txtblkColumnHeads[col].Text = (baseCode / 16 + col).ToString("X3") + "_"; for (int row = 0; row < 16; row++) { int code = baseCode + 16 * col + row; string strChar = null; if (code <= 0x0FFFF) { strChar = ((char)code).ToString(); } else { code -= 0x10000; int lead = 0xD800 + code / 1024; int trail = 0xDC00 + code % 1024; strChar = ((char)lead).ToString() + (char)trail; } txtblkCharacters[col, row].Text = strChar; } } } } ``` 在处理字符代码大于 0xFFFF 的情况时，代码会将 Unicode 字符代码拆分为两个 10 位的值，以构建起始和结束代理项。如果想避免处理底层细节，可以使用 `Char.ConvertFromUtf32(code)` 方法。 #### 2. 应用程序栏中的特殊符号按钮 在 XAML 中，可以通过以下方式定义超出 0xFFFF 的符号： ```xml <TextBlock FontFamily="Segoe UI Symbol" FontSize="24" Text="&#x1F3B7;" /> ``` 以下是一组用于音乐应用的应用程序栏按钮示例： ```xml <Button Style="{StaticResource AppBarButtonStyle}" Content="&#x1F3B7;" AutomationProperties.Name="Saxophone" Click="OnMusicButtonClick" /> <Button Style="{StaticResource AppBarButtonStyle}" Content="&#x1F3B8;" AutomationProperties.Name="Guitar" Click="OnMusicButtonClick" /> <Button Style="{StaticResource AppBarButtonStyle}" Content="&#x1F3B9;" AutomationProperties.Name="Piano" Click="OnMusicButtonClick" /> <Button Style="{StaticResource AppBarButtonStyle}" Content="&#x1F3BA;" AutomationProperties.Name="Trumpet" Click="OnMusicButtonClick" /> <Button Style="{StaticResource AppBarButtonStyle}" Content="&#x1F3BB;" AutomationProperties.Name="Violin" Click="OnMusicButtonClick" /> ``` #### 3. 应用程序栏中的 CheckBox 和 RadioButton 在 Windows 8 的一些标准应用程序的应用程序栏中，会出现圆形按钮，它们可以作为 CheckBox 或 RadioButton 控件使用。例如，日历应用中的“日”“周”“月”按钮作为 RadioButton 组工作，地图应用中的“显示交通状况”按钮作为 CheckBox 工作。 `AppBarButtonStyle` 资源的 `TargetType` 为 `ButtonBase`，这意味着它可以用于为 CheckBox 或 RadioButton 进行样式设置。但在某些版本的 `StandardStyles.xaml` 中，`AppBarButtonStyle` 的 `ControlTemplate` 包含对 `BackgroundCheckedGlyph` 的引用，而该定义在模板中缺失。如果在使用这些样式时出现错误，可以注释掉引用 `BackgroundCheckedGlyph` 的 `ObjectAnimationUsingKeyFrames` 对象。 以下是一个包含 CheckBox 和 RadioButton 的应用程序栏示例： ```xml <Page ... > <Grid Background="LightGray"> <TextBlock Name="textBlock" FontFamily="Times New Roman" FontSize="96" HorizontalAlignment="Center" VerticalAlignment="Center"> <Run>Text Formatting AppBar</Run> </TextBlock> </Grid> <Page.BottomAppBar> <AppBar> <StackPanel Orientation="Horizontal"> <CheckBox Style="{StaticResource BoldAppBarButtonStyle}" Checked="OnBoldAppBarCheckBoxChecked" Unchecked="OnBoldAppBarCheckBoxChecked" /> <CheckBox Style="{StaticResource ItalicAppBarButtonStyle}" Checked="OnItalicAppBarCheckBoxChecked" Unchecked="OnItalicAppBarCheckBoxChecked" /> <CheckBox Style="{StaticResource UnderlineAppBarButtonStyle}" Checked="OnUnderlineAppBarCheckBoxChecked" Unchecked="OnUnderlineAppBarCheckBoxChecked" /> <Polyline Points="0 12, 0 48" Stroke="{StaticResource ApplicationForegroundThemeBrush}" VerticalAlignment="Top" /> <RadioButton Name="redRadioButton" Style="{StaticResource FontColorAppBarButtonStyle}" Foreground="Red" AutomationProperties.Name="Red" Checked="OnFontColorAppBarRadioButtonChecked" /> <RadioButton Style="{StaticResource FontColorAppBarButtonStyle}" Foreground="Green" AutomationProperties.Name="Green" Checked="OnFontColorAppBarRadioButtonChecked" /> <RadioButton Style="{StaticResource FontColorAppBarButtonStyle}" Foreground="Blue" AutomationProperties.Name="Blue" Checked="OnFontColorAppBarRadioButtonChecked" /> </StackPanel> </AppBar> </Page.BottomAppBar> </Page> ``` 对应的后台代码如下： ```csharp public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); } void OnBoldAppBarCheckBoxChecked(object sender, RoutedEventArgs args) { CheckBox chkbox = sender as CheckBox; textBlock.FontWeight = (bool)chkbox.IsChecked ? FontWeights.Bold : FontWeights.Normal; } void OnItalicAppBarCheckBoxChecked(object sender, RoutedEventArgs args) { CheckBox chkbox = sender as CheckBox; textBlock.FontStyle = (bool)chkbox.IsChecked ? FontStyle.Italic : FontStyle.Normal; } void OnUnderlineAppBarCheckBoxChecked(object sender, RoutedEventArgs args) { CheckBox chkbox = sender as CheckBox; Inline inline = textBlock.Inlines[0]; if ((bool)chkbox.IsChecked && !(inline is Underline)) { Underline underline = new Underline(); textBlock.Inlines[0] = underline; underline.Inlines.Add(inline); } else if (!(bool)chkbox.IsChecked && inline is Underline) { Underline underline = inline as Underline; Run run = underline.Inlines[0] as Run; underline.Inlines.Clear(); textBlock.Inlines[0] = run; } } void OnFontColorAppBarRadioButtonChecked(object sender, RoutedEventArgs args) { textBlock.Foreground = (sender as RadioButton).Foreground; } } ``` #### 4. 简单编辑器的应用程序栏 对于简单的编辑器，可以将文件操作按钮和字体设置按钮放置在应用程序栏中。以下是 `AppBarPad` 应用的 `MainPage.xaml` 文件示例： ```xml <Page ... > <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <TextBox Name="txtbox" IsEnabled="False" FontSize="24" AcceptsReturn="True" /> </Grid> <Page.BottomAppBar> <AppBar> <Grid> <StackPanel Orientation="Horizontal" HorizontalAlignment="Left"> <Button Style="{StaticResource FontIncreaseAppBarButtonStyle}" Click="OnFontIncreaseAppBarButtonClick" /> <Button Style="{StaticResource FontDecreaseAppBarButtonStyle}" Click="OnFontDecreaseAppBarButtonClick" /> <Button Style="{StaticResource SettingsAppBarButtonStyle}" AutomationProperties.Name="Wrap Option" Click="OnWrapOptionAppBarButtonClick" /> </StackPanel> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Button Style="{StaticResource OpenFileAppBarButtonStyle}" Click="OnOpenAppBarButtonClick" /> <Button Style="{StaticResource SaveAppBarButtonStyle}" AutomationProperties.Name="Save As" Click="OnSaveAsAppBarButtonClick" /> </StackPanel> </Grid> </AppBar> </Page.BottomAppBar> </Page> ``` 通常，应用程序栏的一部分按钮放在左侧，另一部分放在右侧，这样在手持平板时更方便操作。文件相关的按钮通常