将边框的大小绑定到画布大小 [英] Bind a border's size to canvas size

问题描述

我希望能够在画布周围设置可调整大小的边框，并且我认为将子尺寸链接在一起的唯一方法是通过绑定.
我有:

Hi, I want to be able put a border around a canvas that can be resizable and the only way I can think to link the child sizes together is through binding.
I have:

<Canvas Name="thumbCanvas" Width="100" Height="40" >
      <Border x:Name="myBorder" BorderBrush="Black" BorderThickness="1" 

              Width="{Binding ElementName=thumbCanvas, Path=ActualWidth}"

              Height="{Binding ElementName=thumbCanvas, Path=ActualHeight}" 

              CornerRadius="8,8,8,8" />
      <Rectangle x:Name="tplRect" Width="{Binding ElementName=thumbCanvas, Path=Width}" 

                 Height="{Binding ElementName=thumbCanvas, Path=Height}"

                 Fill="LightCyan" RadiusX="8" RadiusY="8" />
      <TextBox x:Name="tplTextBox" TextWrapping="Wrap" Text="Component"  

               Background="LightCyan" HorizontalAlignment="Center" Margin="17,10" 

               BorderThickness="0"/>
</Canvas>

但我看不到画布后面的边框.我还尝试过声明画布外部的边框，并将画布大小绑定到该边框，但是它也不起作用.

[修改:只是将代码向下移动一点，以便它可以填满屏幕并固定制表符]

but I can''t see the border behind the canvas. I''ve also tried declaring the border outside of the canvas and binding the canvas size to that but it doesn''t work either.

[Modified: just moved the code down a bit so it could fill the screen and fixed the tabbing]

推荐答案

尝试

Try

{Binding RelativeSource{RelativeSource=TemplatedParent}, Path=(property name goes here)

代替

instead of

{Binding ElementName=thumbCanvas, Path=ActualWidth}

好吧，仅凭绘图顺序就会出现问题.

我看到的唯一问题是您的矩形在边框下方，这意味着它将在边框上方绘制.而且由于尺寸相同，因此会遮盖边框.

只需将边框移到矩形下方.

否则，你应该没事.

复制您的代码并按照我说的为我工作.

仅供参考，您可以做的另一件事是挂接您可以调整大小的SizeChanged事件.但是Binding Element似乎工作得很好.

当您想缩放父项目中的所有项目时，挂起SizeChanged事件可能会很有用.例如，如果您想要一个盒子来填充95％的画布.在这种情况下，您可以在设计器中单击画布控件.然后，在属性窗口中，单击事件"选项卡.

进入事件后，向下滚动至SizeChanged，然后在其右侧的空白框中双击.这将带您进入代码页.

在代码页中，您可以执行以下两种方法，但一种方法如下:

Well, you''re going to have problems because of drawing order alone.

The only problem that I see is that you have the Rectangle below the Border, which means that it will be drawn over the Border. And since it has the same size, it will obscure the Border.

Just move the Border below the Rectangle.

Otherwise, you should be fine.

Copying your code and doing what I said worked for me.

And FYI, the other thing you could do would be to hook the SizeChanged Event of whatever you could be resizing. But the Binding Element seems to work pretty well.

Hooking the SizeChanged event can be useful when you''re wanting to scale all of the items in a parent item. For instance, if you wanted a box to fill 95% of the canvas. In that case, you can click on your canvas control in the designer. Then, in the properties window, click the Events Tab.

Once inside Events, scroll down to SizeChanged and in the empty box to the right of it, double-click. This will take you to the code page.

In the code page, you can do it a couple of ways, but one way would be something like this:

private void thumbCanvas_SizeChanged(object sender, SizeChangedEventArgs e)
{
    myBorder.Height = e.NewSize.Height * 0.95;
    myBorder.Width = e.NewSize.Width * 0.95;
}

这篇关于将边框的大小绑定到画布大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！