将静态 XAML 内联样式转换为外部 CSS 样式表

问题描述

一开始我不熟悉 XAML，但我非常了解 XML/CSS。我已经开始帮助一位朋友向他们的 XAML 应用程序添加一些样式，但很快注意到他们的所有样式都是内联的，这是一个噩梦。这是他们的一大段代码：

add-type -AssemblyName System.Windows.Controls.Ribbon,PresentationFramework

[xml]$xaml = @"
<Window Height="425" Title="TSD-Essentials" Width="1050" x:Name="Window" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:ribbon="clr-namespace:System.Windows.Controls.Ribbon;assembly=System.Windows.Controls.Ribbon" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:z="http://www.w3.org/1999/xhtml">

 <Grid x:Name="Grid">
  <Grid.RowDeFinitions>
   <RowDeFinition Height="AUTO"/>
   <RowDeFinition Height="AUTO"/>
   <RowDeFinition Height="AUTO"/>
   <RowDeFinition Height="AUTO"/>
   <RowDeFinition Height="AUTO"/>
   <RowDeFinition Height="AUTO"/>
  </Grid.RowDeFinitions>

  <Grid.ColumnDeFinitions>
   <ColumnDeFinition Width="75"/>
   <ColumnDeFinition Width="155"/>
   <ColumnDeFinition Width="AUTO"/>
   <ColumnDeFinition Width="AUTO"/>
   <ColumnDeFinition Width="AUTO"/>
   <ColumnDeFinition Width="AUTO"/>
  </Grid.ColumnDeFinitions>

  <Grid.Background>
   <LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1">
    <GradientStop Color="White" Offset="0"/>
    <GradientStop Color="#52618f" Offset="1"/> 
   </LinearGradientBrush>
  </Grid.Background>

  <Label Content="Host Name:" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Width="80" />
  <TextBox x:Name = "HostName" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" Width="150"></TextBox><!--Enter host name-->

  <Label Content="Service Now:" Grid.Column="2" Grid.Row="0" />
  <TextBox Grid.Column="3" Grid.Row="0" Width="175" x:Name = "SNtextBox">Search ServiceNow</TextBox>

    </Grid>
</Window>
"@
$reader = (New-Object System.Xml.XmlNodeReader $xaml)
$window = [Windows.Markup.XamlReader]::Load($reader)
$window.ShowDialog()

现在我尝试研究并添加我自己的样式表声明...

外部：

<StyleSheet Source="styles.css" />

内部：

<StyleSheet>
<![CDATA[
TextBox {background-color: #f0f;}
]]>
</StyleSheet>

但是我不断收到错误消息。我遇到的 XAML 文档有各种元素，例如 application，但我的朋友使用的是 window。所以我不知道是否涉及版本控制，因此为什么我粘贴了一大段我已经开始清理的代码。

使用“1”个参数调用“Load”的异常：“无法创建未知类型‘{http://schemas.microsoft.com/winfx/2006/xaml/presentation}StyleSheet’。”

我一直在阅读以下文档，但最终得到的只是错误消息：

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/styles/css/#xaml

我隐约知道这在某种程度上与 .NET 相关（使用 Windows PowerShell ISE 对其进行编辑），尽管我对此并不熟悉。我只需要帮助他摆脱内联样式，否则他将永远无法完成任何工作。如何使样式表正常工作，并通过一个简单示例说明如何更改 background-color（或任何等效的 XAML）以定义所有 background-color 元素的 TextBox？>

解决方法

我不完全确定是否有一种有效的方式来做到这一点，但是这确实有效。我在 Window.Resources 元素之后添加了 Window 元素。代码如下：

<Window [...]><!-- Shown for it's relative position in the code. -->

<Window.Resources>
<Style TargetType="TextBox">
 <Setter Property="Background" Value="#000" />
 <Setter Property="Foreground" Value="#ccc" />
 <Setter Property="HorizontalAlignment" Value="Left" />
 <Setter Property="FontSize" Value="17" />
</Style>
</Window.Resources>

---

CSS :hover 和 :focus 样式似乎是一个子集（尝试使用最少的代码）：

<Window.Resources>
 <Style TargetType="TextBox">
  <!-- CSS background-color --> 
  <Setter Property="Background" Value="#000" />

  <Style.Triggers>
   <!-- CSS :hover -->
   <Trigger Property="IsMouseOver" Value="True">
    <Setter Property="BorderBrush" Value="#f0f" />
    <Setter Property="Background" Value="#222" />
    <Setter Property="Foreground" Value="#fff" />
   </Trigger>

   <!-- CSS :focus -->
   <Trigger Property="IsKeyboardFocused" Value="True">
    <Setter Property="BorderBrush" Value="#f0f" />
    <Setter Property="Background" Value="#222" />
    <Setter Property="Foreground" Value="#fff" />
   </Trigger>
  </Style.Triggers>
 </Style>
</Window.Resources>