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

283 天前
 cyrbuzz

拿一个按钮来说:

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>

写起来相当难受= =。

5886 次点击
所在节点    程序员
43 条回复
lisxour
283 天前
@nutting 设计器只能简单设置,还是直接在 xaml 编辑器改多点
kakki
283 天前
试试 Tauri
hulibenben
283 天前
kiracyan
283 天前
winform 最简单
klo424
283 天前
都 5202 年了,WPF 你纯代码开发么?我记得 2010 年左右就有 blend 工具用来画 WPF 了。
loveour
283 天前
@nutting 微软系一直有的。我一下都没太懂题主比较这个的用意在哪儿。这玩意儿难道不是自动生成的吗?
Tomcatxde
283 天前
如果你只做 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
282 天前
hez2010
282 天前
然而你这两段代码写的并不是同一个东西,前者只是给已有的 `btn` 这个 class 设置了样式,而布局上仍然需要你在使用的地方自己写 `<div class="btn"><div>icon</div>按钮</div>`;而后者是给所有的 Button 都应用了 `<div>icon</div>按钮` 的布局使得使用的时候不需要提供任何的额外 class ,直接写 `<Button>按钮</Button>` 就能变成包含你那个图标和触发动作的按钮。
xuanbg
282 天前
@sealoyal WinForm 的样式写起来更烦人
sunmker
282 天前
WPF 写样式模板是字比较多,但其实,又不是从头写的,“右键编辑模板-编辑副本”,修修改改的出来的
InAndOut
282 天前
你要知道 WPF 的历史 前生 sliverlight 更早的 FLASH
一路走过来 才知道 它为啥这样
EngAPI
282 天前
lazarus ,还天然跨平台,小 应用写写挺好的
rwecho
281 天前
MAUI + React 试试
cyrbuzz
281 天前
@nutting

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

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

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

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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1104231

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX