ListBox ItemTemplateを取得して、ListBoxの全幅を水平方向に拡大する方法は?


356

ListItemのオレンジ色の背景をListboxの幅いっぱいに拡張したいのですが。

現在、幅はFirstName + LastNameと同じです。

可能なすべての要素を設定しました:Horizo​​ntalAlignment = "Stretch"。

ユーザーがListboxを拡大するときにListboxItemの背景を拡大して、絶対値を入れたくない。

ListBoxItemsの背景色がListBoxの幅を満たすようにするにはどうすればよいですか?

<Window x:Class="TestListBoxSelectedItemStyle.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TestListBoxSelectedItemStyle"
    Title="Window1" Height="300" Width="300">

    <Window.Resources>
        <local:CustomerViewModel x:Key="TheDataProvider"/>

        <DataTemplate x:Key="CustomerItemTemplate">
            <Border CornerRadius="5" Background="Orange" HorizontalAlignment="Stretch" Padding="5" Margin="3">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Width="Auto">
                    <TextBlock HorizontalAlignment="Stretch">
                    <TextBlock.Text>
                        <MultiBinding StringFormat="{}{0} {1}">
                            <Binding Path="FirstName"/>
                            <Binding Path="LastName"/>
                        </MultiBinding>
                    </TextBlock.Text>
                    </TextBlock>
                </StackPanel>
            </Border>
        </DataTemplate>

    </Window.Resources>

    <Grid>
        <ListBox ItemsSource="{Binding Path=GetAllCustomers, Source={StaticResource TheDataProvider}}"
                 ItemTemplate="{StaticResource CustomerItemTemplate}"/>
    </Grid>
</Window>

回答:


468

これは重複していると思いますが、同じ答えの質問が見つかりません。

HorizontalContentAlignment="Stretch"リストボックスに追加します。これでうまくいくはずです。HorizontalAlignment誤って取得するのは簡単なので、オートコンプリートには注意してください。


1
@アジャイルジェダイ、カスタムリストボックスアイテムがあるときの解決策を知っていますか?私自身、その問題に遭遇しました。
eoldre

11
実際、このソリューションは、何らかの理由でSilverlightでは機能しません。一方、Gabrielのソリューションはそうです
TimothyP

6
これは、WinRTリストビューコントロールでは機能しません。私はすでにそれを試しました。
uSeRnAmEhAhAhAhAhA 2014年

3
これはカスタムリスト(SilverlightではなくWindows)で正常に機能します。xamlを書き込むときは、オートコンプリートに注意してください。「Horiz ..」と書くと、「Horizo​​ntalContentAlignment」ではなく「Horizo​​ntalAlignment」が表示されます。どちらも「ストレッチ」を使用しているため、最初の提案を選択するのは非常に簡単です。
JarleBjørnbeth2014年

1
カスタムアイテムの幅を自動に設定すると、カスタムアイテムが機能します。
Lensflare

646

私は両方の投稿に出くわしたので、ここ別の解決策を見つけました...

これは、マイルズの回答によるものです。

<ListBox.ItemContainerStyle> 
    <Style TargetType="ListBoxItem"> 
        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter> 
    </Style> 
</ListBox.ItemContainerStyle> 

これでうまくいきました。


@CameronMacFarland Silverlightの理由は、少なくとも私の場合、IT管理スタッフがActive Directoryを使用してWPF / Winformアプリを展開する方法を理解できなかったためであり、スニーカーネットに依存しないクリーンな展開シナリオが必要でしたアップデート。
リチャードB

@RichardB lol私のコメントは、Silverlightが異なっている必要があり、WPFと比較してテンプレートが壊れている必要があるので、Silverlightに向けられていました。
Cameron MacFarland

@CameronMacFarlandああ... Silverlightアプリを実行し、ServiceReferences.ClientConfigファイルで苦労した後、別のSilverlightアプリケーションの開発を(ペストのように)回避するように設定しました。それはクールなアイデアでしたが、印象的ではありませんでした。
リチャードB

1
これをlistView:<ListView.ItemContainerStyle> <Style TargetType = "ListViewItem"> <Setter Property = "Horizo​​ntalContentAlignment" Value = "Stretch"> </ Setter> </ Style> </ ListView内のデータテンプレートで機能させるには.ItemContainerStyle>
クリストファークック

エラー:BindingExpressionパスエラー:Project.CustomElement、Project.WindowsPhone、Version = 1.0.0.0、Culture = neutral、PublicKeyToken = nullで 'Width'プロパティが見つかりません。BindingExpression:Path = 'Width' DataItem = Project.CustomElement、Project.WindowsPhone、Version = 1.0.0.0、Culture = neutral、PublicKeyToken = null '; ターゲット要素は 'Windows.UI.Xaml.Controls.Grid'(Name = 'null');です。ターゲットプロパティは 'Width'(タイプ 'Double')
Black Cid

72

アイテムがより広い場合、ListBoxここでの他の回答は役に立ちません。ItemTemplate残りのアイテムはよりも幅が広いままListBoxです。

私にとって有効だった修正は、水平スクロールバーを無効にすることでした。これは、明らかに、すべてのアイテムのコンテナーにリストボックスと同じ幅だけを維持するようにも指示します。

したがって、リストボックスと同じ幅のListBoxアイテムを取得するための組み合わせた修正は、サイズが小さくストレッチが必要か、幅が広くラップが必要かに関係なく、次のようになります。

<ListBox HorizontalContentAlignment="Stretch" 
         ScrollViewer.HorizontalScrollBarVisibility="Disabled">

スクロールバーのアイデアの功績


0

境界線は視覚的な外観のためだけに使用されるため、ListBoxItemのControlTemplateに入れて、そこでプロパティを変更できます。ItemTemplateでは、StackPanelとTextBlockのみを配置できます。このようにして、コントロールの外観がControlTemplateを介して制御され、表示されるデータがDataTemplateを介して制御されるため、コードもクリーンなままです。


0

私のための修正はセットプロパティにしたHorizontalAlignment="Stretch"上でItemsPresenter内部のScrollVieweR ..

これが誰かを助けることを願っています...

<Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}" HorizontalAlignment="Stretch">
                        <ItemsPresenter  Height="252" HorizontalAlignment="Stretch"/>
                    </ScrollViewer>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

0

私も同じ問題を抱えていましたが、簡単な回避策として、ブレンドを使用して追加されているパディングの量を判断しました。私の場合は12だったので、マイナスのマージンを使用してそれを取り除きました。これですべてを正しく中央に配置できるようになりました

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.