拿一个按钮来说:
HTML/css
<div class="btn"><div>icon</div>按钮</div>
.btn {
color: red;
border: 1px solid #75a4ff;
padding: 10px;
border-radius: 15px;
height: 32px;
width: 76px
margin: 0 0 0 8px;
font-size: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
&:hover {
color: #fff;
background: #75a4ff;
}
}
C# wpf:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:local="clr-namespace:WpfApp1.Components">
<Style TargetType="local:Button">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="#75a4ff"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Height" Value="32"/>
<Setter Property="Width" Value="76"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Padding" Value="2"/>
<Setter Property="Margin" Value="8,0,0,0"/>
<Setter Property="Foreground" Value="#75a4ff"/>
<Setter Property="FontSize" Value="10"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:Button">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="15" Padding="2">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
<mah:FontIcon FontFamily="Segoe MDL2 Assets" FontSize="10" Glyph="" HorizontalAlignment="Left">
<mah:FontIcon.Style>
<Style TargetType="mah:FontIcon">
<Setter Property="Foreground" Value="#75a4ff"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=local:Button}}" Value="True">
<Setter Property="Foreground" Value="White"/>
</DataTrigger>
</Style.Triggers>
</Style>
</mah:FontIcon.Style>
</mah:FontIcon>
<TextBlock Text="{Binding Content, RelativeSource={RelativeSource AncestorType=local:Button}}" Margin="8, 0, 0, 0">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="#75a4ff"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=local:Button}}" Value="True">
<Setter Property="Foreground" Value="White"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#75a4ff"></Setter>
<Setter Property="Cursor" Value="Hand"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
写起来相当难受= =。
1
sealoyal 7 天前 1
试试 `WinForm`或者 `CPF`,你也可以在 `WPF` 中嵌入 `WebView`
|
2
yinmin 7 天前 1
如果 OP 熟悉 HTML ,用 webview2 或者 cefsharp 嵌入 HTML ,用 HTML 做界面即可
|
3
Shatyuka 7 天前 2
保守派:
WinForm WPF, Avalonia UWP, WinUI 3 思路打开: Unity, Godot, MonoGame |
4
iLoveSS 7 天前
不知道有木有 css 到 wpf 的样式转换器啊
|
5
roundgis 7 天前 via Android 1
試試 blazor hybrid
|
6
nutting 7 天前 1
没有界面拖拉拽的设计吗,当年 vb 还有呢
|
7
TimG 7 天前 via Android 1
目前用过的写客户端界面的框架 WPF 已经是第一梯队了。是 HTML+CSS 写起界面太优秀了,显得别家都很蠢,根本不在一个层次上。如果不考虑兼容 win7 且界面设计复杂,建议用 webview2 套壳一个。
|
8
Dropless 7 天前 1
wpf 的跨平台版 avalonia, 既支持 WPF 风格的 style, 也支持类似 css 的 style.
|
9
liuliuliuliu 7 天前 1
要不看看 avaloina ,可能好一点,但是也没有好很多
<Style Selector="^:pointerover"> <Setter Property="Foreground" Value="Red"/> </Style> |
10
ano 7 天前 1
同感,css 太顺手了
|
11
ysc3839 7 天前
React Native for Windows
|
12
VchentozV 7 天前 via iPhone
微软是书呆子,所以弃坑了
|
13
GavinXSF 7 天前 1
如果你对 declarative UI 有兴趣的话,我看到过 MAUI 和 UNO 支持 C# Markup 写法,推荐给你:
1. MAUI -- https://github.com/CommunityToolkit/Maui.Markup 2. UNO -- https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Markup/Overview.html |
14
dbskcnc 7 天前 via Android 1
xml 这个屎坑, 只要遇到就讨厌
|
15
bbsabc2 7 天前 1
blazorwasm 。写起来比较舒服,
|
16
liuliuliuliu 7 天前 1
啊对,可以看一下国产的 CPF
``` Button { BorderFill: #DCDFE6; IsAntiAlias: True; CornerRadius: 4,4,4,4; Background: #FFFFFF; } Button[IsMouseOver=true] { BorderFill: rgb(198,226,255); Background: rgb(236,245,255); Foreground: rgb(64,158,255); } Button[IsPressed=true] { BorderFill: rgb(58,142,230); } ``` http://cpf.cskin.net/Course/#/CPF/CSS |
17
fuchish112 7 天前 1
atomui?
|
18
Norie 7 天前 via Android
electron
|
19
ragnaroks 7 天前
想继续用 html 、css 就 blazor hybrid ,本质上是个在本机运行的 blazor server app
|
20
cyersvet 7 天前 via Android 1
这里有个 wpf 中使用 c#的 markup 写界面的,https://github.com/VincentH-Net/CSharpForMarkup?tab=readme-ov-file
|
22
kakki 7 天前 1
试试 Tauri
|
24
kiracyan 7 天前 1
winform 最简单
|
25
klo424 7 天前 1
都 5202 年了,WPF 你纯代码开发么?我记得 2010 年左右就有 blend 工具用来画 WPF 了。
|
27
Tomcatxde 7 天前 1
如果你只做 Windows 且想跟上微软的最新生态
可以看看 WinUI 3 (Windows App SDK)。在 WPF 基础上,又比 UWP 更开放,不失为一个值得尝试的“官方未来路线”。 如果想“一套代码多平台” 考虑 .NET MAUI 或者 Avalonia 。MAUI 偏官方路线,Avalonia 社区驱动更强,跨平台覆盖面可能更广一些。 如果真的就想“HTML/CSS”那一套 用 Blazor + Electron / WebView 的方式做一个混合应用,基本就是网页的前端开发体验。但要考虑到包装出来的“原生程度”、应用大小和性能开销。 如果 WPF 本身功能完全够用,只是嫌写 XAML 麻烦 可以先看看 MahApps.Metro 、Material Design in XAML 等成熟的 UI 库,能省去相当多的样式编写工作,也有一整套相对统一的控件和主题可用。 熟悉一些 WPF 的最佳实践( DataTemplate 、Style 、绑定等),多用资源字典与模板做抽象,后期改样式会更灵活,不用重复写很多 XAML 。 |
28
mmdsun 6 天前 1
Electron 比较火。
微软推荐这几个平台: https://learn.microsoft.com/zh-cn/windows/apps/get-started/?tabs=cpp-win32%2Cnet-maui |
29
hez2010 6 天前 1
然而你这两段代码写的并不是同一个东西,前者只是给已有的 `btn` 这个 class 设置了样式,而布局上仍然需要你在使用的地方自己写 `<div class="btn"><div>icon</div>按钮</div>`;而后者是给所有的 Button 都应用了 `<div>icon</div>按钮` 的布局使得使用的时候不需要提供任何的额外 class ,直接写 `<Button>按钮</Button>` 就能变成包含你那个图标和触发动作的按钮。
|
31
sunmker 6 天前 1
WPF 写样式模板是字比较多,但其实,又不是从头写的,“右键编辑模板-编辑副本”,修修改改的出来的
|
32
InAndOut 6 天前 1
你要知道 WPF 的历史 前生 sliverlight 更早的 FLASH
一路走过来 才知道 它为啥这样 |
33
EngAPI 6 天前 1
lazarus ,还天然跨平台,小 应用写写挺好的
|
34
rwecho 5 天前 1
MAUI + React 试试
|
38
cyrbuzz OP |
40
kasusa 5 天前
这种时候就应该让 ai 写。
你写 html + css 让 ai 按照你的样式写成 wpf 的 xml |
42
anbus 4 天前
tauri, wails 都是使用 webview 技术, 值得你选择,目前我写 GUI 已经全面转到这两个上了
|