Listbox Datatemplate WrapPanel HorizontalAlignment="Center"

Hallo mal wieder

Folgendes: Habe eine Listbox mit einem Datatemplate der eigentlich nur ein Button ist.

Die Buttons sollen nun nebeneinander dargestellt werden. Und zwar mittig des gesamten Fensters. Die Buttons sollen wie in einem WrapPanel umgebrochen werden.

Mein bisheriger Code:

<ListBox HorizontalAlignment="Center"
                 Background="Transparent"
                 BorderThickness="0"
                 DockPanel.Dock="Bottom"
                 Foreground="Transparent"
                 ItemContainerStyle="{StaticResource itemContainerStation}"
                 ItemsSource="{Binding Components}"
                 SelectedItem="{Binding ActiveStation}">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel  Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"  />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Views:StationDetailView />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

So wird gar nichts dargestellt.

Nehme ich das: HorizontalAlignment="Center" aus dem Code. Wird die Listbox zwar dargestellt, aber leider nicht mittig.

Was mache ich falsch?

Dravere

Wozu dieses komplizierte Binding beim WrapPanel ?

Und es ist schwer zu sagen, was du falsch machst, da HorizontalAlignment stark davon abhängig ist, was und wie das Parent definiert wurde. Also was liegt ausserhalb der ListBox ?

Kannst du ein sehr simples Beispiel erstellen, welches dieses Problem reproduziert?

Wenn ich raten müsste, würde ich HorizontalAlignment der ListBox auf Strecht setzen und statt des Width -Bindings im WrapPanel dort das HorizontalAlignment auf Center setzen:

<Grid>
  <ListBox HorizontalAlignment="Stretch">
    <ListBox.ItemTemplate>
      <DataTemplate>
        <Button Margin="5" Content="{Binding}" />
      </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
        <WrapPanel HorizontalAlignment="Center" />
      </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <System:String>Test 1</System:String>
    <System:String>Test 2</System:String>
    <System:String>Test 3</System:String>
  </ListBox>
</Grid>

Grüssli

Wozu dieses komplizierte Binding beim WrapPanel

Da ohne das komplizierte Binding das Wrappanel nicht funktioniert. Wenn ich das Hauptfenster kleiner mache werden die Buttons nicht umgebrochen sondern eine Scrollbar eingeblendet.

Aussenrum liegt ein Dockpanel. Dachte das erkennt man am DockPanel.Dock="Bottom".

Wenn ich raten müsste, würde ich HorizontalAlignment der ListBox auf Strecht setzen und statt des Width-Bindings im WrapPanel dort das HorizontalAlignment auf Center setzen:

Das war auch meine erste Vermutung. Das hat allerdings nicht funktioniert.

Dravere

Parker schrieb:

Aussenrum liegt ein Dockpanel. Dachte das erkennt man am DockPanel.Dock="Bottom".

1. Dieses Attribute sieht man fast nicht unter all den anderen.

Parker schrieb:

Das war auch meine erste Vermutung. Das hat allerdings nicht funktioniert.

2. Funktioniert bei mir mein gezeigter Code problemlos.

Daher liegt das Problem wohl daran, dass du uns nicht genügend Informationen gibst. Wie ich schon weiter oben gesagt habe:

Dravere schrieb:

Kannst du ein sehr simples Beispiel erstellen, welches dieses Problem reproduziert?

Sowas kann auch dir selber helfen, dass Problem zu finden. Ich persönlich habe immer ein TestProjekt rumliegen, worin ich verschiedene Dinge teste. Meistens habe ich sogar mehrere davon.

Grüssli

Daher liegt das Problem wohl daran, dass du uns nicht genügend Informationen gibst. Wie ich schon weiter oben gesagt habe:

Also ich bin von deinem Beispiel ausgegangen.
Also bei mir funktioniert dein Beispiel nicht!

Habe nun ein ganz neues Projekt gestartet und deinen Code ins MainWindow reingestellt.

Mag sein dass die Buttons nun mittig sind. Aber sie werden beim kleiner machen des Fensters nicht umgebrochen. So wie ich das von einem Wrappanel erwarte. Bei dir etwa?

Erst wenn ich das, wie du es bezeichnest "komplizierte Binding" einfüge werden die Buttons wie gewünscht umgebrochen. Dafür sind die Buttons nicht mehr mittig.

Dravere

Achso, dann so:

<ListBox HorizontalAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <Button Margin="5" Content="{Binding}" />
    </DataTemplate>
  </ListBox.ItemTemplate>
  <ListBox.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel HorizontalAlignment="Center" />
    </ItemsPanelTemplate>
  </ListBox.ItemsPanel>
  <System:String>Test 1</System:String>
  <System:String>Test 2</System:String>
  <System:String>Test 3</System:String>
  <System:String>Test 4</System:String>
  <System:String>Test 5</System:String>
  <System:String>Test 6</System:String>
</ListBox>

Problem ist, dass der ScrollViewer der ListBox unendlich viel Platz für die Weite zulässt. Mit dem Attached Property auf der ListBox schalten wird das ab. Der ScrollViewer wird diesen Wert durch Wertvererbung der DependencyProperty erhalten.

Grüssli

Dank dir. Darauf muss man auch erst mal kommen.

Listbox Datatemplate WrapPanel HorizontalAlignment=&quot;Center&quot;

Listbox Datatemplate WrapPanel HorizontalAlignment="Center"