merge: high-DPI scaling & layout fixes (v0.2.2)

This commit is contained in:
2026-06-05 13:33:33 +08:00
7 changed files with 90 additions and 48 deletions
+26 -20
View File
@@ -21,7 +21,7 @@ public sealed class AboutView : UserControl
var left = new FlowLayoutPanel var left = new FlowLayoutPanel
{ {
Dock = DockStyle.Left, Width = 380, FlowDirection = FlowDirection.TopDown, Dock = DockStyle.Left, Width = 380, FlowDirection = FlowDirection.TopDown,
WrapContents = false, AutoScroll = false, Padding = new Padding(20), WrapContents = false, AutoScroll = true, Padding = new Padding(20),
BackColor = Theme.WorkspaceBack BackColor = Theme.WorkspaceBack
}; };
@@ -73,7 +73,7 @@ public sealed class AboutView : UserControl
{ {
var header = new Label var header = new Label
{ {
AutoSize = false, Width = 500, Height = 22, AutoSize = true,
Text = $"● v{entry.Version} · {entry.Title} ({entry.Date:yyyy-MM-dd})", Text = $"● v{entry.Version} · {entry.Title} ({entry.Date:yyyy-MM-dd})",
ForeColor = Theme.Accent, Font = Theme.UiFontBold, ForeColor = Theme.Accent, Font = Theme.UiFontBold,
Margin = new Padding(0, 8, 0, 2) Margin = new Padding(0, 8, 0, 2)
@@ -83,7 +83,7 @@ public sealed class AboutView : UserControl
{ {
right.Controls.Add(new Label right.Controls.Add(new Label
{ {
AutoSize = false, Width = 500, Height = 20, AutoSize = true,
Text = $" • {change}", Text = $" • {change}",
ForeColor = Theme.Text, Font = Theme.UiFont, ForeColor = Theme.Text, Font = Theme.UiFont,
Margin = new Padding(0) Margin = new Padding(0)
@@ -99,18 +99,17 @@ public sealed class AboutView : UserControl
private static Panel MakeCard(int width, int height, Action<FlowLayoutPanel> build) private static Panel MakeCard(int width, int height, Action<FlowLayoutPanel> build)
{ {
var card = new Panel // 卡片本身就是 TopDown 的 AutoSize FlowLayoutPanel:高度永遠長到容得下內容
// (高 DPI 字變大也不會被裁),MinimumSize 維持 100% 的設計尺寸。
var card = new FlowLayoutPanel
{ {
Width = width, Height = height, Margin = new Padding(0, 0, 0, 12), FlowDirection = FlowDirection.TopDown, WrapContents = false,
AutoSize = true, AutoSizeMode = AutoSizeMode.GrowAndShrink,
MinimumSize = new Size(width, height),
Margin = new Padding(0, 0, 0, 12),
BackColor = Theme.TabBack, Padding = new Padding(12) BackColor = Theme.TabBack, Padding = new Padding(12)
}; };
var flow = new FlowLayoutPanel build(card);
{
Dock = DockStyle.Fill, FlowDirection = FlowDirection.TopDown,
WrapContents = false, BackColor = Theme.TabBack, AutoSize = false
};
build(flow);
card.Controls.Add(flow);
return card; return card;
} }
@@ -149,24 +148,31 @@ public sealed class AboutView : UserControl
{ {
return new Label return new Label
{ {
AutoSize = false, Width = 310, Height = 20, AutoSize = true,
Text = text, Font = font, ForeColor = color, Text = text, Font = font, ForeColor = color,
TextAlign = align, Margin = new Padding(0) TextAlign = align, Margin = new Padding(0, 1, 0, 1)
}; };
} }
private static Panel MakeRow(string label, string value) private static Control MakeRow(string label, string value)
{ {
var row = new Panel { Width = 310, Height = 20, Margin = new Padding(0, 2, 0, 0), BackColor = Color.Transparent }; var row = new FlowLayoutPanel
{
AutoSize = true, AutoSizeMode = AutoSizeMode.GrowAndShrink,
FlowDirection = FlowDirection.LeftToRight, WrapContents = false,
Margin = new Padding(0, 2, 0, 0), BackColor = Color.Transparent
};
row.Controls.Add(new Label row.Controls.Add(new Label
{ {
Text = value, AutoSize = false, Width = 230, Height = 20, Dock = DockStyle.Right, Text = label, AutoSize = true, MinimumSize = new Size(70, 0),
ForeColor = Theme.Text, Font = Theme.UiFont, TextAlign = ContentAlignment.MiddleRight ForeColor = Theme.TextDim, Font = Theme.UiFont,
TextAlign = ContentAlignment.MiddleLeft, Margin = new Padding(0, 0, 8, 0)
}); });
row.Controls.Add(new Label row.Controls.Add(new Label
{ {
Text = label, AutoSize = false, Width = 70, Height = 20, Dock = DockStyle.Left, Text = value, AutoSize = true,
ForeColor = Theme.TextDim, Font = Theme.UiFont, TextAlign = ContentAlignment.MiddleLeft ForeColor = Theme.Text, Font = Theme.UiFont,
TextAlign = ContentAlignment.MiddleLeft, Margin = new Padding(0)
}); });
return row; return row;
} }
+16 -1
View File
@@ -17,7 +17,9 @@ public sealed class ActivityRail : UserControl
private RailView _active = RailView.Terminal; private RailView _active = RailView.Terminal;
private RailView? _hover; private RailView? _hover;
private const int ItemSize = 56; private const int BaseItemSize = 56;
/// <summary>依目前螢幕 DPI 縮放的格子大小(owner-draw 不會自動縮放像素,需自己換算)。</summary>
private int ItemSize => (int)Math.Round(BaseItemSize * (DeviceDpi / 96.0));
private static readonly (RailView view, string glyph, string tip)[] Items = private static readonly (RailView view, string glyph, string tip)[] Items =
{ {
(RailView.Terminal, "▤", "Terminal"), (RailView.Terminal, "▤", "Terminal"),
@@ -37,6 +39,19 @@ public sealed class ActivityRail : UserControl
Cursor = Cursors.Hand; Cursor = Cursors.Hand;
} }
protected override void OnHandleCreated(EventArgs e)
{
base.OnHandleCreated(e);
Width = ItemSize; // handle 建立後 DeviceDpi 才正確,依實際 DPI 重設寬度
}
protected override void OnDpiChangedAfterParent(EventArgs e)
{
base.OnDpiChangedAfterParent(e);
Width = ItemSize; // 拖到不同縮放的螢幕時跟著調整
Invalidate();
}
[System.ComponentModel.DesignerSerializationVisibility( [System.ComponentModel.DesignerSerializationVisibility(
System.ComponentModel.DesignerSerializationVisibility.Hidden)] System.ComponentModel.DesignerSerializationVisibility.Hidden)]
public RailView ActiveView public RailView ActiveView
+9 -4
View File
@@ -49,10 +49,11 @@ public sealed class ConnectionSidebar : UserControl
BackColor = Theme.SidebarBack; BackColor = Theme.SidebarBack;
// ── Tab bar (Sessions / SFTP) ── // ── Tab bar (Sessions / SFTP) ──
// 高度 40 與右側 Workspace 工具列對齊,讓「CONNECTIONS / 連線清單」與右側分頁列同一條基準線
var tabBar = new FlowLayoutPanel var tabBar = new FlowLayoutPanel
{ {
Dock = DockStyle.Top, Height = 30, BackColor = Theme.RailBack, Dock = DockStyle.Top, Height = 40, BackColor = Theme.RailBack,
Padding = new Padding(4, 3, 4, 0), WrapContents = false Padding = new Padding(4, 7, 4, 0), WrapContents = false
}; };
var sessionsPanel = new Panel { Dock = DockStyle.Fill, BackColor = Theme.SidebarBack }; var sessionsPanel = new Panel { Dock = DockStyle.Fill, BackColor = Theme.SidebarBack };
@@ -63,7 +64,9 @@ public sealed class ConnectionSidebar : UserControl
{ {
var b = new Button var b = new Button
{ {
Text = text, Width = 70, Height = 24, FlatStyle = FlatStyle.Flat, Text = text, AutoSize = true, AutoSizeMode = AutoSizeMode.GrowAndShrink,
MinimumSize = new Size(70, 24), Padding = new Padding(8, 2, 8, 2),
FlatStyle = FlatStyle.Flat,
ForeColor = Theme.Text, BackColor = Theme.TabBack, Font = Theme.UiFont, ForeColor = Theme.Text, BackColor = Theme.TabBack, Font = Theme.UiFont,
Margin = new Padding(0, 0, 4, 0), Cursor = Cursors.Hand Margin = new Padding(0, 0, 4, 0), Cursor = Cursors.Hand
}; };
@@ -217,7 +220,9 @@ public sealed class ConnectionSidebar : UserControl
var sshCombo = new ComboBox { Width = 120, DropDownStyle = ComboBoxStyle.DropDownList, BackColor = Theme.TabBack, ForeColor = Theme.Text, Font = Theme.UiFont }; var sshCombo = new ComboBox { Width = 120, DropDownStyle = ComboBoxStyle.DropDownList, BackColor = Theme.TabBack, ForeColor = Theme.Text, Font = Theme.UiFont };
var connectBtn = new Button var connectBtn = new Button
{ {
Text = "Connect", Width = 64, Height = 24, FlatStyle = FlatStyle.Flat, Text = "Connect", AutoSize = true, AutoSizeMode = AutoSizeMode.GrowAndShrink,
MinimumSize = new Size(64, 24), Padding = new Padding(8, 2, 8, 2),
FlatStyle = FlatStyle.Flat,
ForeColor = Theme.Text, BackColor = Theme.TabBack, Font = Theme.UiFont, Cursor = Cursors.Hand, Margin = new Padding(4, 0, 0, 0) ForeColor = Theme.Text, BackColor = Theme.TabBack, Font = Theme.UiFont, Cursor = Cursors.Hand, Margin = new Padding(4, 0, 0, 0)
}; };
connectBtn.FlatAppearance.BorderColor = Theme.SerialColor; connectBtn.FlatAppearance.BorderColor = Theme.SerialColor;
+4 -2
View File
@@ -18,8 +18,10 @@ partial class MainForm
{ {
SuspendLayout(); SuspendLayout();
AutoScaleDimensions = new SizeF(7F, 15F); // 用 Dpi 自動縮放:尺寸縮放比例 = 螢幕 DPI 比例,與點數字型的實際渲染比例一致,
AutoScaleMode = AutoScaleMode.Font; // 避免「字放大了、容器沒放大」造成的高 DPI 文字/按鈕被裁切。
AutoScaleDimensions = new SizeF(96F, 96F);
AutoScaleMode = AutoScaleMode.Dpi;
ClientSize = new Size(1100, 700); ClientSize = new Size(1100, 700);
MinimumSize = new Size(720, 480); MinimumSize = new Size(720, 480);
BackColor = Theme.WorkspaceBack; BackColor = Theme.WorkspaceBack;
+23 -17
View File
@@ -33,7 +33,9 @@ public sealed class SettingsView : UserControl
var b = new Button var b = new Button
{ {
Text = text, AutoSize = false, Width = 80, Height = 26, FlatStyle = FlatStyle.Flat, Text = text, AutoSize = true, AutoSizeMode = AutoSizeMode.GrowAndShrink,
MinimumSize = new Size(70, 26), Padding = new Padding(10, 2, 10, 2),
FlatStyle = FlatStyle.Flat,
ForeColor = Theme.Text, BackColor = Theme.TabBack, Font = Theme.UiFont, ForeColor = Theme.Text, BackColor = Theme.TabBack, Font = Theme.UiFont,
Margin = new Padding(0, 0, 4, 0), Cursor = Cursors.Hand Margin = new Padding(0, 0, 4, 0), Cursor = Cursors.Hand
}; };
@@ -432,25 +434,27 @@ public sealed class SettingsView : UserControl
} }
// ── Helpers ── // ── Helpers ──
private const int LabelWidth = 150; // 標籤欄固定寬度 private const int LabelWidth = 150; // 標籤欄最小寬度
private const int InputWidth = 200; // 所有輸入框統一寬度 private const int InputWidth = 200; // 所有輸入框統一寬度
private static Panel MakeRow(string label, Control control) private static Control MakeRow(string label, Control control)
{ {
var row = new Panel { Width = LabelWidth + InputWidth, Height = 32, Margin = new Padding(0, 3, 0, 3) }; // 用 FlowLayout + AutoSize 標籤取代絕對定位,讓高 DPI 下標籤變寬也不會被裁、且對齊穩定
var row = new FlowLayoutPanel
// 統一輸入框寬度 + 左緣對齊(不再 Dock.Right,避免右對齊造成左緣參差) {
control.Width = InputWidth; AutoSize = true, AutoSizeMode = AutoSizeMode.GrowAndShrink,
int top = (row.Height - control.Height) / 2; FlowDirection = FlowDirection.LeftToRight, WrapContents = false,
control.Location = new Point(LabelWidth, top < 0 ? 0 : top); Margin = new Padding(0, 3, 0, 3), BackColor = Color.Transparent
};
var lbl = new Label
{
Text = label, AutoSize = true, MinimumSize = new Size(LabelWidth, 0),
ForeColor = Theme.Text, Font = Theme.UiFont,
TextAlign = ContentAlignment.MiddleLeft, Margin = new Padding(0, 6, 8, 0)
};
if (control.Width <= 0) control.Width = InputWidth;
row.Controls.Add(lbl);
row.Controls.Add(control); row.Controls.Add(control);
row.Controls.Add(new Label
{
Text = label, AutoSize = false, Width = LabelWidth, Height = row.Height,
Location = new Point(0, 0), ForeColor = Theme.Text, Font = Theme.UiFont,
TextAlign = ContentAlignment.MiddleLeft
});
return row; return row;
} }
@@ -458,7 +462,9 @@ public sealed class SettingsView : UserControl
{ {
var b = new Button var b = new Button
{ {
Text = text, Width = 90, Height = 28, FlatStyle = FlatStyle.Flat, Text = text, AutoSize = true, AutoSizeMode = AutoSizeMode.GrowAndShrink,
MinimumSize = new Size(90, 28), Padding = new Padding(10, 2, 10, 2),
FlatStyle = FlatStyle.Flat,
ForeColor = Theme.Text, BackColor = Theme.TabBack, Font = Theme.UiFont, ForeColor = Theme.Text, BackColor = Theme.TabBack, Font = Theme.UiFont,
Cursor = Cursors.Hand, Margin = new Padding(8, 0, 0, 0) Cursor = Cursors.Hand, Margin = new Padding(8, 0, 0, 0)
}; };
+9 -4
View File
@@ -52,7 +52,8 @@ public sealed class WorkspaceView : UserControl
BackColor = Theme.WorkspaceBack; BackColor = Theme.WorkspaceBack;
// 頂部工具列容器:左側為 Layout/Run 群組(Fill),右側為 Log AllDock Right // 頂部工具列容器:左側為 Layout/Run 群組(Fill),右側為 Log AllDock Right
var topBar = new Panel { Dock = DockStyle.Top, Height = 38, BackColor = Theme.RailBack }; // 高度 40 與左側 ConnectionSidebar 的 tab bar 對齊,且容得下 AutoSize 按鈕(不被裁切)
var topBar = new Panel { Dock = DockStyle.Top, Height = 40, BackColor = Theme.RailBack };
_toolbar = new FlowLayoutPanel _toolbar = new FlowLayoutPanel
{ {
@@ -374,7 +375,9 @@ public sealed class WorkspaceView : UserControl
{ {
var b = new Button var b = new Button
{ {
Text = label, AutoSize = false, Size = new Size(44, 26), FlatStyle = FlatStyle.Flat, Text = label, AutoSize = true, AutoSizeMode = AutoSizeMode.GrowAndShrink,
MinimumSize = new Size(40, 26), Padding = new Padding(8, 2, 8, 2),
FlatStyle = FlatStyle.Flat,
ForeColor = Theme.Text, BackColor = Theme.TabBack, Font = Theme.UiFont, ForeColor = Theme.Text, BackColor = Theme.TabBack, Font = Theme.UiFont,
Margin = new Padding(3, 0, 3, 0), Cursor = Cursors.Hand Margin = new Padding(3, 0, 3, 0), Cursor = Cursors.Hand
}; };
@@ -384,11 +387,13 @@ public sealed class WorkspaceView : UserControl
return b; return b;
} }
private static Button MakeActionButton(string text, int width, int leftMargin, EventHandler onClick) private static Button MakeActionButton(string text, int minWidth, int leftMargin, EventHandler onClick)
{ {
var b = new Button var b = new Button
{ {
Text = text, AutoSize = false, Size = new Size(width, 26), FlatStyle = FlatStyle.Flat, Text = text, AutoSize = true, AutoSizeMode = AutoSizeMode.GrowAndShrink,
MinimumSize = new Size(minWidth, 26), Padding = new Padding(10, 2, 10, 2),
FlatStyle = FlatStyle.Flat,
ForeColor = Theme.Text, BackColor = Theme.TabBack, Font = Theme.UiFont, ForeColor = Theme.Text, BackColor = Theme.TabBack, Font = Theme.UiFont,
Margin = new Padding(leftMargin, 0, 3, 0), Cursor = Cursors.Hand Margin = new Padding(leftMargin, 0, 3, 0), Cursor = Cursors.Hand
}; };
+3
View File
@@ -14,6 +14,9 @@
<Product>ETTerms</Product> <Product>ETTerms</Product>
<Company>ETTerms Project</Company> <Company>ETTerms Project</Company>
<!-- 高 DPIPerMonitorV2,讓不同縮放比例的螢幕都能正確縮放、避免文字/按鈕被裁切 -->
<ApplicationHighDpiMode>PerMonitorV2</ApplicationHighDpiMode>
<!-- 視窗 / 工作列 / exe 圖示 --> <!-- 視窗 / 工作列 / exe 圖示 -->
<ApplicationIcon>Assets\Choco_256x256.ico</ApplicationIcon> <ApplicationIcon>Assets\Choco_256x256.ico</ApplicationIcon>
</PropertyGroup> </PropertyGroup>