WPF - 项目集合动态边距

我想呈现全宽边框内的几个元素，并以编程方式计算边距，以便在具有适当边距的网格中获取矩形。这将是我想要得到的渲染：WPF - 项目集合动态边距

enter image description here

的利润率应使用基于数据绑定值的算法来计算。为了解释这个想法，让我们假设我有一个包含“One”，“Two”和“Three”的字符串列表，这些字符串对我的控制有约束力。我们假设我的算法非常简单，并为每个下一个元素边距指定+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(); 
    } 
}

注：当我刚刚运行的应用程序不正确地呈现矩形。但是，当我调试并在多重绑定转换器中设置断点时，边距被应用和矩形正确呈现？！

我认为一般的方法应该工作，但我无法弄清楚我在渲染中会做出错误，导致矩形以错误的边距渲染，即使它们在转换器中正确计算。

感谢

来源

2013-04-15 Faris Zacina

我与@Clemens可能会误解您的问题。怎么样，你可以只显示一个你想要完成的事情的快速肮脏的模拟图片吗？我可能弄错了，但听起来你所追求的效果可能远远不如以前那么复杂。：/ –

有一个我试图完成的渲染图像。它看起来很简单。我只想在蓝色矩形元素上设置动态左边距而不是固定它们，就这些了。 –

不知道如果我理解正确你的问题，但如果你希望把所有这些矩形进同一网格单元，你将不得不设置的ItemsControl的ItemsPanel到网格：

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

同样你也可以使用一个Canvas作为ItemsPanel并在每个项目上矩形设置Canvas.Left属性（而不是Margin）。

来源

2013-04-15 20:30:09 Clemens

y ..我会尝试使用画布..我在我的解释中添加了一个示例，它应该有助于理解我想要完成的操作 –

Canvas方法奏效。边距得到适当渲染。但是，我仍不清楚为什么以前的方法不起作用。 –

WPF - 项目集合动态边距

回答

相关问题