Unable to scroll within WPF ListBox - wpf

I have a horizontal ListBox in my WPF window, and each item within it contains another vertical ListBox within it.
I want to be able to scroll vertically either within the internal ListBox or the external one.
Scrolling horizontally is not an issue as it automatically lets me do it when the item list is bigger than the ListBox margins, however i failed to make either of my ListBoxes to be vertically scrollable.
I have tried using ScrollViewer.VerticalScrollBarVisibility="Visible" on either ListBox but the scrollbar is grayed out and unusable, even though there are items outside the margins of the ListBox.
My XAML:
<StackPanel>
<Grid Margin="100">
<ListBox x:Name = "ColumnList" ItemsSource="{Binding Board.Columns}" VerticalAlignment="Top" >
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush = "Black" MinWidth="200" MaxWidth="200" MinHeight="300" MaxHeight="300" ScrollViewer.VerticalScrollBarVisibility="Visible">
<StackPanel>
<TextBox Text = "{Binding Name}" IsReadOnly="True"/>
<ListBox x:Name="TasksList" ItemsSource="{Binding Tasks}" MouseDoubleClick="TasksList_MouseDoubleClick" ScrollViewer.VerticalScrollBarVisibility="Visible" SelectedItem="{Binding Path=DataContext.Task,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush = "Black" BorderThickness="2">
<StackPanel>
<TextBox Text = "{Binding Title}" IsReadOnly="True" />
<TextBox Text="{Binding Description}" IsReadOnly="True"/>
<TextBox Text = "{Binding CreationDate}" IsReadOnly="True" />
<TextBox Text="{Binding DueDate}" IsReadOnly="True"/>
<TextBox Text = "{Binding EmailAssignee}" IsReadOnly="True" />
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel >
<ItemsPanelTemplate >
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</StackPanel>

you have to change outer ListBox ItemTemplate - use Grid instead of StackPanel. Inner ListBox in StackPanel get the height to display all items, so scroll can't be activated, even if those items are not seen on the screen.
<DataTemplate>
<Border BorderBrush = "Black"
MinWidth="200" MaxWidth="200"
MinHeight="300" MaxHeight="300"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBox Text = "{Binding Name}" IsReadOnly="True"/>
<ListBox x:Name="TasksList" Grid.Row="1">
<!--omitted for clarity-->
</ListBox>
</Grid>
</Border>
</DataTemplate>

Related

Synchronize the size of controls that lay in different ItemsCollections

I want to synchronize the width of two controls.
<!--DataContext-->
<DockPanel LastChildFill="True" x:Name="HeaderDockPanel">
<DockPanel LastChildFill="True" MinHeight="60" DockPanel.Dock="Top" DataContext="{Binding Month}" d:DataContext="{d:DesignInstance Type=local:Month}" >
<TextBlock Text="{Binding Name}" Style="{StaticResource TitleTextBlock}" DockPanel.Dock="Left" />
<!--this shoud to set the Width-->
<!--Nested_1 DataContext Model_1-->
<local:DaysLine HorizontalAlignment="Left" Width="{Binding ElementName=HeaderDockPanel, Path=DataContext.DaysHeaderWidth, Mode=TwoWay}" />
</DockPanel>
<!--Nested_1 DataContext Model_2-->
<ListView Grid.Row="1" ItemsSource="{Binding CarBusiness}">
<ItemsControl.ItemTemplate>
<DataTemplate >
<DockPanel d:DataContext="{d:DesignInstance Type=local:CarBusiness}" LastChildFill="True">
<TextBlock Text="{Binding Name}" Style="{StaticResource TitleTextBlock}" DockPanel.Dock="Left" Margin="-6 0 0 0"/>
<!--this shoud to get the Width-->
<!--Nested_2 DataContext Model_3-->
<ItemsControl ItemsSource="{Binding Business}" Style="{StaticResource HorizontalItemsControl}" Width="{Binding DaysHeaderWidth}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:BusinessTextBlock d:DataContext="{d:DesignInstance Type=local:Business}" Business="{Binding}" ColumnWidth="20" HorizontalAlignment="Left" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DockPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListView>
</DockPanel>
The problem is that i can't find the source by RelativeSource Binding use FindByName.
The target control whatch on nested DataContext that is an item of the first and i cant set it in without adding to all this models the MyWidth property.
Is there a some enother way to bind them more correct?
I am thinking about a static property but it is not as correct as i want because i have planned to have a several instances of this control.

TextBox not stretching horizontally

I am unable to stretch the textbox horizontally fit its container.
NOTE:
I do set the HorizontalAlignment property.
I also tried binding the width of the textbox to its containers width.
Neither worked for me.
<ListView Grid.Row="1" Grid.Column="0" ItemsSource="{Binding ConsoleLines}" Background="Black" >
<ListView.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding ElementName=UserControl, Path=DataContext.Command, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
TextChanged="OnTextChanged" KeyDown="OnKeyDown"
HorizontalAlignment="Stretch" Padding="5" Background="Black" Foreground="LightGray" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Try setting the ListView.HorizontalContentAlignment Property to Stretch instead. From the linked page:
... you can set the HorizontalContentAlignment property to Stretch, which stretches the child element to fill the allocated space of the parent element
You must have misunderstood the answer, because it certainly does stretch each item across the entire width of the GridView. Try this:
<ListView Grid.Row="1" Grid.Column="0" ItemsSource="{Binding ConsoleLines}"
Background="Black" HorizontalContentAlignment="Stretch">
<ListView.ItemTemplate>
<DataTemplate>
<TextBox Text="Some simple text" Background="White"
Foreground="LightGray" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
you should set the HorizontalContentAlignment="Stretch" of the ListView
<ListView ItemsSource="{Binding Collection, Source={StaticResource viewmodel}}" Background="Black" HorizontalContentAlignment="Stretch" >
<ListView.ItemTemplate>
<DataTemplate>
<TextBox HorizontalAlignment="Stretch" Padding="0" Background="Green" Foreground="White" Text="" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Dynamically adding controls to View from MVVM

In WPF, I am using the MVVM model.
I have a View with a Dockpanel and I want to add dynamically StackPanels with a Label and TextBox for all Harddisks found over the Binding.
Therefore my XAML looks like:
<DockPanel Grid.Row="1" HorizontalAlignment="Stretch" Margin="5">
<ItemsControl ItemsSource="{Binding Harddisks}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel DockPanel.Dock="Right" HorizontalAlignment="Right" Margin="2.5,0,0,0">
<Label Content="{Binding Path=Label}" />
<TextBox Text="{Binding Path=GB_Free}" Width="100" IsReadOnly="True"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
It should be four Labels and TextBoxes, but only the first Label and TextBox are shown.
Why?
Your items in your ItemsControl are not actually direct children of the DockPanel. You need to change the ItemsControl to specify that the DockPanel is the Panel. The following will cause the ItemsControl to create a DockPanel and place all the items inside it (rather than the StackPanel that ItemsControl uses by default).
More Info: MSDN: ItemsControl.ItemsPanel Property
<ItemsControl ItemsSource="{Binding Harddisks}">
<ItemsControl.ItemsPanel>
<DockPanel Grid.Row="1" HorizontalAlignment="Stretch" Margin="5" />
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel DockPanel.Dock="Right" HorizontalAlignment="Right" Margin="2.5,0,0,0">
<Label Content="{Binding Path=Label}" />
<TextBox Text="{Binding Path=GB_Free}" Width="100" IsReadOnly="True"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

ListBox scrolling with variable height

I have a problem with ListBox scrolling. Everytime I have more items than can be shown on screen and I try to scroll through the list it automatically snaps back to the top. I found this can be fixed by setting a fixed height to the ListBox.
However, I need to add items to the list dynamically and hence the height changes.
The Listbox is in the second row of a grid nested in a PivotItem.
How can I either set the height of the Listbox dynamically with XAML or achieve a scrolling effect that does not always snap to the top and hence prevents me from reading/editing items on the bottom?
Here is the XAML:
<Grid x:Name="LayoutRoot">
...
<controls:Pivot Title="Malts">
<controls:PivotItem Header="Gravity" Name="GravityPivot">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid> some more controls in row 0</Grid>
<Grid
Grid.Row="1">
<ListBox
VerticalAlignment="Stretch"
ItemsSource="{Binding ItemList}"
Padding="10,10,0,10"
ItemContainerStyle="{StaticResource ListBoxItemStyle}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock
Style="{StaticResource PhoneTextExtraLargeStyle}"
Text="{Binding Name}"
VerticalAlignment="Bottom"/>
<StackPanel>
<StackPanel
Orientation="Horizontal" >
<TextBlock
Text="{Binding Amount, Converter={StaticResource WeightConverter},StringFormat=' {0:f2}'}"
Margin="10,0,5,0"
Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock
Text="{Binding ., Converter={StaticResource UnitExtension}, ConverterParameter='Weight'}"
Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
</StackPanel>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem
Header="Edit"
Command="{Binding ElementName=MaltList, Path=DataContext.EditCommand}"
CommandParameter="{Binding}"/>
<toolkit:MenuItem
Header="Remove"
Command="{Binding ElementName=MaltList, Path=DataContext.RemoveCommand}"
CommandParameter="{Binding}"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
</controls:PivotItem>
Thank you!
Try this, should fix you up;
<ListBox>
<!-- You want this part... -->
<ListBox.Template>
<ControlTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<ItemsPresenter/>
</ScrollViewer>
</ControlTemplate>
</ListBox.Template>
</ListBox>

Why does WrapPanel wrap TextBlocks horizontally but UserControls vertically?

This correctly wraps the TextBlocks horizontally:
<StackPanel DockPanel.Dock="Top" Margin="10" HorizontalAlignment="Left">
<TextBlock Text="Simple WrapPanel:" Margin="0 0 0 5"/>
<WrapPanel Orientation="Horizontal">
<TextBlock Text="one"/>
<TextBlock Text="two"/>
<TextBlock Text="thee"/>
<TextBlock Text="four"/>
</WrapPanel>
</StackPanel>
But this incorrectly wraps my UserControls vertically stacked on top of each other (I want them to be horizontally wrapped like the TextBlocks above):
<StackPanel DockPanel.Dock="Top" Margin="10" HorizontalAlignment="Left">
<TextBlock Text="Simple WrapPanel:" Margin="0 0 0 5"/>
<WrapPanel Orientation="Horizontal">
<ItemsControl ItemsSource="{Binding CustomerViewModels}" Width="Auto" BorderThickness="0">
<ItemsControl.ItemTemplate>
<DataTemplate>
<views:CustomerSimpleItemView />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</WrapPanel>
</StackPanel>
CustomerSimpleItemView:
<UserControl x:Class="TestMvvmExample2341.Views.CustomerSimpleItemView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock Text="{Binding LastName}" FontWeight="Bold" Width="100"/>
</UserControl>
What do I have to do in my UserControl so that they wrap horizontally?
added: even if I change all widths and heights in the usercontrol to Auto, it still stacks vertically...:
<UserControl x:Class="TestMvvmExample2341.Views.CustomerSimpleItemView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="Auto" Height="Auto">
<TextBlock Text="{Binding LastName}" FontWeight="Bold" Width="Auto" Height="Auto"/>
</UserControl>
In your second sample, try to use the WrapPanel inside a ItemsPanelTemplate for the ItemsControl, otherwise the ItemsControl uses a StackPanel by default and your WrapPanel doesn't do anything as there is nothing to wrap.
<StackPanel DockPanel.Dock="Top" Margin="10" HorizontalAlignment="Left">
<TextBlock Text="Simple WrapPanel:" Margin="0 0 0 5"/>
<ItemsControl ItemsSource="{Binding CustomerViewModels}" Width="Auto" BorderThickness="0">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<views:CustomerSimpleItemView />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
This is happening because the ItemsControl, by default uses a StackPanel in vertical orientation to layout it child objects. So the wrap panel is actually only laying out one child which is the ItemsControl. What you wan't to do is set the ItemsControl's ItemsPanel property so that is uses a WrapPanel for layout. Your code would look like this:
<StackPanel DockPanel.Dock="Top"
Margin="10"
HorizontalAlignment="Left">
<TextBlock Text="Simple WrapPanel:"
Margin="0 0 0 5" />
<!-- Note I am removing the WrapPanel that was surrounding the ItemsControl -->
<ItemsControl ItemsSource="{Binding CustomerViewModels}"
Width="Auto"
BorderThickness="0">
<!-- This is the important part. Here we set the ItemsPanel template -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<views:CustomerSimpleItemView />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>

Resources