Silverlight 3: ListBox Datatemplate Horizontal

Question

Ich habe eine ListBox mit ihm ItemTemplate zu einem Datatemplate gebunden. Mein Problem ist, ich nicht die Elemente in der Vorlage erhalten kann auf die volle Breite der List-Box zu strecken.

<ListBox x:Name="listPeople" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
    Margin="0,0,0,0" Background="{x:Null}" SelectionMode="Extended" Grid.Row="1" 
    ItemTemplate="{StaticResource PersonViewModel.BrowserDataTemplate}" 
    ItemsSource="{Binding Mode=OneWay, Path=SearchResults}" >
</ListBox>

<DataTemplate x:Key="PersonViewModel.BrowserDataTemplate">
   <ListBoxItem HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
     <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5,5,5,5">
       <Border Opacity=".1" x:Name="itemBorder"  Background="#FF000000"   
         HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
         CornerRadius="5,5,5,5" MinWidth="100" Height="50"/>
      </Grid>
   </ListBoxItem>
</DataTemplate>

Wie Sie sehen können, habe ich eine Grenze innerhalb des Gitters hinzugefügt, um die Breite der Vorlage anzuzeigen. Mein Ziel ist es diese Grenze zu erweitern, um die volle Breite des listbox zu sehen. Zur Zeit seine Breite wird durch seinen Inhalt oder MinWidth bestimmt, die das einzige, was im Moment ist es zu halten sichtbar überhaupt.

Answer 1

Wenn für ListBox Datenvorlagen erstellen, sollten Sie nicht incldue <ListBoxItem>. Der Inhalt des Datatemplate wird innerhalb eines erzeugten Behälters platziert werden. Sie können steuern, wie die Behälter ItemContainerStyle aufgebaut werden.

Der Standard-Steuer Stil für ListBoxItem wird verwendet, um die ItemContainerStyle standardmäßig zu definieren. Dieser Stil setzt die ListBoxItem.HorizontalContentAlignment Eigenschaft auf ‚Links‘. Beachten Sie, wie der Content bindet seine Horizontal diese Eigenschaft.

Sie müssen den Stil des ListBoxItem Container außer Kraft zu setzen, die erzeugt wird, wenn Sie auf Ihre List-Box binden. Dies kann durch Einstellung des ItemContainerStyle erfolgen. Stellen Sie die Eigenschaft Horizontalcontentalignment zu sein „Stretch“.

Im Folgenden ist der Standard ListBoxItem Stil. Eingeschlossen Referenz.

<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
            <Setter Property="Padding" Value="3"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="TabNavigation" Value="Local"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid Background="{TemplateBinding Background}">
                            <!-- VSM excluded for readability -->
                            <Rectangle x:Name="fillColor" Fill="#FFBADDE9" RadiusX="1" RadiusY="1" IsHitTestVisible="False" Opacity="0"/>
                            <Rectangle x:Name="fillColor2" Fill="#FFBADDE9" RadiusX="1" RadiusY="1" IsHitTestVisible="False" Opacity="0"/>
                            <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                            <Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="1" RadiusY="1" Visibility="Collapsed"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Answer 2

verbrachte ich eine Stunde versucht, diese zu lösen. Sehr sehr frustrasting. Sie nicht haben den gesamten Standardstil für die ListBoxItem außer Kraft zu setzen. Ich konnte nicht bekommen dies funktioniert. Am Ende beschloss ich, das Problem durch einfaches Überschreiben Sie einfach die Horizontalcontentalignment Eigenschaft in meinem ListBox.ItemContainerStyle z:

            <ListBox x:Name="ClassList" ItemsSource="{Binding LineClasses}"
                     ScrollViewer.VerticalScrollBarVisibility="Visible"
                     SelectionMode="Extended"
                     ScrollViewer.HorizontalScrollBarVisibility="Hidden" HorizontalContentAlignment="Stretch"
                     HorizontalAlignment="Stretch" Loaded="ClassList_Loaded"
                     VerticalAlignment="Stretch" Grid.Row="0">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                    </Style>
                </ListBox.ItemContainerStyle>
                    <ListBox.ItemTemplate>

                    <DataTemplate>
                        <Border BorderBrush="Black" CornerRadius="3" Background="#FFE88D34"
                            BorderThickness="1" HorizontalAlignment="Stretch" >
                            <Grid Background="Transparent" HorizontalAlignment="Stretch" >
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <TextBlock 
                                    Grid.Column="0" HorizontalAlignment="Stretch"
                                    Margin="2"                                   
                                    FontSize="10"
                                    Text="{Binding DisplayClassNm}"/>
                            </Grid>

                        </Border>
                    </DataTemplate>
                </ListBox.ItemTemplate>

Das funktionierte eine Festlichkeit für mich.

Myles

Answer 3

Hier ist ein Beispiel die Steuerungsschablonen und Datenvorlagen für die List-Box-Steuerung. Beachten Sie die XAML-Markup, der die Grenze für die Listbox Artikel streaches.

Answer 4

Meine ListBoxItem enthielten eine CheckBox und die oben genannten Lösungen nicht für mich arbeiten (wahrscheinlich aufgrund der Art eines CheckBox, nicht die Lösungen) konnte ich diese Funktionalität zwingen, indem sie nicht auf die „Inhalt“ Eigenschaft der Bindung Checkbox, sondern explizit definiert, die XAML inline:

<CheckBox HorizontalAlignment="Stretch" IsChecked="{Binding Path=IsSelected, Mode=TwoWay}">
    <TextBlock
        MinWidth="130"
        Margin="0,-2,0,0"
        HorizontalAlignment="Stretch"
        Text="{Binding Path=DisplayText}" />
</CheckBox>

Die Marge wird benötigt, weil der TextBox Text nicht mit der CheckBox der Häkchen hat auszurichten. Die MinWidth war auch notwendig.

Answer 5

ich mit Silverlight 5 mit VS arbeitete 2012. Ich habe das gleiche Problem. Ich habe horizontal listbox mit meinen eigenen benutzerdefinierten Objekten als Itemssource. Ich möchte Listbox Elemente zu erweitern. Aber sie bauen nicht. Ich donot will für jedes Listbox-Element jede hart codierte Breite geben. Ich habe versucht, alle Antworten hier, aber nichts funktioniert. Ich habe nur Itemssource = {Binding Personen} DisplayMemberPath = „Vorname“. Das ist alles

Answer 6

Zwei Dinge, die ich hier bemerkt, weil ich das gleiche Problem hatte und war nicht in der Lage es die Art und Weise zu lösen Sie versuchen.

Als erstes müssen Sie nicht explizit eine ListBoxItem in Ihrem Datatemplate setzen. Dies wird automatisch für Sie erstellt, so dass Sie tatsächlich in dem einen Ihren ListBoxItem haben, die für Sie erstellt wurde. Ich habe dies aus in Snoop zu bestätigen.

Zweitens, und ich weiß nicht genau, warum, aber ich war Attribut das Dehnungsverhalten, um aus der Ausrichtung entweder nicht in der Lage. Ich änderte es Relative Bindung an die Breite Attribut an die Actual Eigenschaft des enthaltenden ListBoxItem zu verwenden. Das funktionierte für mich.

Width="{Binding RelativeSource={RelativeSource 
   AncestorType={x:Type ListBoxItem}}, Path=ActualWidth}"

Wenn Sie Stileigenschaften festlegen müssen auf dem ListBoxItem, die implizit für Sie erstellt wird, verwenden Sie ein Style-Element innerhalb des ListBox.ItemContainerStyle Element.

Hope, das hilft ...