[英]Convert static XAML inline styles to external CSS style sheet
To start I am not familiar with XAML however I know XML/CSS exceptionally well.首先我不熟悉 XAML 但是我非常了解 XML/CSS。 I've begun helping a friend add some style to their XAML application though very quickly noticed that all of their styling is inline which is a nightmare .
我已经开始帮助一个朋友为他们的 XAML 应用程序添加一些样式,尽管很快注意到他们所有的样式都是内联的,这是一场噩梦。 Here is a good chunk of their code:
这是他们的一大段代码:
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()
Now I've attempted to research and add my own style sheet declarations...现在我试图研究并添加我自己的样式表声明......
External:外部的:
<StyleSheet Source="styles.css" />
Internal:内部的:
<StyleSheet>
<![CDATA[
TextBox {background-color: #f0f;}
]]>
</StyleSheet>
However I keep getting error messages.但是我不断收到错误消息。 The XAML documentation I come across has various elements such as
application
however my friend is using window
.我遇到的 XAML 文档有各种元素,例如
application
,但是我的朋友正在使用window
。 So I don't know if there is versioning involved or not hence why I pasted a large snippet of the code I've begun to clean up.所以我不知道是否涉及版本控制,因此为什么我粘贴了一大段我已经开始清理的代码。
Exception calling "Load" with "1" argument(s): "Cannot create unknown type '{http://schemas.microsoft.com/winfx/2006/xaml/presentation}StyleSheet'."
使用“1”参数调用“加载”的异常:“无法创建未知类型 '{http://schemas.microsoft.com/winfx/2006/xaml/presentation}StyleSheet'。”
I've been reading through documents like the following though all I end up getting are error messages:尽管我最终得到的只是错误消息,但我一直在阅读以下文档:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/styles/css/#xaml https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/styles/css/#xaml
I'm vaguely aware that this is somehow .NET related (using Windows PowerShell ISE to edit this) though I'm not familiar with this.我隐约知道这在某种程度上与 .NET 相关(使用 Windows PowerShell ISE 来编辑它)虽然我对此并不熟悉。 I simply need to help him get out of inline styling or he'll never get any work done.
我只需要帮助他摆脱内联样式,否则他将永远无法完成任何工作。 How can I get a style sheet working and with a simple example of how to change the
background-color
(or whatever XAML equivalent) to define the background-color
of all of the TextBox
elements?如何让样式表正常工作,并通过一个简单示例说明如何更改
background-color
(或任何 XAML 等效项)来定义所有TextBox
元素的background-color
?
I'm not entirely sure if there is an efficient manner of doing this however this does work.我不完全确定是否有一种有效的方式来做到这一点,但这确实有效。 I added the
Window.Resources
element just after the Window
element.我在
Window.Resources
元素之后添加了Window
元素。 Here is the code for that:这是代码:
<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
and :focus
style appears to be a subset (trying to use minimal code): 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.