CODEWITHSUNDEEP
wpf
HuA
HuA

Reputation: 111

The content of listview is not align to the top in WPF

I am trying to add an expander and inside it, I need to add a ScrollView. ScrollView will contain a list of different options to select. So I add checkboxes which I need then to be aligned from left to right and top to bottom. The problem That I am face is the GroupBoxes are not aligned to the top. I tried to use vertical alignment but it did not work.

Any suggestion?

         <Expander Name="ExpanderControl" Header="Click to Expand" HorizontalAlignment="Stretch" Height="200">
                        <ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
                            <ListBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <WrapPanel Orientation="Horizontal"   Margin="10,10,10,10" >
                                    </WrapPanel>
                                </ItemsPanelTemplate>
                            </ListBox.ItemsPanel>
                            <GroupBox Header="One" Width="100">
                                <StackPanel>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                </StackPanel>
                            </GroupBox>
                            <GroupBox Header="One" Width="100">
                                <StackPanel>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                </StackPanel>
                            </GroupBox>
                            <GroupBox Header="One" Width="100">
                                <StackPanel>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                </StackPanel>
                            </GroupBox>
                            <GroupBox Header="One" Width="100">
                                <StackPanel>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                </StackPanel>
                            </GroupBox>
                            <GroupBox Header="One" Width="100">
                                <StackPanel>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                    <CheckBox Content="one"/>
                                </StackPanel>
                            </GroupBox>
                        </ListView>

                    </Expander>

enter image description here

Upvotes: 0

Views: 104

Answers (1)

user2250152
user2250152

Reputation: 20635

You can modify ItemContainerStyle of ListView and set VerticalContentAlignment of ListViewItem.

<Expander Name="ExpanderControl" Header="Click to Expand" HorizontalAlignment="Stretch" Height="200">
    <ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal"   Margin="10,10,10,10" >
                </WrapPanel>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="VerticalContentAlignment" Value="Stretch" />
            </Style>
        </ListView.ItemContainerStyle>
        ... <!-- the rest of your code -->
    </ListView>
</Expander>

Result:

enter image description here

Upvotes: 1

Related Questions