条形图中矩形的自动比例转换

Question

我有条形图的UserControl：

<UserControl ... Name="uc">

    <Grid>
        <Canvas>
            <Canvas.Resources>
                <Style TargetType="Line">
                    <Setter Property="X1" Value="0"/>
                    <Setter Property="X2" Value="{Binding ActualWidth, ElementName=uc}"/>
                    <Setter Property="StrokeThickness" Value="1"/>
                </Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Canvas.Right" Value="0"/>
                </Style>
            </Canvas.Resources>

            <Line Y1="{Binding HighestPoint}" Y2="{Binding HighestPoint}" 
                  Canvas.Bottom="{Binding HighestPoint}"
                  Stroke="Red"/>
            <TextBlock Text="{Binding HighestPoint, StringFormat=N0}" 
                       Canvas.Bottom="{Binding HighestPoint}"/>

            <Line Y1="{Binding SecondPoint}" Y2="{Binding SecondPoint}" Stroke="Blue" 
                  Canvas.Bottom="{Binding SecondPoint}"/>
            <TextBlock Text="{Binding SecondPoint, StringFormat=N0}" 
                       Canvas.Bottom="{Binding SecondPoint}"/>

            <Line Y1="{Binding FirstPoint}" Y2="{Binding FirstPoint}" Stroke="Green" 
                  Canvas.Bottom="{Binding FirstPoint}"/>
            <TextBlock Text="{Binding FirstPoint, StringFormat=N0}" 
                       Canvas.Bottom="{Binding FirstPoint}"/>
        </Canvas>

        <ItemsControl ScrollViewer.CanContentScroll="True"
                      ItemsSource="{Binding RectCollection}"
                      Margin="0 0 20 0">

            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Rectangle Width="20" Height="{Binding}"
                               Margin="0 0 2 0" 
                               VerticalAlignment="Bottom"
                               Opacity=".5" Fill="Green"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>

            <ItemsControl.Template>
                <ControlTemplate>
                    <ScrollViewer
                     VerticalScrollBarVisibility="Hidden"
                     Background="{TemplateBinding Panel.Background}">
                        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </ScrollViewer>
                </ControlTemplate>
            </ItemsControl.Template>

            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>

    </Grid>
</UserControl>

在我的MainWindow上，我已经在Grid.Row中使用了它，它通常看起来像这样：

ICommand事件的SizeChanged中重新计算了这些行顶部的值。当我调整窗口大小时，它变成这样：

矩形的高度不会自动更改！我可以重新计算double中每个矩形的高度，即ICommand，以重新调整效率不高的BUT，对吧？有没有简单的方法可以一次转换所有这些矩形？

Answer 1

作为我对other question的回答的扩展，当值范围为0..1时，可以将ItemsControl的ActuaHeight用作比例因子。]

<ItemsControl ItemsSource="{Binding}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid Width="20" Margin="2">
                <Rectangle VerticalAlignment="Bottom"
                           Height="{Binding}" Fill="LightGray">
                    <Rectangle.LayoutTransform>
                        <ScaleTransform ScaleY="{Binding ActualHeight,
                            RelativeSource={RelativeSource AncestorType=ItemsControl}}"/>
                    </Rectangle.LayoutTransform>
                </Rectangle>
                <TextBlock Text="{Binding StringFormat={}{0:N2}}">
                    <TextBlock.LayoutTransform>
                        <RotateTransform Angle="-90"/>
                    </TextBlock.LayoutTransform>
                </TextBlock>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>