拿一个按钮来说:
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 小时 13 分钟前
试试 `WinForm`或者 `CPF`,你也可以在 `WPF` 中嵌入 `WebView`
|
2
yinmin 6 小时 58 分钟前
如果 OP 熟悉 HTML ,用 webview2 或者 cefsharp 嵌入 HTML ,用 HTML 做界面即可
|
3
Shatyuka 6 小时 18 分钟前
保守派:
WinForm WPF, Avalonia UWP, WinUI 3 思路打开: Unity, Godot, MonoGame |
4
iLoveSS 5 小时 22 分钟前
不知道有木有 css 到 wpf 的样式转换器啊
|
5
roundgis 5 小时 12 分钟前 via Android
試試 blazor hybrid
|
6
nutting 4 小时 54 分钟前
没有界面拖拉拽的设计吗,当年 vb 还有呢
|
7
TimG 4 小时 32 分钟前 via Android
目前用过的写客户端界面的框架 WPF 已经是第一梯队了。是 HTML+CSS 写起界面太优秀了,显得别家都很蠢,根本不在一个层次上。如果不考虑兼容 win7 且界面设计复杂,建议用 webview2 套壳一个。
|
8
Dropless 4 小时 18 分钟前
wpf 的跨平台版 avalonia, 既支持 WPF 风格的 style, 也支持类似 css 的 style.
|
9
liuliuliuliu 4 小时 14 分钟前
要不看看 avaloina ,可能好一点,但是也没有好很多
<Style Selector="^:pointerover"> <Setter Property="Foreground" Value="Red"/> </Style> |
10
ano 4 小时 14 分钟前
同感,css 太顺手了
|
11
ysc3839 2 小时 46 分钟前
React Native for Windows
|
12
VchentozV 2 小时 43 分钟前 via iPhone
微软是书呆子,所以弃坑了
|
13
GavinXSF 2 小时 37 分钟前
如果你对 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 2 小时 36 分钟前 via Android
xml 这个屎坑, 只要遇到就讨厌
|
15
bbsabc2 2 小时 31 分钟前
blazorwasm 。写起来比较舒服,
|
16
liuliuliuliu 2 小时 26 分钟前
啊对,可以看一下国产的 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 2 小时 19 分钟前
atomui?
|
18
Norie 37 分钟前 via Android
electron
|