0

全幅の境界内にいくつかの要素をレンダリングし、プログラムで余白を計算して、適切な余白を持つグリッド内の四角形を取得したい。これは私が取得したいレンダリングになります:

ここに画像の説明を入力

マージンは、データ バインドされた値に基づくアルゴリズムを使用して計算する必要があります。アイデアを説明するために、「One」、「Two」、「Three」を含む文字列のリストがあり、自分のコントロールにバインドしていると仮定しましょう。私のアルゴリズムが非常に単純で、次の各要素マージンに +100 を割り当てると仮定しましょう。したがって、3つの長方形があります。

  • 要素「One」の長方形 - マージン: 100
  • 要素「Two」の長方形 - マージン: 200
  • 要素「Three」の長方形 - マージン: 300

すべての長方形は同じです。唯一の違いは、計算されたマージンです。

私の最初のアイデアは、ItemsControl を使用し、MultiBinding を使用して各要素のマージンを計算することでした。

ただし、MultiBinding で ItemsControl を使用して Dynamic Margin を計算すると、四角形を適切にレンダリングできません。

 <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

あなたの質問を正しく理解したかどうかはわかりませんが、これらすべての Rectangles を同じGrid セルに入れたい場合は、ItemsControl のItemsPanelを Gridに設定する必要があります。

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

同様に、Canvas を ItemsPanel として使用し、各項目 Rectangle にCanvas.Left( の代わりに) プロパティを設定することもできます。Margin

于 2013-04-15T20:30:09.530 に答える