I have an ItemsControl set up like this:
<Grid>
<ItemsControl ItemsSource="{Binding Asteroids}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="Black">
<!-- i want to add another polygon to the canvas-->
<!--<Polygon Name ="ShipPolygon" Points="{Binding Ship}" Fill="Blue" />-->
</Canvas>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Polygon Fill="Gray" Points="{Binding AsteroidPoints}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
As you can see, the ItemsControl is displaying a collection's elements as Polygons in a Canvas. But i also want to add another Polygon to this Canvas, here named "ShipPolygon". I can't do that this way, because i get an XMLParseException. What is the proper method to do this? Thanks in advance!
You are using an ItemsControl, which is there to display multiple similar items on an itemspanel.
Now obviously you can't add something to your ItemsPanelTemplate there you are only telling the itemscontrol which panel it should use to display its items.
Your ItemsSource and your ItemTemplate suggest that you only want to show Asteroids in your ItemsControl. So the easiest way would be to just overlay your ship onto the itemscontrol with your asteroids
<Grid>
<ItemsControl ItemsSource="{Binding Asteroids}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="Black"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Polygon Fill="Gray" Points="{Binding AsteroidPoints}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Polygon Name ="ShipPolygon" Points="{Binding Ship}" Fill="Blue" />
</Grid>
Otherwise you could add it aswell to the itemscontrol, but then need to use different ItemTemplates. And you need to handle, that your ItemsControl no longer only holds Asteroids.
Using implicit item Templates
<!-- No key, so it is implicit and automatically used-->
<DataTemplate DataType="{x:Type Asteroids}">
<Polygon Fill="Gray" Points="{Binding AsteroidPoints}" />
</DataTemplate>
<DataTemplate DataType="{x:Type Player}">
<Polygon Name ="ShipPolygon" Points="{Binding Ship}" Fill="Blue" />
</DataTemplate>
<!-- above must be in a resource section, like app.xaml -->
<Grid>
<ItemsControl ItemsSource="{Binding Entities}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="Black"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
Or you could use a DataTemplateSelector.
Related
I've written a code example below:
<StackPanel>
<TextBlock>Appointments today</TextBlock>
<ItemsControl ItemsSource="{Binding Appointments}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<controls:CalendarMonthDayEventsItemsPanel OutsideViewportCount="..." />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border>
<TextBlock Text="{Binding Title}" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<StackPanel Orientation="Horizontal">
<TextBlock>+</TextBlock>
<TextBlock Text="{Binding ......}" /> <!-- Should show number of items in ItemsControl that are outside view, using CalendarMonthDayEventsItemsPanel.OutsideViewportCount -->
<TextBlock>more items</TextBlock>
</StackPanel>
</StackPanel>
I Created a custom Panel, the CalendarMonthDayEventsItemsPanel, and I use that panel as the itemspanel of the ItemsControl. In the panel's layout code, I determine how many items (panel childs) are outside the bounds of the panel. The property OutsideViewportCount contains the number of items that are outside of the visible bounds of the CalendarMonthDayEventsItemsPanel.
Now I want to show the value of OutsideViewportCount in a TextBlock that's below the ItemsControl.
This means I have to create some kind of binding, but everything I tried doesn't work.
Does someone have a solution or a better approach to achieve the same result?
Maybe you can make use of Tag property of ItemsPanel to relay the value of ItemsPanel as a workaround.
<ItemsControl x:Name="A"
ItemsSource="{Binding Appointments}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<local:CalendarMonthDayEventsItemsPanel OutsideViewportCount="{Binding RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}, Path=Tag, Mode=OneWayToSource}"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
...
</ItemsControl>
<StackPanel Orientation="Horizontal">
<TextBlock>+</TextBlock>
<TextBlock Text="{Binding ElementName=A, Path=Tag, Mode=OneWay}"/>
<TextBlock>more items</TextBlock>
</StackPanel>
i am working on state machine test design tool, but i am facing issue with dragging and drop the added nodes in the design panel. Since these nodes are added in the run-time. i can not implement the drag drop event for each added node , knowing that i am using WPF with caliburn.micro platform and MVVM
XAML code
<!-- Column 2 : Design panel-->
<StackPanel x:Name="DesignPanelState" Grid.Row="1" Grid.Column="2" Grid.RowSpan="2" >
<ItemsControl x:Name="Nodes" MouseLeftButtonDown="Nodes_MouseLeftButtonDown">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1" Margin ="3" Padding="3">
<StackPanel Orientation="Vertical" MouseMove="Nodes_MouseMove">
<Button x:Name="NodeIdx" Content="{Binding NodeName}" MinWidth="50" MinHeight="50"/>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
Image of UI
I found the answer of my question in https://www.codeproject.com/Articles/15354/Dragging-Elements-in-a-Canvas
I integrated class DragCanvas.cs into my project and included following line in the header of the XAML file
xmlns:jas="clr-namespace:WPF.JoshSmith.Controls"
and XAML code became
<!-- Column 2 : Design panel-->
<jas:DragCanvas x:Name="DesignPanelState"
Grid.Column="2" Grid.RowSpan="3"
AllowDragging="{Binding ElementName=Move, Path=IsChecked}"
AllowDragOutOfView="False">
<ItemsControl x:Name="Nodes">
<ItemsControl.ItemsPanel >
<ItemsPanelTemplate >
<Canvas AllowDrop="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate >
<DataTemplate>
<Button x:Name="NodeIdx" BorderBrush="Aquamarine" BorderThickness="1" Content="{Binding NodeName}" MinWidth="50" MinHeight="50"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</jas:DragCanvas>
Am using listbox control in WPF its display listbox item in row wise but I want to display in column wise ( Something like bootstrap grid)
XMAL
<ListBox x:Name="lb_items">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10 0 0 0">
<Image Source="{Binding ImageSource}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Am binding Listbox from code behind
lb_items.ItemsSource = modules.ToList();
Try this one.
<ListBox x:Name="lb_items">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10 0 0 0">
<Image Source="{Binding ImageSource}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
ListBox has property called ItemsPanel, which determines how items are rendered.
Somewhere in application resource create different ItemsPanelTemplate, so you can easily reuse it:
<ItemsPanelTemplate x:Key="WrapPanelTemplate">
<WrapPanel />
</ItemsPanelTemplate>
<ItemsPanelTemplate x:Key="HorizontalStackPanelTemplate">
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
then you can easily use it:
<ListBox ItemsPanel="{StaticResource HorizontalStackPanelTemplate}">...
<ItemControl ItemsPanel="{StaticResource WrapPanelTemplate}">...
always put such assets into application resources in order to make the code for your views clean and readable.
Extra Tip:
Here is animated WrapPanel, that animates items, when you resize window or an item is inserted to the list:
<ItemsPanelTemplate x:Key="FluidWrapPanel">
<WrapPanel>
<i:Interaction.Behaviors>
<ei:FluidMoveBehavior AppliesTo="Children" Duration="0:0:0.5">
<ei:FluidMoveBehavior.EaseY>
<SineEase EasingMode="EaseInOut" />
</ei:FluidMoveBehavior.EaseY>
<ei:FluidMoveBehavior.EaseX>
<CubicEase EasingMode="EaseInOut" />
</ei:FluidMoveBehavior.EaseX>
</ei:FluidMoveBehavior>
</i:Interaction.Behaviors>
</WrapPanel>
</ItemsPanelTemplate>
dont forget to include these xml namespaces:
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
I am migrating an old application and am trying to implement MVVM. The old application has a similar interface to the one described in this post. Although it is slightly simpler. I am not too worried about following MVVM exactly, but I would like to use this as a chance to practice.
I have the following class:
public class LineViewModel
{
public ObservableCollection<LinePoint> Points {get;}
public Geometry LineGeometry {get;}
}
In my application view model I have a collection of lines and I would like to draw these on a Canvas, but I would also like to draw the points that make up each line.
Here is my XAML so far:
<ItemsControl ItemsSource="{Binding Lines}">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type local:LineViewModel}">
<Path StrokeThickness="2.0" Stroke="Black" Data="{Binding LineGeometry}" />
</DataTemplate>
<DataTemplate DataType="{x:Type local:LinePoint}">
<Ellipse StrokeThickness="1.0" Stroke="Black" Fill="MistyRose" Width="8.0" Height="8.0" />
</DataTemplate>
</ItemsControl.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
I can see the line being drawn and this seems to be working fine. As you can see I have added the template for the points but I do not know how to setup the XAML to draw these. How can I draw the points as well?
Pulling out the Points from the line and exposing these from the application view model seems counter intuitive since it is the LineViewModel that looks after the points in a line - not the application. I would rather not disassociate the points from the lines if I can help it.
Thanks
I'd suggest to create a view model with a single property for the points of a line
class LineViewModel
{
public PointCollection LinePoints { get; set; }
}
class ViewModel
{
public IEnumerable<LineViewModel> Lines { get; set; }
}
Then you could have a nested ItemsControl in the DataTemplate of your "outer" ItemsControl like shown below, which uses a Polyline to draw the line and a collection of Path elements with EllipseGeometries for the circles.
<ItemsControl ItemsSource="{Binding Lines}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas>
<Polyline Points="{Binding LinePoints}"
StrokeThickness="2.0" Stroke="Black"/>
<ItemsControl ItemsSource="{Binding LinePoints}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Path StrokeThickness="1.0" Stroke="Black" Fill="MistyRose">
<Path.Data>
<EllipseGeometry Center="{Binding}"
RadiusX="4" RadiusY="4"/>
</Path.Data>
</Path>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
In case you have to use your LineViewModel as is, you may write the ItemTemplate like shown below, with a binding converter that converts your LinePoint to Point for the Center of the EllipseGeometry.
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas>
<Path StrokeThickness="2.0" Stroke="Black" Data="{Binding LineGeometry}" />
<ItemsControl ItemsSource="{Binding Points}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Path StrokeThickness="1.0" Stroke="Black" Fill="MistyRose">
<Path.Data>
<EllipseGeometry
Center="{Binding
Converter={StaticResource LinePointConverter}}"
RadiusX="4" RadiusY="4"/>
</Path.Data>
</Path>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
I am working on c# xaml using silverlight and i am bit confused about the hierarchy of this xaml code:
<UserControl.Resources>
<this:MyValueConverter x:Key="TabConverter"/>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="Green">
<ItemsControl ItemsSource="{Binding Path=TabList, Mode=OneWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas></Canvas>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Width="150" Background="red" Height="100" Canvas.Left="{Binding TabList, Mode=TwoWay, Converter={StaticResource TabConverter}}" Canvas.Top="100" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
When i run it gives a big green color window(sorry if technical names are not correct), whereas it should also show red color somewhere in same window as it has Border Width="150" Background="red" .Could some one please explain me what this code is doing ?
ItemsControl really just binds to a list and applies a datatemplate (border with background red) for each item in the list. As for the reason you're only seeing green, well there's probably nothing in the TabList property on your viewmodel. That way, nothing in the items template renders, and all you see is green.
You'll need to make sure that TabList is bound correctly (it exists on your datacontext, whether that's a view model or not) and that it has items in it.
Here's a simpler version of what you may want to accomplish:
<Grid x:Name="LayoutRoot" Background="Green">
<ItemsControl ItemsSource="{Binding Path=TabList, Mode=OneWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Width="150" Background="red" Height="100" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>