I found this solution Using MouseDragElementBehavior with an ItemsControl and Canvas by Jörg Reichardt. But it doesn't work for me.
This is my code:
<ItemsControl ItemsSource="{Binding CardCollection}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="White" AllowDrop="True" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentControl Content="{Binding}">
<i:Interaction.Behaviors>
<is:MouseDragElementBehavior ConstrainToParentBounds="True" />
</i:Interaction.Behaviors>
</ContentControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
The items are shown on the canvas but cannot be dragged or dropped. I create new items for the cardCollection in the viewmodel and the cardCollection is updated to the model via mvvm propertynotifychanged.
Related
what steps must be done to make a user control, to work in such order:
<local:MyUserControl ItemsSource="{Binding Items}">
<local:MyUserControl.Items>
<local:MyUserControl.Item Name="{Binding Name}"/>
</local:MyUserControl.Items>
</local:MyUserControl>
I know that for ItemsSource I need to create DependencyProperty, but what for the part which is inside MyUserControl.
Example:
Look below is an example how I used to do it.
This is called MyUserControl
<UserControl>
<Grid>
<ItemsControl ItemsSource="{Binding Items}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Name}" Margin="3,3,3,3"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</UserControl>
MainPage:
<local:MyUserControl />
As you can see in this scenario, MyUserControl is not universal, it can be used properly ONLY if I have ItemsSource called Items, and inside of it there is a property called Name.
My Intention is to create flexible MyUserControl.
Thanks in advance.
I want to show in WrapPanel a list of images. How can I do that or maybe I shall use other control ?
You can absolutely use the WrapPanel to show a list of images, scrolling vertically or horizontally. To get the kind of panoramic tile effect like in People hub with your images, you could do something like this:
<controls:PanoramaItem Header="something" Orientation="Horizontal" Margin="0,-15,0,0" >
<ListBox Name="SomeList" Margin="0,0,-12,0" ItemsSource="{Binding SomeItemsList}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel x:Name="wrapPanel" Width="700" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<Image Height="200" Width="200" Margin="12,0,9,0" Source="{Binding ImageURL}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PanoramaItem>
Please note that a WrapPanel inside a ListBox does pick up the DataTemplate you define .. so you have complete liberty to bind any list to your WrapPanel.
Hope this helps!
Search for the same thing and came across this: Displaying a Collection of Items in a WrapPanel.
<ItemsControl ItemsSource="{Binding ActorList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Image}" Height="100"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
or you can use Xceed's SwitchPanel.
Yes definetly not the WrapPanel, it has not ItemsSource, it can't take a list.
Use the ListBox, and you can set the ItemsSource.
Edit
I am trying to create a table which have x colums and y rows.
This table can have a item source and each cell in this table will be an item.
For exmple how to bind a images collection to table where each image is an item.
If someone can implement this with liskbox so even better
This is my code:
<ListBox Grid.Row="2">
<ItemsControl ItemsSource="{Binding Projects, Mode=TwoWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Path=ProjectIcon, Mode=TwoWay}" Height="30" Width="30" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ListBox>
The control you are looking for is the WrapPanel from the Silverlight Toolkit.
<ItemsControl ItemsSource="{Binding ImageSet}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I have an ItemsControl using a StackPanel to display a list of items.
I would like a label to appear for each row, but for the content to the left of the label to be defined by a DataTemplateSelector. I do not want to redefine the label for each DataTemplate generated by the TemplateSelector.
Is this possible?
<ItemsControl ItemsSource="{Binding Path=Values}" >
<ItemsControl.Resources>
<v:MyTemplateSelector x:Key="myTemplateSelector"></v:MyTemplateSelector>
</ItemsControl.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<WrapPanel>
<Label>Test: </Label>
<!--What goes here should be defined by myTemplateSelector-->
</WrapPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I figured it out. The solution was to use a ContentPresenter element with a ContentTemplateSelector attribute:
<DataTemplate>
<WrapPanel>
<Label>Test: </Label>
<ContentPresenter
ContentTemplateSelector="{StaticResource ResourceKey=myTemplateSelector}">
</ContentPresenter>
</WrapPanel>
</DataTemplate>
Is there a way to populate the Silverlight toolkit's WrapPanel via binding to an ObservableCollection? All the examples I've seen so far, including the toolkit example itself, either populate the WrapPanel programmatically or by explicitly adding each item in XAML.
Thanks for your help!
EDIT: Following Geert van Horrik's advice I tried using an ItemsControl to load the WrapPanel via binding. This is the XAML:
<ScrollViewer VerticalScrollBarVisibility="Auto"
Height="440"
Margin="0,12,0,0">
<ItemsControl ItemsSource="{Binding SelectionContent}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1"
CornerRadius="4"
BorderBrush="{Binding BorderBrush}">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Tap="OnWrapPanelTapped"
DoubleTap="OnWrapPanelDoubleTapped" />
</toolkit:GestureService.GestureListener>
<Image Source="{Binding ImageSource}"
MaxHeight="48"
MaxWidth="48"
Margin="16" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
SelectionContent is an ObservableCollection present in this UserControl's code behind. It consists of SelectionItem object, which implements INotifyPropertyChanged and exposes 2 public properties - ImageSource and BorderBrush.
I'm setting the DataContext for the UserControl in its constructor to SelectionContent. But this isn't working and the WrapPanel does not display anything.
You should use an ItemsControl. Then, you can set the WrapPanel as items panel.
<ItemsControl ItemsSource="{Binding MyItemsSource}">
<ItemsControl.ItemsPanel>
<WrapPanel />
</ItemsControl.ItemsPanel>
</ItemsControl>