CODEWITHSUNDEEP
xamluwpwin-universal-appwinrt-xaml
Briefkasten
Briefkasten

Reputation: 1994

Strech ListBox/ItemsControl in UWP

I want to stretch a listbox horizontally and vertically in UWP. I tried some WPF solutions, but none of them worked. (Stretch line to width of Itemstemplate canvas in itemscontrol)

What I tried:

<Page.Content>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListBox VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" Background="Green">
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                    <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
                    <Setter Property="VerticalAlignment" Value="Stretch"></Setter>
                    <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
                    <Setter Property="Background" Value="AliceBlue" />
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.Template>
                <ControlTemplate TargetType="ListBox">
                    <ItemsPresenter  Height="252" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                </ControlTemplate>
            </ListBox.Template>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBoxItem>asdf</ListBoxItem>
            <ListBoxItem>asdfasdf</ListBoxItem>
            <ListBoxItem>asdfsdf</ListBoxItem>
            <ListBoxItem>34</ListBoxItem>
            <ListBoxItem>as2df</ListBoxItem>
            <ListBoxItem>asdf</ListBoxItem>
        </ListBox>
    </Grid>
</Page.Content>

The result is the following:

enter image description here

How can I stretch a listbox in uwp?

Upvotes: 0

Views: 157

Answers (1)

AVK
AVK

Reputation: 3923

You have Explicitly Set the Height="252". That is the reason why it does not show up. Also you set the background of actual ListBox to Green but that is overridden by your ItemsPanelTemplate so Green doesn't show up.

Your final XAML should look something like below.

<ListBox VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" Background="Green">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
            <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
            <Setter Property="VerticalAlignment" Value="Stretch"></Setter>
            <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
            <Setter Property="Background" Value="AliceBlue" />
        </Style>
    </ListBox.ItemContainerStyle>
    <ListBoxItem>asdf</ListBoxItem>
    <ListBoxItem>asdfasdf</ListBoxItem>
    <ListBoxItem>asdfsdf</ListBoxItem>
    <ListBoxItem>34</ListBoxItem>
    <ListBoxItem>as2df</ListBoxItem>
    <ListBoxItem>asdf</ListBoxItem>
</ListBox>

This is not Tested but should work as you expected.

Upvotes: 1

Related Questions