如何在没有视图框的情况下以保持纵横比和位置缩放控件？

Question

我正在尝试在显示设置中复制显示重新排列器UI，其中有按钮放置到他们的物理位置，可以用鼠标拖动重新排列

我可以从屏幕获取屏幕边界class

System.Windows.Forms.Screen

并在 canvas 中创建具有指定边界的按钮，但它们太大（即 1366 x 768）无法显示在容器中，因此我决定使用 WPF 的内置 ViewBox 控件

viewbox 的问题在于它不仅缩放边界而且缩放呈现的元素

我无法控制 BorderThickness、FontSize 和 Margin，它们变得非常canvas 大小更改时可忽略不计或太大。

我需要的是只缩放大小，而不是全部。我希望 borderthickness 具有固定大小，而不是按比例缩放。在设置中，按钮的 BorderThickness 即使在调整大小后也保持不变。无论我尝试什么，我都会得到这个 >

这里Button的大小是1366 x 768，borderthickness是1px（看不清楚，我得设置4px才能看清楚），字体大小是240px。

此按钮位于 canvas 中，其大小由程序确定，canvas 位于边框中的视图框中。我应该怎么做才能缩小尺寸？

Answer 1

终于实现了，去掉了viewbox，通过代码实现了

代码：

    Private Sub LoadScreens()
        Dim ox As Integer = 0
        Dim oy As Integer = 0
        Dim canvaswidth As Integer = 0
        Dim canvasheight As Integer = 0
        Dim rect As New List(Of System.Drawing.Rectangle)
        For i = 0 To Forms.Screen.AllScreens.Count - 1
            Dim screen = Forms.Screen.AllScreens(i)
            Dim r = screen.Bounds
            rect.Add(r)
        Next
        For Each r In rect
            If r.X < ox Then ox = r.X
            If r.Y < oy Then oy = r.Y
        Next
        For Each r In rect
            If r.X + r.Width + Math.Abs(ox) > canvaswidth Then canvaswidth = r.X + r.Width + Math.Abs(ox)
            If r.Y + r.Height + Math.Abs(oy) > canvasheight Then canvasheight = r.Y + r.Height + Math.Abs(oy)
        Next

        ScreenCanvas.Children.Clear()

        Dim scale = GetScale(TParent.ActualWidth, TParent.ActualHeight, canvaswidth, canvasheight)

        ScreenCanvas.Width = canvaswidth * scale
        ScreenCanvas.Height = canvasheight * scale

        For i = 0 To rect.Count - 1
            Dim r = rect(i)
            Dim left = (r.X - ox) * scale
            Dim top = (r.Y - oy) * scale
            Dim nr As New Primitives.ToggleButton With {
                .Width = r.Width * scale,
                .Height = r.Height * scale,
                .Content = New TextBlock() With {.Text = i + 1, .VerticalAlignment = VerticalAlignment.Center, .HorizontalAlignment = HorizontalAlignment.Center}
            }
            ScreenCanvas.Children.Add(nr)
            Canvas.SetLeft(nr, left)
            Canvas.SetTop(nr, top)
        Next
    End Sub

    Private Function GetScale(w1 As Double, h1 As Double, w2 As Double, h2 As Double) As Double
        Dim scaleHeight = h1 / h2
        Dim scaleWidth = w1 / w2
        Dim scale = Math.Min(scaleHeight, scaleWidth)
        Return scale
    End Function

切换按钮以编程方式创建、缩放、定位并添加到缩放的 canvas 中：ScreenCanvas 托管在网格 TParent.

XAML :

          <Border CornerRadius="10" Margin="40" Padding="40" Background="#22aaaaaa">
            <Grid x:Name="TParent" Height="150" >
                <Grid.Resources>
                    <Style TargetType="{x:Type ToggleButton}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ToggleButton}">
                                    <Border Background="White" BorderBrush="Red" BorderThickness="2">
                                        <ContentPresenter TextBlock.Foreground="Black"/>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Grid.Resources>
                <Canvas x:Name="ScreenCanvas" HorizontalAlignment="Center"  VerticalAlignment="Bottom"/>
            </Grid>
        </Border>

这是最终结果：

现在我可以控制 borderthickness、cornerradius、margin :)

编辑：

我更新了 UI 并添加了代码以在网格大小更改时更新它们的位置和大小。

代码：

     Private Sub TParent_SizeChanged(sender As Object, e As SizeChangedEventArgs) Handles TParent.SizeChanged
        If e.WidthChanged AndAlso _init Then
            Dim canvaswidth = ScreenCanvas.ActualWidth
            Dim canvasheight = ScreenCanvas.ActualHeight
            Dim scale = GetScale(TParent.ActualWidth, TParent.ActualHeight, canvaswidth, canvasheight)
            ScreenCanvas.Width = canvaswidth * scale
            ScreenCanvas.Height = canvasheight * scale
            For Each c As FrameworkElement In ScreenCanvas.Children
                c.Width = c.ActualWidth * scale
                c.Height = c.ActualHeight * scale
                Dim top = Canvas.GetTop(c) * scale
                Dim left = Canvas.GetLeft(c) * scale
                Canvas.SetTop(c, top)
                Canvas.SetLeft(c, left)
            Next
        End If
    End Sub

UI :

如何在没有视图框的情况下以保持纵横比和位置缩放控件？

How to scale controls with maintained aspect ratio and position without viewbox?

.net

wpf

canvas

scale

viewbox