V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
cyrbuzz
V2EX  ›  程序员

求教,最近写了一段时间 C# WPF, 仅从写样式角度,感觉比起 HTML/CSS 非常麻烦,纯 windows 桌面应用 C#下有其他更好用的框架吗?

  •  
  •   cyrbuzz ·
    HuberTRoy · 7 天前 · 3610 次点击

    拿一个按钮来说:

    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="&#xE948;" 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>
    

    写起来相当难受= =。

    43 条回复    2025-01-14 08:05:25 +08:00
    sealoyal
        1
    sealoyal  
       7 天前   ❤️ 1
    试试 `WinForm`或者 `CPF`,你也可以在 `WPF` 中嵌入 `WebView`
    yinmin
        2
    yinmin  
       7 天前   ❤️ 1
    如果 OP 熟悉 HTML ,用 webview2 或者 cefsharp 嵌入 HTML ,用 HTML 做界面即可
    Shatyuka
        3
    Shatyuka  
       7 天前   ❤️ 2
    保守派:
    WinForm
    WPF, Avalonia
    UWP, WinUI 3
    思路打开:
    Unity, Godot, MonoGame
    iLoveSS
        4
    iLoveSS  
       7 天前
    不知道有木有 css 到 wpf 的样式转换器啊
    roundgis
        5
    roundgis  
       7 天前 via Android   ❤️ 1
    試試 blazor hybrid
    nutting
        6
    nutting  
       7 天前   ❤️ 1
    没有界面拖拉拽的设计吗,当年 vb 还有呢
    TimG
        7
    TimG  
       7 天前 via Android   ❤️ 1
    目前用过的写客户端界面的框架 WPF 已经是第一梯队了。是 HTML+CSS 写起界面太优秀了,显得别家都很蠢,根本不在一个层次上。如果不考虑兼容 win7 且界面设计复杂,建议用 webview2 套壳一个。
    Dropless
        8
    Dropless  
       7 天前   ❤️ 1
    wpf 的跨平台版 avalonia, 既支持 WPF 风格的 style, 也支持类似 css 的 style.
    liuliuliuliu
        9
    liuliuliuliu  
       7 天前   ❤️ 1
    要不看看 avaloina ,可能好一点,但是也没有好很多
    <Style Selector="^:pointerover">
    <Setter Property="Foreground" Value="Red"/>
    </Style>
    ano
        10
    ano  
       7 天前   ❤️ 1
    同感,css 太顺手了
    ysc3839
        11
    ysc3839  
       7 天前
    React Native for Windows
    VchentozV
        12
    VchentozV  
       7 天前 via iPhone
    微软是书呆子,所以弃坑了
    GavinXSF
        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
    dbskcnc
        14
    dbskcnc  
       7 天前 via Android   ❤️ 1
    xml 这个屎坑, 只要遇到就讨厌
    bbsabc2
        15
    bbsabc2  
       7 天前   ❤️ 1
    blazorwasm 。写起来比较舒服,
    liuliuliuliu
        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
    fuchish112
        17
    fuchish112  
       7 天前   ❤️ 1
    atomui?
    Norie
        18
    Norie  
       7 天前 via Android
    electron
    ragnaroks
        19
    ragnaroks  
       7 天前
    想继续用 html 、css 就 blazor hybrid ,本质上是个在本机运行的 blazor server app
    cyersvet
        20
    cyersvet  
       7 天前 via Android   ❤️ 1
    这里有个 wpf 中使用 c#的 markup 写界面的,https://github.com/VincentH-Net/CSharpForMarkup?tab=readme-ov-file
    lisxour
        21
    lisxour  
       7 天前
    @nutting 设计器只能简单设置,还是直接在 xaml 编辑器改多点
    kakki
        22
    kakki  
       7 天前   ❤️ 1
    试试 Tauri
    kiracyan
        24
    kiracyan  
       7 天前   ❤️ 1
    winform 最简单
    klo424
        25
    klo424  
       7 天前   ❤️ 1
    都 5202 年了,WPF 你纯代码开发么?我记得 2010 年左右就有 blend 工具用来画 WPF 了。
    loveour
        26
    loveour  
       7 天前
    @nutting 微软系一直有的。我一下都没太懂题主比较这个的用意在哪儿。这玩意儿难道不是自动生成的吗?
    Tomcatxde
        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 。
    mmdsun
        28
    mmdsun  
       6 天前   ❤️ 1
    hez2010
        29
    hez2010  
       6 天前   ❤️ 1
    然而你这两段代码写的并不是同一个东西,前者只是给已有的 `btn` 这个 class 设置了样式,而布局上仍然需要你在使用的地方自己写 `<div class="btn"><div>icon</div>按钮</div>`;而后者是给所有的 Button 都应用了 `<div>icon</div>按钮` 的布局使得使用的时候不需要提供任何的额外 class ,直接写 `<Button>按钮</Button>` 就能变成包含你那个图标和触发动作的按钮。
    xuanbg
        30
    xuanbg  
       6 天前
    @sealoyal WinForm 的样式写起来更烦人
    sunmker
        31
    sunmker  
       6 天前   ❤️ 1
    WPF 写样式模板是字比较多,但其实,又不是从头写的,“右键编辑模板-编辑副本”,修修改改的出来的
    InAndOut
        32
    InAndOut  
       6 天前   ❤️ 1
    你要知道 WPF 的历史 前生 sliverlight 更早的 FLASH
    一路走过来 才知道 它为啥这样
    EngAPI
        33
    EngAPI  
       6 天前   ❤️ 1
    lazarus ,还天然跨平台,小 应用写写挺好的
    rwecho
        34
    rwecho  
       5 天前   ❤️ 1
    MAUI + React 试试
    cyrbuzz
        35
    cyrbuzz  
    OP
       5 天前
    @nutting

    拖拽之前就感觉不太好用= =。
    cyrbuzz
        36
    cyrbuzz  
    OP
       5 天前
    @TimG

    套壳 Webview 的话就打算 tauri= =.
    cyrbuzz
        37
    cyrbuzz  
    OP
       5 天前
    @ysc3839
    这个考虑过,有更好的挑选= =。
    cyrbuzz
        38
    cyrbuzz  
    OP
       5 天前
    @loveour

    感谢我去找找工具,代码是我查了比较多资料手写的,用 Vs 初始化之后只有 preview 没有看到有直接生成 Ui 的工具,要是有确实没必要比较了。
    cyrbuzz
        39
    cyrbuzz  
    OP
       5 天前
    @hez2010

    啊,其实是一样的,随便用个框架封装一下就是一个 Button 组件。
    kasusa
        40
    kasusa  
       5 天前
    这种时候就应该让 ai 写。
    你写 html + css
    让 ai 按照你的样式写成 wpf 的 xml
    cyrbuzz
        41
    cyrbuzz  
    OP
       5 天前
    @kasusa

    现在是这样的,AI 给个大概我再修改修改。
    anbus
        42
    anbus  
       4 天前
    tauri, wails 都是使用 webview 技术, 值得你选择,目前我写 GUI 已经全面转到这两个上了
    VchentozV
        43
    VchentozV  
       4 天前
    @Norie 微信 PC 客户端改用 C++ 了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2852 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 05:51 · PVG 13:51 · LAX 21:51 · JFK 00:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.