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>
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'm trying to design a horizontal stack of UserControls. I have a UserControl named MiniControl and an ObservableCollection<MiniControl> in my ViewModel named MiniVideos. In the Window I'm trying to put all together I have this code:
<ItemsControl x:Name="items" Margin="5" ItemsSource="{Binding Path=MiniVideos}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Background="LightGray"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentPresenter />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
When I run the code, it is not working as expected and I have the following error in output:
System.Windows.Data Error: 26 : ItemTemplate and ItemTemplateSelector are ignored for items already of the ItemsControl's container type; Type='MiniControl'.
Any idea?
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.
I'm tyring to build a CheckBoxList to a Silverlight control I'm building and I'm having some trouble getting it right.
What I'm after, is a CheckBoxList that wraps the CheckBoxes vertically within a GridRow of * height. The problem I have is that I want to specify the height of the WrapPanel to be that of the row it is within.
In WPF it looks like the following:
<ScrollViewer BorderThickness="0"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Hidden" >
<ItemsControl Name="ic">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Vertical"
Height="{Binding Path=ActualHeight,
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type ScrollContentPresenter}}}" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Path=Description}" Margin="0,0,10,2" FontSize="12"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
Silverlight doesn't support RelativeSource in the same way so I'm unable to do it in the same way I did with WPF. I've seen some work arounds for RelativeSource, but they're either massively verbous or I can't seem to get them working.
Surely there's a simple way of setting the height of the WrapPanel in Silverlight?
In case anyone comes across this and doesn't already know, RelativeSource is being added in Silverlight 5
I have a ItemControl in silverlight 4 with a Canvas as a ItemPanel, the idea is to simulate a canvas area with drag and dop items.
ItemsControl has a ItemTemplate with a image and one button.
The idea is that when the button of itemTemplate Click the itemTemplate change.
Some of my code:
(Items Control)
<ItemsControl ItemsSource="{Binding Devices}"
ItemTemplate="{StaticResource deviceItemTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
MouseLeftButtonDown="Canvas_MouseLeftButtonDown"
MouseMove="Canvas_MouseMove"
LostMouseCapture="Canvas_LostMouseCapture"></Canvas>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
(ItemTemplate)
<DataTemplate x:Key="deviceItemTemplate">
<ContentControl>
<Grid IsHitTestVisible="True" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions>
<Image IsHitTestVisible="False" Grid.Row="0" Stretch="UniformToFill"
Width="50" Height="50"
Source="{Binding ImagePath}"/>
<Button Grid.Row="1" Content="{Binding EditarDispositivoCommand.DisplayName}" Command="{Binding EditarDispositivoCommand.Command}"></Button>
</Grid>
<ContentControl.RenderTransform>
<TranslateTransform X="{Binding X, Mode=TwoWay}" Y="{Binding Y, Mode=TwoWay}"></TranslateTransform>
</ContentControl.RenderTransform>
</ContentControl>
</DataTemplate>
I try to get that when a button in a itemTemplate is clicked the template of this item change to other template from resource.
Was that possible or i taking a bad way. Thanks a lot.
You could try using a DataTemplateSelector for Silverlight - it's not built in like WPF, but it can be achieved with some extra code.
Here is a good example from CodeProject:
http://www.codeproject.com/KB/silverlight/SLTemplateSelector.aspx
Just add an element to you view model to specify the template...
I just used the following article to do what you suggested.
I have two item templates defined for a view and can progamatically change the item template at runtime though codebehind
http://weblogs.asp.net/psheriff/archive/2010/08/25/change-templates-dynamically-in-silverlight.aspx
Hope this helps
(Sample also uses a button to change the item template)