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

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

  •  
  •   cyrbuzz ·
    HuberTRoy · 2 天前 · 2869 次点击

    拿一个按钮来说:

    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>
    

    写起来相当难受= =。

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