[WPF][Xaml] ListBoxの各コンテンツの幅をListBoxの横幅に合わせる

  • 0
    いいね
  • 0
    コメント

    ListBoxの各コンテンツの幅をリストボックスに合わせたい場合の方法メモ

    結論

    HorizontalContentAlignment="Stretch" を指定する

    指定前の状態

    これをListBoxなどで指定しない場合、ListBoxのItemの横幅がコンテンツの内容の最大サイズになってしまう。
    そうするとListBoxの右側に表示したいような場合に重なってしまって表示できない。

    image.png

    この際に HorizontalContentAlignment="Stretch" を指定すると、以下のようにListBoxの横幅が最大サイズになる。

    image.png

    画像の使用例

    ※上の画像は合わせてMaterialDesignToolKitを使用しています

    XAML
    <ListBox ItemsSource="{Binding Path=ItemList}"
             HorizontalContentAlignment="Stretch"
             VirtualizingPanel.ScrollUnit="Item"
             VirtualizingPanel.IsVirtualizing="True"
             VirtualizingPanel.VirtualizationMode="Recycling">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid Background="LightBlue">
                    <TextBlock Text="LeftItem"/>
                    <TextBlock Text="RightItem" TextAlignment="Right"/>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>