silverlight - Silverlight 3: ListBox DataTemplate Horizo​​ntalAlignment

Question

DataTemplate にバインドされた ItemTemplate を持つ ListBox があります。私の問題は、テンプレート内の要素を ListBox の全幅に広げることができないことです。

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

ご覧のとおり、テンプレートの幅を示すために、グリッド内に境界線を追加しました。私の目標は、この境界線がリストボックスの全幅に拡大されるのを見ることです。現在、その幅はコンテンツまたは MinWidth によって決定されます。

Answer 1

これを解決するのに1時間費やしました。非常にイライラします。ListBoxItem の既定のスタイル全体をオーバーライドする必要はありません。これを機能させることができませんでした。最後に、 ListBox.ItemContainerStyleセクションの Horizo ​​ntalContentAlignmentプロパティだけをオーバーライドするだけで問題を解決しました。

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

これは私にとってはうまくいきました。

マイルズ

Answer 2

ListBox のデータ テンプレートを作成するときは、 を含めないでください<ListBoxItem>。DataTemplate のコンテンツは、生成されたコンテナー内に配置されます。ItemContainerStyle を使用して、コンテナの構築方法を制御できます。

ListBoxItem のデフォルト コントロール スタイルは、デフォルトで ItemContainerStyle を定義するために使用されます。このスタイルは、ListBoxItem.Horizo​​ntalContentAlignment プロパティを「Left」に設定します。ContentPresenter がその Horizo​​ntalAlignment をこのプロパティにバインドする方法に注意してください。

ListBox にバインドするときに生成される ListBoxItem コンテナーのスタイルをオーバーライドする必要があります。これは、ItemContainerStyle を設定することで実行できます。Horizo​​ntalContentAlignment プロパティを「Stretch」に設定します。

以下は、デフォルトの ListBoxItem スタイルです。参考までに掲載。

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

リストボックス コントロールのコントロール テンプレートとデータ テンプレートの使用例を次に示します。リストボックス項目の境界線を伸ばす XAML マークアップを参照してください。

Answer 4

VS2012でSilverlight5を使用しています。同じ問題が発生します。独自のカスタムオブジェクトをItemsSourceとして持つ水平リストボックスがあります。リストボックスアイテムを拡張したい。しかし、彼らは拡大していません。すべてのリストボックスアイテムにハードコードされた幅を指定したくありません。ここですべての答えを試しましたが、何も機能しません。ItemsSource = {Binding Persons} DisplayMemberPath="FirstName"を指定しました。それで全部です

Answer 5

私の ListBoxItem には CheckBox が含まれており、上記の解決策は機能しませんでした (おそらく、これらの解決策ではなく、CheckBox の性質によるものです)。チェックボックスの「Content」プロパティにバインドしないことで、この機能を強制することができましたが、 XAML インラインを明示的に定義します。

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

TextBox のテキストが CheckBox のチェックマークと一致しなかったため、余白が必要です。MinWidth も必要でした。

Answer 6

同じ問題があり、あなたが試みている方法で解決できなかったため、ここで気づいたことが 2 つあります。

まず、DataTemplate に ListBoxItem を明示的に配置する必要はありません。これは自動的に作成されるため、実際には作成された ListBoxItem の中に ListBoxItem があります。これを確認するためにSnoopで調べました。

2 つ目は、正確な理由はわかりませんが、配置属性から伸縮動作を取得できませんでした。これを変更して、含まれている ListBoxItem の ActualWidth プロパティへの Width 属性で RelativeSource バインディングを使用するようにしました。これは私にとってはうまくいきました。

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

暗黙的に作成された ListBoxItem にスタイル プロパティを設定する必要がある場合は、ListBox.ItemContainerStyle 要素内で Style 要素を使用します。

お役に立てれば...