ListBoxDragDropTarget prevents ListBox from filling its parent control - silverlight

Its extremely easy with the Silverlight Toolkit to enable basic drag and drop.
http://silverlightfeeds.com/post/1325/Silverlight_Toolkit_adds_DragDrop_targets.aspx
Unfortunately it seems that the wrapper ListBoxDragDropTarget screws up the normal default behavior of a ListBox which is to stretch itself to the parent control - such as a grid cell in this example.
<Grid Background="Yellow">
<toolKit:ListBoxDragDropTarget AllowDrop="True">
<ListBox x:Name="customerListBoxMain"
DisplayMemberPath="Name">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</toolKit:ListBoxDragDropTarget>
</Grid>
I end up here (after binding data to the ListBox) with a small listbox resized to fit its contents sitting in the middle of a yellow box.
No amount of HorizontalAlignment=Stretch etc. seems to be able to get it to fill the parent box.
How can I get the ListBox to fill the Grid?

ListBoxDragDropTarget is derived from content control. Just set HorizontalContentAlignment and
VerticalContentAlignment.
.....

The best I have so far is listening for the size of the wrapper grid to change, and manually updating the size. (I couldn't get this working in XAML so had to use the event).
<Grid Name="myListBoxWrapper" SizeChanged="myListBoxWrapper_SizeChanged">
<controlsToolkit:ListBoxDragDropTarget AllowDrop="True">
<ListBox x:Name="myListBox" >
and in code-behind:
private void myListBoxWrapper_SizeChanged(object sender, SizeChangedEventArgs e)
{
myListBox.Width = myListBoxWrapper.ActualWidth;
myListBox.Height = myListBoxWrapper.ActualHeight;
}

As Archil said, setting HorizontalContentAlignment and VerticalContentAlignment is the way to go, but another way probably would be to bind Width and Height of ListBox to ActualWidth and ActualHeight of ListBoxDragDropTarget:
<toolkit:ListBoxDragDropTarget x:Name="dragdroptarget" AllowDrop="True">
<ListBox x:Name="customerListBoxMain"
DisplayMemberPath="Name"
Width="{Binding ElementName=dragdroptarget, Path=ActualWidth}"
Height="{Binding ElementName=dragdroptarget, Path=ActualHeight}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</toolkit:ListBoxDragDropTarget>

Related

How to make the items in a WPF ListBox wrap horizontally and vertically

I want to show a list of thumbnails, and allow the user to choose one. A ListBox seemed an obvious choice, setting the template to include the thumbnail and description.
The following code does this correctly...
<ListBox Margin="5"
Name="BackgroundsLb">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Margin="5"
BorderBrush="Black"
BorderThickness="1">
<StackPanel Margin="5">
<Image Source="{Binding Path=Data, Converter={StaticResource BytesToImageVC}}"
Width="150"
HorizontalAlignment="Center" />
<TextBlock Text="{Binding Path=Description}"
HorizontalAlignment="Center" />
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
However, this displays the thumbnails vertically, one per row, as is normal for a ListBox. Given that the thumbnails are only 150 pixels wide, I would like to show them in something more like a grid, but (ideally) in a way so that the number of columns adapts to the size of the window.
I tried replacing the ListBox with an ItemsControl, adding in the following...
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
...and it displayed exactly how I wanted it, but the ItemsControl does not allow selection, so is no use for my purpose.
Is there a way to achieve a flexible, selectable display that fills the horizontal space, and breaks onto a new row according to the size of the window?
Thanks
You can use an ItemsPanelTemplate in a ListBox just the same as you are using one in the ItemsControl. The difference I think you're seeing is that ListBox uses scroll bars by default rather than wrapping the content. Basically the content is allowed to grow forever, so you never get the wrap. Instead you get a scrollbar. The good news is you can disable this behavior. The following should give you a horizontal wrap, where new rows are created as needed.
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>

WPF itemscontrol child alignment

I have a WPF MVVM application with an itemscontrol. The number of horizontal child items is influenced by the itemscontrol width. There is only 1 thing i haven't solved. I'm trying to align the child elements in a way that there are always centered. I have made quick pictures in paint to demonstrate what i mean.
How it's now:
If the width further inceares then a forth item will be added horizontally. This function needs to stay.
How I would like to see it:
If there is enough room for a forth item then it needs to be added. I'm thinking that the answer could be a simple XAML property. Anybody an idea?
Put the ItemsControl in a Grid and set its HorizontalAlignment to Center:
<Grid>
<ItemsControl ItemsSource="{Binding Images}" HorizontalAlignment="Center">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}" .../>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>

Looking for a WPF multicolumn list with scaling

I would like to create a multi-column list of checkboxes, but here's the catch - as I resize the window I would like everything to scale accordingly, including text size. I've been trying to make use of a WrapPanel and ViewBox but can't get the XAML right. Are these controls the best option or should I be using a ListBox (note I don't need selection functionality or scrollbars)? Any suggestions or examples on how I could achieve this would be much appreciated. I'm using MVVM and the list will be data bound, if that makes a difference.
BTW since starting WPF I've been struggling to understand which controls size to their children and which size to their parent. Are there any good sites, cheat sheets, or whatever summarising the behaviour of each control?
If you have a variable number of child elements, you could put a UniformGrid into a ViewBox.
If the child elements have to be visualized by a DataTemplate, you would have to use an ItemsControl with the ItemsPanel property set to such a UniformGrid:
<Viewbox Stretch="Uniform">
<ItemsControl ItemsSource="{Binding Items}" Width="400" Height="200">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="4"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Background="AliceBlue">
<CheckBox Content="{Binding Label}" IsChecked="{Binding IsChecked}"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Viewbox>

Stackpanel add item animation

I've been struggling a while with marquee-style image scrolling control.
At a moment, I stuck up with templated ItemsControl:
<Window.Resources>
<DataTemplate x:Key="itemsTemplate">
<Image Source="{Binding AbsolutePath}"></Image>
</DataTemplate>
</Window.Resources>
<ItemsControl ItemTemplate="{StaticResource itemsTemplate}" x:Name="ic"
ItemsSource="{Binding ElementName=mainWindow, Path=DataItems}" VirtualizingStackPanel.IsVirtualizing="True">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical" VerticalAlignment="Bottom"
VirtualizingStackPanel.IsVirtualizing="True" >
</VirtualizingStackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
ItemsControl is bound to ObservableCollection, so I can add items at runtime. As soon as item goes off-screen it's removed from ObservableCollection.
The last thing to do is implementing custom item add behavior (smooth slide-in instead of insert-translateothers behavior).
Shall I derive from StackPanel to achieve such effect or just perform DoubleAnimation on currently adding item?
Any suggestions appreciated.
Check this out: Animate WPF Datatemplate when item added to Listbox. Will it suit your needs?

Horizontal ListBox items vertical layout

I have horizontal ListBox. Here is code for it (removed some irrelevant):
<ListBox Grid.Row="1"
ItemContainerStyle="{StaticResource ListBoxUnselectableItemStyle}"
ItemsSource="{Binding ...}"
BorderThickness="0"
Background="{x:Null}"
ScrollViewer.CanContentScroll="False">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"
VerticalAlignment="Top"
HorizontalAlignment="Center"
Background="Red"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
And I get items' layout behavior like this:
]
As you can see, second item is smaller, and VerticalLayout is not Top as I want.
Can anybody help me?
HorizontalAlignment and VerticalAlignment refer to how the StackPanel is aligned within its parent container.
You probably need to be looking at ItemContainerStyle, where you would set VerticalAlignment to Stretch (so that the ListBoxItem occupies the full height of the ListBox), and VerticalContentAlignment to Top (so that the content of the ListBoxItem is aligned to the top of the ListBoxItem).

Resources