N-Rechtecke auf die Leinwand mit MVVM in WPF

Möchte ich hinzufügen, dass eine Reihe von Rechtecken um das Hauptfenster von meiner mvvm-Anwendung. In meinem viewModel habe ich eine Sammlung von Objekten, die ich konvertieren System.Windows.Formen.Rechteck-Klassen mit a-Wandler (code unten):

ViewModel:

RecognizedValueViewModel 
{
    public ObservableCollection<BarcodeElement> BarcodeElements
    {
        get { return _BarcodeElements; }
        set { _BarcodeElements = value; }
    }

    public RecognizedValueViewModel()
    {
        BarcodeElements = InitializeBarcodeElements();
    }
}

Konverter:

public BarcodeElementToRectangleConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        Rectangle barcodeRectangle = GetRectangleFromBarcodeElement(value as BarcodeElement);

        return barcodeRectangle;
    }
}

Die Rechtecke angezeigt werden soll, in eine Leinwand in meinem MainWindow:

<Canvas x:Name="Canvas_Image_Main">
    <!-- Show rectangles here -->
</Canvas>

Möchte ich hinzufügen, Rechtecke auf die Leinwand, die im code aber ich weiß nicht, wie viele Rechtecke sind es bei der Laufzeit. Gibt es eine Möglichkeit, wie ich diese erreichen können? Tank Sie.

InformationsquelleAutor Philipp Eger | 2014-03-11

  1. 50

    In einem richtigen MVVM-Ansatz haben Sie ein view-Modell mit einer abstrakten Darstellung einer Liste von Rechtecken, zB wie diese:

    public class RectItem
{
    public double X { get; set; }
    public double Y { get; set; }
    public double Width { get; set; }
    public double Height { get; set; }
}

public class ViewModel
{
    public ObservableCollection<RectItem> RectItems { get; set; }
}

    Dann würden Sie haben eine Ansicht, die verwendet ein ItemsControl zu visualisieren, eine Sammlung von solchen Rect Elemente. ItemsControl würde eine Leinwand als seine ItemsPanel und eine entsprechende ItemContainerStyle und ItemTemplate die jede Bindung an die entsprechende view-model-Eigenschaften. Es könnte wie folgt Aussehen:

    <ItemsControl ItemsSource="{Binding RectItems}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left" Value="{Binding X}"/>
            <Setter Property="Canvas.Top" Value="{Binding Y}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Rectangle Width="{Binding Width}" Height="{Binding Height}" Fill="Black"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

    Alternative ohne Bindungen in Style-Settern (die nicht in UWP) könnte wie folgt Aussehen:

    <ItemsControl ItemsSource="{Binding RectItems}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Rectangle Width="{Binding Width}" Height="{Binding Height}" Fill="Black">
                <Rectangle.RenderTransform>
                    <TranslateTransform X="{Binding X}" Y="{Binding Y}"/>
                </Rectangle.RenderTransform>
            </Rectangle>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>
    Danke, der Hinweis mit dem ItemsControl hat mir sehr geholfen.
    Ich kann nicht scheinen, um diese arbeiten, die in der UWP, irgendwelche Ideen auf, wie dies zu tun? Da kann man nicht bnd, die Set-Eigenschaften mehr.
    Siehe hier: stackoverflow.com/q/40069749. Zwar gekennzeichnet als Duplikate, würde ich empfehlen, die RenderTransform-Ansatz aus der Antwort.

    InformationsquelleAutor Clemens

  2. 5

    Können Sie binden die Sammlung von Rechtecken, um ein ItemControl und Ihre Höhe, Breite und margin:

    <ItemsControl  ItemsSource="{Binding Path=RectangleCollection,Mode=TwoWay}">
    <ItemsControl.ItemTemplate>
        <DataTemplate >
            <Canvas>
                <Rectangle Stroke="Black" Heigth={some converter} Width={some converter} Margin={Some Converter}>
            </Canvas>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemControl>

    Nur eine Idee, um Ihnen den Einstieg...

    InformationsquelleAutor Abhinav Sharma

Schreibe einen Kommentar