WrapPanel als ItemPanel für Items

Question

Immer noch mit WPF herum täuscht und das Lernen, wie ich gehen. Der Versuch, jetzt eine dynamische bauen von Kontrollen Gruppierung (meist Buttons aber vielleicht Checkboxen und andere enthalten).

Ich hatte keine Ahnung, was der beste Weg war, dies zu tun, damit ich versuchte, einen Item Stil erstellen und dann die Einzelteile in einen Itemspresenter in einem WrapPanel hinzuzufügen. Bald werden die Artikel nicht realisiert wickeln würden, weil sie effektiv nicht in der WrapPanel waren, wenn ich es als ItemsHost setzen. Wie folgt aus:

<Style x:Key="ButtonPanelGroup" TargetType="{x:Type ItemsControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ItemsControl}">
                <Border CornerRadius="5"
                        BorderBrush="{StaticResource DarkColorBrush}"
                        BorderThickness="1"
                        Margin="5">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>

                        <WrapPanel IsItemsHost="True" FlowDirection="LeftToRight">
                            <ItemsPresenter />
                        </WrapPanel>

                        <ContentPresenter ContentSource="Name" Grid.Row="1" />

                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Beachten Sie, dass dies ein work in progress und es gibt viele Styling-Effekte, die ich brauche noch umzusetzen. Hier verwende ich es:

<UniformGrid Rows="1">
    <ItemsControl Name="Group1" Style="{StaticResource ButtonPanelGroup}">
        <Button>Button1</Button>
        <Button>Button2</Button>
        <CheckBox>TickBox</CheckBox>
    </ItemsControl>

    <ItemsControl Name="Group2" Style="{StaticResource ButtonPanelGroup}">
        <Button>Button3</Button>
        <Button>Button4</Button>
        <Button>Button5</Button>
    </ItemsControl>

    <ItemsControl Name="Group3" Style="{StaticResource ButtonPanelGroup}">
        <Button>Button6</Button>
        <Button>Button7</Button>
        <Button>Button8</Button>
    </ItemsControl>
</UniformGrid>

Auch hier beachten Sie, dass es immer noch ein work in progress ist als Uniform nicht den Weg wäre hier zu gehen und kann auch die Margen ein Schmerz (gibt es irgendwelche Ränder dass Überschneidungen?), So gibt Eingang geschätzt würde.

Nun zum eigentlichen Problem. Das funktioniert nicht, ich einen Fehler:

  

‚Itemspresenter‘ Objekt kann nicht auf ‚WrapPanel‘ hinzugefügt werden. Kann nicht   explizit ändern Kinder Sammlung von Platten verwendet als für Itemspanel   Item. Items erzeugt Kindelemente für Panel. Error   bei Objekt 'System.Windows.Controls.ItemsPresenter'.

Also, was der beste Weg ist, so etwas zu tun (würde gerne in der Lage sein, nur Tasten zu werfen und andere Steuerelemente in die ItemControl und die Line-up wirklich schön). Wäre es besser, die Kontrollen in eine Sammlung von irgendeiner Art zu setzen und iterate.

würde lieben, um es schön gemacht, aber meine WPF Fähigkeiten fehlen noch. Gibt es WPF Bücher, die lehren über die Grundlagen und zeigen, wie Profis es wirklich tun würde?

Answer 1

Sie können einen Blick auf die Itemspanel Eigenschaft:

  

Ruft die Vorlage, die das Panel, dass die Kontrollen der Anordnung der Elemente definiert.

Beispiel:

<ItemsControl>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

Und Sie können es in einem Stil wie folgt festgelegt:

<Style TargetType="ItemsControl">
    <Setter Property="ItemsPanel">
      <Setter.Value>
            <ItemsPanelTemplate>
                <WrapPanel />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 2

Vergessen Sie nicht, Definition von clue Eigenschaft IsItemsHost = "True". Andernfalls wird Ihr Item Ihre Einzelteile nicht an.

<ListBox ItemsSource="{Binding MyItemsSource}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate >
                <WrapPanel IsItemsHost="True"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ListBox>

Answer 3

Hier ist eine andere einfache Alternative Datagrid / Xceed Datagrid und WrapPanel Lösung zu verlangsamen. Könnte nützlich sein, wenn eine Menge von Daten oder ganzer Tabelle nur für die Bearbeitung ist. Mit Items + Grid.IsSharedSizeScope = "True"

Weitere Informationen hier: https://wpf.2000things.com/tag/issharedsizescope/ + Auf Items virutualization für Leistung: Virtualisieren eine Items

<Grid Grid.IsSharedSizeScope="True" Margin="0,30,0,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="50" Width="Auto" SharedSizeGroup="Id" />
            <ColumnDefinition MinWidth="50" Width="Auto" SharedSizeGroup="Time"  />
        </Grid.ColumnDefinitions>
        <Border Grid.Column="0" >
            <TextBlock VerticalAlignment="Center" TextWrapping="NoWrap" Text="Header1" />
        </Border>
        <Border Grid.Column="1" >
            <TextBlock VerticalAlignment="Center" TextWrapping="NoWrap" Text="Header2" />
        </Border>
    </Grid>

    <ItemsControl Grid.Row="1" ItemsSource="{Binding RunInstance.ConcentrationGradient.Steps}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition MinWidth="50" Width="Auto" SharedSizeGroup="Id" />
                        <ColumnDefinition MinWidth="50" Width="Auto" SharedSizeGroup="Time" />
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="0">
                        <TextBlock VerticalAlignment="Center" TextWrapping="NoWrap" Text="{Binding Index, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" />
                    </Border>
                     <Border Grid.Column="1">
                        <TextBlock VerticalAlignment="Center" TextWrapping="NoWrap" Text="{Binding Time, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" />
                    </Border>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>