创建两个相互重叠的矩形,按比例调整大小

时间:2016-08-18 16:16:16

标签: wpf

编辑:我让我的示例屏幕抓住了更多的说明。他们与文字描述相冲突。

我是一个完整的WPF新手。

我希望有一个带有分界线的细长矩形,当我展开和收缩窗口时,它将调整大小。因为我需要在线的上方和下方不同地对矩形进行着色,我想这样做,一个矩形覆盖在另一个上面。

我可以得到一个矩形,从上到下填充xaml控件(称为tallRectangle)以使用窗口正确调整大小,但我无法弄清楚如何将该行为扩展到第二个矩形:

<Grid>
    <Rectangle x:Name="tallRectangle" Fill="#FFF4F4F5" HorizontalAlignment="Left" Margin="23,0,0,0" Stroke="Black" Width="56"/>
    <Rectangle x:Name="halfRectangle" Fill="#FF757576" HorizontalAlignment="Left" Margin="84,136,0,0" Stroke="Black" Width="53" StrokeThickness="0" Stretch="Fill" RenderTransformOrigin="0.5,0.5">
        <Rectangle.LayoutTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Rectangle.LayoutTransform>
        <Rectangle.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Rectangle.RenderTransform>
    </Rectangle>
</Grid>

我希望第二个,halfRectangle,是第一个的一半,但如果调整窗口大小,也要缩小和缩小。但我不知道如何做到这一点。

以下是它的开始:

enter image description here

当我缩小窗口时,第二个矩形的顶部保持静止:

enter image description here

我希望第二个矩形也能按比例调整大小,就像这个中的橙色轮廓:

enter image description here

这只是我最终想要拥有的第一步,但我希望一旦我理解了如何在第二个矩形中获得该行为,我就能够找出其余部分它

最终我需要将第二个矩形设置为第一个矩形的高度的百分比,并且还需要在变量处动态地向第一个矩形添加可变数量的散列标记。位置。似乎一旦我理解了如何调整第二个矩形的大小,我也能够找出散列标记。

编辑:一旦网格结构到位,如本问题的答案中所述,可以修改后面的代码以动态设置比率,例如:

    Dim realDepth = 8000
    Dim divideDepth = 2600

    Dim realScreenHeight = topRectangle.Height.Value + bottomRectangle.Height.Value
    Dim realHeightToScreenRatio = realScreenHeight / realDepth
    Dim divideScreenPoint = divideDepth * realHeightToScreenRatio

    topRectangle.Height = New GridLength(divideScreenPoint, GridUnitType.Star)
    bottomRectangle.Height = New GridLength(realScreenHeight - topRectangle.Height.Value, GridUnitType.Star)

魔术洒水是GridLength的第二个参数,以保持动态调整行高的大小。

1 个答案:

答案 0 :(得分:1)

如果您已经在使用网格,为什么不定义两个大小相等的行:

select  sum(setdata.setvolume) 
from setdata
Left Join setcalculations
      on setdata.dateoccurred = setcalculations.dateoccurred
having setdata.dateoccurred > (select max(setcalculations.dateoccurred) 
                              from setcalculations
                              where setcalculations.pr = '1')
group by setdata.dateoccurred
;  

如果您需要在运行时设置行高的比例,您只需为每行指定一个名称

select  sum(setdata.setvolume) 
from setdata
Left Join setcalculations
      on setdata.dateoccurred = setcalculations.dateoccurred
where setdata.dateoccurred > (select max(setcalculations.dateoccurred) 
                              from setcalculations
                              where setcalculations.pr = '1')

并改变他们的相对高度:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Rectangle Grid.RowSpan="2" Fill="#FFF4F4F5" Stroke="Black" Width="56"/>
    <Rectangle Grid.Row="1" Fill="#FF757576" Stroke="Black" Width="56"/>
</Grid>