CODEWITHSUNDEEP
c#wpfxamllistview
carndacier
carndacier

Reputation: 960

How do I stop overflow on ListView on one line

I would like to create a listview, which contains some items. Each items have a specific size (same for all) and are clickable.

I've created the listview, but once I have reach the max width size of the listview, it wraps and goes on a second line. I would like to have a horizontal Scroll Bar and all my items on one line.

For exemple, I have 5 items, but it displays that :

enter image description here

I would like to have the horizontal scrollbar to be able to see the fifth.

Here is my xaml code :

<ListView Background="#1A1A1A" HorizontalAlignment="Stretch" Margin="10,0,10,0" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Auto" Height="100" ItemsSource="{Binding Projects}" SelectionChanged="ListView_SelectionChanged">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal" Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
                                ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListView}}"
                                MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
                                ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListView}}" />
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="#CCCCCC" BorderThickness="1">
                        <StackPanel Orientation="Horizontal" Height="100" Width="200">
                            <TextBlock Height="100" Width="200" FontSize="20" Padding="0,25,0,0" TextAlignment="Center" Foreground="#1A1A1A" Background="{Binding BackgroundColor}" Text="{Binding Title}" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

Upvotes: 0

Views: 178

Answers (1)

Muds
Muds

Reputation: 4116

you can change wrap panel to stackPanel

<ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal" Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
                            ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListView}}"
                            MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
                            ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListView}}" />
            </ItemsPanelTemplate>

to 

<ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
                            MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}" />
            </ItemsPanelTemplate>

Upvotes: 2

Related Questions