WrapPanel comme ItemPanel pour ItemsControl

Question

trompant toujours autour de WPF et de l'apprentissage que je vais. Essayer maintenant de construire une dynamique de regroupement des contrôles (la plupart des boutons, mais peuvent inclure CheckBoxes et d'autres).

Je ne savais pas quelle était la meilleure façon de le faire donc j'essayé de créer un style ItemsControl puis ajoutez les éléments dans un ItemsPresenter dans un WrapPanel. Bientôt réalisé les articles ne seraient pas envelopper parce qu'ils étaient effectivement pas à l'intérieur du WrapPanel à moins que je mets comme ItemsHost. Comme ceci:

<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>

Notez que ceci est un travail en cours et il y a beaucoup d'effets de style je encore besoin de mettre en œuvre. Ici, je l'utilise:

<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>

Notez également ici qu'il est encore un travail en cours que UniformGrid ne serait pas le moyen d'aller ici et aussi des marges peut être une douleur (ce qu'il ya des marges qui se chevauchent?) Afin d'entrée, il serait apprécié.

Maintenant au problème réel. Cela ne fonctionne pas, je reçois une erreur:

  

objet « ItemsPresenter » ne peut pas être ajouté à « WrapPanel ». Ne peux pas   modifier explicitement la collection Enfants de Panel utilisé comme ItemsPanel pour   ItemsControl. ItemsControl génère des éléments enfants pour Panel. Erreur   à l'objet 'System.Windows.Controls.ItemsPresenter'.

Alors, quelle est la meilleure façon de faire quelque chose comme ça (je serais ravi de pouvoir simplement jeter les boutons et autres contrôles dans le ItemControl et la ligne en belle réelle). Serait-il préférable de mettre les contrôles dans une collection de quelque sorte et itérer.

AIMERAIT pour l'obtenir bien fait, mais mes compétences en WPF font encore défaut. Y a-t-il des livres WPF qui enseignent au-delà des notions de base et de montrer comment ce pro serait vraiment le faire?

Answer 1

Vous pouvez jeter un oeil à la page ItemsPanel propriété:

  

Obtient ou définit le modèle qui définit le panneau qui commande la disposition des éléments.

Exemple:

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

Et vous pouvez le configurer dans un style comme suit:

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

Answer 2

Ne pas oublier la définition de la propriété d'indice IsItemsHost = « true ». Sinon, votre ItemsControl ne sera pas montrer vos articles.

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

Answer 3

Voici une autre alternative simple à ralentir DataGrid / Xceed DataGrid et solution WrapPanel. Peut-être utile lorsqu'un grand nombre de données ou table entière est juste pour l'édition. En utilisant ItemsControl + Grid.IsSharedSizeScope = "true"

Plus d'infos ici: https://wpf.2000things.com/tag/issharedsizescope/ + Le ItemsControl virutualization pour la performance: Virtualisation un ItemsControl

<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>