GtkSharp CSS 样式使用

最新推荐文章于 2024-05-17 09:32:23 发布

fcroomhq1

最新推荐文章于 2024-05-17 09:32:23 发布

阅读量991

点赞数 1

分类专栏： NetCore GTK 文章标签： css c# 前端

本文链接：https://blog.csdn.net/fcroomhq1/article/details/126890489

版权

NetCore 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

GTK

1 篇文章 0 订阅

订阅专栏

GTKSharp CSS 样式初探

dotnet 下的 GtkWindow 使用css文件定义界面样式

环境：.net6.0、Gtk3

创建一个 gtk# 项目

dotnet new gtkapp

运行刚新建的项目

dotnet run

没有使用任何样式的原始界面如下：
没有加载样式的原始界面接下来用样式修改界面

新建一个 css 文件 style.css

/* You can edit the text in this window to change the
 * appearance of this Window.
 * Be careful, if you screw it up, nothing might be visible
 * anymore. :)
 */

/* The content of reset.css has been applied to reset all properties to
 * their defaults values and overrides all user settings and the theme in use */

/* Set a very futuristic style by default */
* {
  color: green;
  font-family: Monospace;
  border: 1px solid;
}

/* Make sure selections are visible */
:selected {
  background-color: darkGreen;
  color: black;
}

修改 Window 代码引用样式文件


        private MainWindow(Builder builder) : base(builder.GetRawOwnedObject("MainWindow"))
        {

#region ----------------样式加载部分-------------------
Gtk.CssProvider provider = new CssProvider();
        provider.LoadFromPath("style.css");

#endregion
            builder.Autoconnect(this);

#region ----------引用样式-----------
ApplyCss(this,provider,800);
#endregion
            DeleteEvent += Window_DeleteEvent;
            _button1.Clicked += Button1_Clicked;
        }


#region --------------------样式的启用功能----------------
//这个方法将样式使能到每个界面组件
private void ApplyCss (Widget widget, CssProvider provider, uint priority)
		{
			widget.StyleContext.AddProvider (provider, priority);
			var container = widget as Container;
			if (container != null) {
				foreach (var child in container.Children) {
					ApplyCss (child, provider, priority);
				}
			}
		}
    }
#endregion

现在运行一下程序看到界面如下图：
使用样式后的程序主界面
5. 再加入几个样式

* {
  color: green;
  font-family: Monospace;
  border: 1px solid;
/*改变字号和外边距*/
  font-size: 12pt;
  margin: 2px;

}

/*对应组件样式改变*/
label{
    color: red;
}

button{
    color:blue;
background-color:yellow;
}

window{
  padding:0px;
  border: 5px solid;
  border-color: red;
}

现在再运行一下程序，得到的界面如下：
最后的程序界面可以看到定义的样式已经起作用了。