I am currently having a problem using the MouseDragElementsBehavior from the Blend SDK when using a ItemsControl and a Custom Canvas. My custom canvas simply adds or removes the MouseDragElement from its children depending on a DependencyProperty. This worked just fine when I was manually adding Items to the Canvas' children but appears to have broken when moving to an ItemsControl.
I am currently using the following ItemsControl code:
<ItemsControl ItemsSource="{Binding Path=CanvasItems}">
<ItemsControl.DataContext>
<ViewModels:ViewModel/>
</ItemsControl.DataContext>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<my:CustomCanvas Background="Black" IsEditable="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.CanEdit}" AllowDrop="{Binding RelativeSource={RelativeSource Self}, Path=IsEditable}" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
Adding the Drag Behavior in the Canvas.VisualChildrenChanged method does not allow the newly created object to be moved like before.
Do I need to add the Drag behavior to something other then the ContentPresenter that is passed to VisualChildrenChanged or provide a special style?
I don't really know the blend sdk behaviours, but I've worked with behaviours in general, so I hope the same mechanisms apply.
If you want to add a behaviour to the controls created by an ItemsControl the best way is adding it via a setter in the ItemsControl.ItemContainerStyle, though in this case I found it easier to add it in the ItemsControl.ItemTemplate
Something like
<ItemsControl ItemsSource="{Binding CanvasItems}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="Transparent" AllowDrop="True" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Green" BorderThickness="1" Background="AntiqueWhite">
<i:Interaction.Behaviors>
<ei:MouseDragElementBehavior ConstrainToParentBounds="True" DragBegun="MouseDragElementBehavior_DragBegun"/>
</i:Interaction.Behaviors>
<ContentControl Content="{Binding}" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl ItemsSource="{Binding CanvasItems}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="YourControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="YourControl">
<Border>
<Grid>
<SystemWindowsInteractivity:Interaction.Behaviors>
<MicrosoftExpressionInteractivityLayout:MouseDragElementBehavior />
</SystemWindowsInteractivity:Interaction.Behaviors>
<ContentPresenter />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
Related
I have the following ItemsControl:
<ItemsControl ItemsSource="{Binding ControllableLedList}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Width="600" Height="600" Grid.Row="0" Grid.Column="0" Background="FloralWhite" >
<Ellipse Width="600" Height="600" Fill="#FF252525" /> <!-- big Ellipse causing my error -->
</Canvas>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding PositionX}" />
<Setter Property="Canvas.Top" Value="{Binding PositionY}" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Ellipse Width="5" Height="5" Fill="Yellow"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Basically the idea here is to have a canvas with a collection of ellipses (let's call them LEDs, since that what they represent in the real world), where the position of the LED ellipses is controlled from the ViewModel
The above code works well except for the big Ellipse in the Canvas -> as soon as I add it, I get the following Error:
InvalidOperationException: Cannot explicitly modify Children collection of Panel used as ItemsPanel for ItemsControl. ItemsControl generates child elements for Panel
This makes sense, since the "actual children - the LED Ellipses" should be generated dynamically during runtime. Anyway, how can I get my big ellipse into my canvas, so that the order of visibility would be Canvas.Background->Big Ellipse-> LED Ellipses?
You may add the Ellipse to the Template of the ItemsControl:
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<Canvas>
<Ellipse Width="600" Height="600" Fill="#FF252525" />
<ItemsPresenter/>
</Canvas>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
In WPF I am trying to binding radio buttons to a property in the ViewModel such as this SO answer https://stackoverflow.com/a/2285732
Everything works fine, except that the Buttons are stacked Vertically. Now, this seems an easy fix, just modify the ItemsPanelTemplate.
Here's my code:
<ListBox ItemsSource="{Binding ItemOptions}" SelectedItem="{Binding SelectedOption}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" IsItemsHost="True" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}" >
<RadioButton Content="{TemplateBinding Content}"
IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
However, the items remain stacked vertically. Any ideas why this has no effect on the orientation of the ListBox?
Try this:
<ListBox.Template>
<ControlTemplate TargetType="{x:Type ListBox}">
<ScrollViewer x:Name="scrollviewer"
HorizontalScrollBarVisibility="Visible" CanContentScroll="False">
<StackPanel IsItemsHost="True" Orientation="Horizontal" />
</ScrollViewer>
</ControlTemplate>
</ListBox.Template>
I tried to get this working with the ItemsPanelTemplate, as you did, without success. This worked great for me.
Regards
Here is a basic example without styling. Note that the WrapPanel handles the layout.
<ListBox Margin="0,10,0,0"
ItemsSource="{StaticResource Orders}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<RadioButton Content="{Binding CustomerName}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Data with the model defined in code behind.
<Page.Resources>
<model:Orders x:Key="Orders">
<model:Order CustomerName="Alpha"
OrderId="997"
InProgress="True" />
<model:Order CustomerName="Beta"
OrderId="998"
InProgress="False" />
<model:Order CustomerName="Omega"
OrderId="999"
InProgress="True" />
<model:Order CustomerName="Zeta"
OrderId="1000"
InProgress="False" />
</model:Orders>
</Page.Resources>
Result
I want this Ellipse to get its coordinates from its corresponding BallViewModel, and to use them to determine its location inside a canvas.
The list of balls is bound to List<BallVM> in the mainviewmodel and thus I chose an itemsControl which has a canvas panel.
Is this approach correct?
If I try to bind to X and Y inside an itemcontainerstyle, then it's not specific to a certain ball.
No matter what I set in the Canvas.bottom or canvas.left properties the ellipse is always at the top left.
<Grid>
<ItemsControl ItemsSource="{Binding Balls}" Background="red">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas MouseMove="Canvas_MouseMove" Background="Blue"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type VM:BallVM}">
<Ellipse Canvas.Bottom="{Binding Y}" Canvas.Left="{Binding X}" Width="100" Height="100" Fill="Red"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
When you use an ItemTemplate with an ItemControls it does not directly put your Elippses on the Canvas but wraps them into an ContentPresenter. So you have to apply your canvas.Bottom/Left properties on the ItemsPresenter. You can can do this with the ItemContainerStyle:
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Bottom" Value="{Binding Y}" />
<Setter Property="Canvas.Left" Value="{Binding X}" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type VM:BallVM}">
<Ellipse Width="100" Height="100" Fill="Red"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
I am using a Grid as ItemsPanel for a list dynamically bound to an ItemsControl. The code below is working - with a remaining problem: I can’t find a way to dynamically initialize the ColumnDefinitions and RowDefinitions of the grid. As consequence all values are placed on top of each other.
<ItemsControl ItemsSource="{Binding Cells}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Row" Value="{Binding RowIndex}"/>
<Setter Property="Grid.Column" Value="{Binding ColumnIndex}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Value}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Please be aware, that I am searching an answer according the MVVM pattern. Therefore sub classing and code behind are just workarounds, but no solutions.
You'll need some way to tell the Grid how many Rows/Columns it has. Perhaps as each Item loads you could check the value of RowIndex and ColumnIndex and add Rows/Columns to the Grid if needed.
As another alternative, perhaps you can expose RowCount and ColumnCount properties in your ViewModel that return the max RowIndex and ColumnIndex, and in the Grid's Loaded event add however many Columns/Rows you need.
I find it perfectly acceptable to use code-behind in MVVM IF the code is related to the UI only.
Another idea would be to arrange your items in your code-behind into a 2D grid before returning it to the View, and then bind that Grid to a DataGrid with AutoGenerateColumns=True and the headers removed
Update
My current solution to this problem is to use a set of AttachedProperties for a Grid that allow you to bind RowCount and ColumnCount properties to a property on the ViewModel
You can find the code for my version of the attached properties on my blog here, and they can be used like this:
<ItemsPanelTemplate>
<Grid local:GridHelpers.RowCount="{Binding RowCount}"
local:GridHelpers.ColumnCount="{Binding ColumnCount}" />
</ItemsPanelTemplate>
Your grid has zero rows and columns so everything will be displayed on top of each other. Do something like below and it will work.
<ItemsControl ItemsSource="{Binding Cells}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Row" Value="{Binding RowIndex}" />
<Setter Property="Grid.Column" Value="{Binding ColumnIndex}" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Value}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
i found this from here The ItemsControl
<ItemsControl ItemsSource="{Binding VehicleMakes}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="3" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Width="300" Height="100" Click="ButtonOption_Click" Tag="{Binding Name}">
<StackPanel Orientation="Vertical">
<Image
Initialized="Image_Initialized"
Tag="{Binding ResourseImageName}"
Width="116"
Height="30"
Margin="0,0,0,10" >
</Image>
<TextBlock Text="{Binding Name}" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
</StackPanel>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I want to change a listview with a wrappanel inside into a listivew with a stackpanel inside, basically to switch between a "small image view" and a "details view".
Not sure the best way to do it though. What I have so far:
<UserControl.Resources>
<Style x:Key="ListBoxWrap" TargetType="ListBox">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ListBoxList" TargetType="ListBox">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<ListBox Style="{StaticResource ListBoxList}" Name="lstContacts" Background="White" Margin="7,0,7,7" Grid.Row="1" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<Border CornerRadius="4" Margin="5">
<StackPanel>
<TextBlock Text="{Binding FullName}" Margin="5,3,5,0" />
<TextBlock Text="{Binding Title}" Margin="5,0,5,3" />
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
You should use a ListView for that, then you just need to swap out the ListView.View to change the appearance, the GridView already is a details-view, then you only need to create a view for the thumbnails.
To do so subclass ViewBase, there is an example in the documentation; creating a simple thumbnail view should not be very hard.
This approach has the advantage that it fully encapsulates the display-logic, so you should not need to swap out properties like ItemTemplate in addition to the panel.
You could also use a ItemTemplateSelector to modify the template based on a specific value change which could be (event) triggered by a mouse-over or click event.
All of this code would reside in the xaml and you would not need to create a separate class or custom control.