0

我想在全宽边框内渲染几个元素并以编程方式计算边距,因此我在网格中获得具有适当边距的矩形。这将是我想要得到的渲染:

在此处输入图像描述

应使用基于数据绑定值的算法计算边距。为了解释这个想法,假设我有一个包含“一”、“二”和“三”的字符串列表,我绑定到我的控件。假设我的算法非常简单,并且为每个下一个元素边距分配 +100。所以我会有三个矩形:

  • 元素“一”的矩形 - 边距:100
  • 元素“二”的矩形 - 边距:200
  • 元素“三”的矩形 - 边距:300

所有矩形都是相同的,唯一的区别是计算的边距。

我最初的想法是使用 ItemsControl 并使用 MultiBinding 来计算每个元素的边距。

但是,当我使用带有 MultiBinding 的 ItemsControl 来计算动态边距时,我无法正确渲染矩形。

 <ItemsControl>
                <ItemsControl.ItemsSource>
                    <x:Array Type="sys:String" 
        xmlns:sys="clr-namespace:System;assembly=mscorlib">
                        <sys:String>One</sys:String>
                        <sys:String>Two</sys:String>
                        <sys:String>Three</sys:String>
                    </x:Array>
                </ItemsControl.ItemsSource>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Rectangle Name="InnerRectangle" VerticalAlignment="Stretch" Fill="Blue" Width="2" Height="120">
                                <Rectangle.Margin>
                                    <MultiBinding Mode="OneWay" Converter="{StaticResource MultiMarginConverter}">
                                        <Binding Path="ActualWidth" RelativeSource="{RelativeSource AncestorType={x:Type Border}}"></Binding>
                                        <Binding Path=""></Binding>
                                    </MultiBinding>
                                </Rectangle.Margin>
                            </Rectangle>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

如果我运行它,边距在转换器中正确计算,但矩形呈现为堆叠在一起?

计算边距的算法将使用当前上下文中的多个值,因此我需要使用多个属性值,这就是我使用多重绑定的原因。

这里是转换器,只是为了尝试这个概念而获得一些动态边距:

 public class MultiBindingMarginConverter : IMultiValueConverter
{
    List<Double> margins = new List<Double>() { 110, 220, 333, 444, 555, 666, 777 };

    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        var randomizer = new Random();;

        // I just get a random margin to try the concept. The margin will be computed by a more complex algorithm
        var computedMargin = margins.ElementAt(randomizer.Next(1, 7));

        return new Thickness(computedMargin, 0, 0, 0);
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

注意:当我只是运行应用程序时,它不会正确呈现矩形。但是,当我在多绑定转换器中调试并设置断点时,会应用边距并且矩形呈现正确?!

我认为一般方法应该可行,但我无法弄清楚我在渲染中做错了什么会导致矩形以错误的边距渲染,即使它们在转换器中被正确计算。

谢谢

4

1 回答 1

1

不确定我是否正确理解了您的问题,但如果您想将所有这些矩形放入同一个网格单元格中,则必须将 ItemsControl 的ItemsPanel设置为网格:

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <Grid/>
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

同样,您也可以使用 Canvas 作为 ItemsPanel 并在每个项目 Rectangle 上设置Canvas.Left属性(而不是)。Margin

于 2013-04-15T20:30:09.530 回答