首页 > 解决方案 > 如何在 UserControl 中创建大小一致的内部矩形?

问题描述

我正在尝试创建一个包含网格的 UserControl。网格内部是一个矩形,它覆盖除第一列和最后一列之外的所有列以及除第一行和最后一行之外的所有行。UserControl 将改变形状以适应其父对象,并且从 UserControl 的边缘到矩形的距离应始终保持一致。

我的第一次尝试,我在 ColumnDefinition 和 RowDefinition 中使用了百分比,但这仅在 UserControl 为方形时才能正常工作。否则,从矩形到 UserControl 边缘的距离在顶部/底部和侧面之间不一致。

我的第二次尝试,我尝试将网格的最后一列和第一行和最后一行的宽度绑定到第一列的 ActualWidth。这没有用。从矩形到 UserControl 边缘的距离都不相同。

我的第三次尝试,我突然想到我需要获取 UserControl 的 ActualHeight 和 ActualWidth 的比率,然后使用它来设置网格的第一列和最后一列的宽度以及第一行和最后一行的宽度网格。我在 Loaded 事件中尝试了这种计算,但没有奏效,并且在调整 UserControl 大小时它也不起作用。

我很茫然。有谁知道如何克服这个?

这是我要完成的工作的图像。

例子

蓝色区域是用户控件。他们的香草区是里面的矩形。我手动设置列宽和行高,让它看起来像我想要的。

标签: c#wpf

解决方案


听起来您想要一个带有边框的控件,其尺寸是控件的宽度/高度或屏幕的某个比例。

以下是UserControl我快速模拟的一个简单示例:

using System.Windows;
using System.Windows.Controls;

namespace WpfApp1
{
    public sealed class ConsistentBorderControl : UserControl
    {
        protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
        {
            base.OnRenderSizeChanged(sizeInfo);
            double dimension = sizeInfo.NewSize.Width * 0.1;
            Tag = new Thickness(dimension);
        }
    }
}

它与事件挂钩RenderSizeChanged,并将边框的尺寸计算为控件当前宽度的 10%。然后它使用它来创建一个制服Thickness并将其放入Tag属性中(您可能会更好地使用自定义依赖属性来保存此厚度值)。

然后在 XAML 中的 UserControl 中,我们可以简单地创建一个绑定到其父级属性的Border元素:BorderThicknessTag

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApp1">
    <local:ConsistentBorderControl x:Name="parent">
        <Border BorderBrush="Blue" BorderThickness="{Binding Tag, ElementName=parent}">
           <Grid ... >
        </Border>
    </local:ConsistentBorderControl>
</Window>

System.Windows.SystemParameters.WorkArea您还可以通过使用而不是控件的呈现大小来根据屏幕大小确定边框尺寸。(但是这仅适用于主屏幕,在 WPF 中访问多个监视器尺寸有点棘手)。


推荐阅读