Hello I have a question about polylines in WPF. How to highlight points in polyline, for example lines are red, but points in mypolyline.Points are blue?
A Polyline can't do that out of the box, since it renders as a collection of connected line segments only.
You could however add an ItemsControl that renders the points like shown below. It uses Line elements of zero length, but with round start and end caps to show a dot.
<Polyline x:Name="polyline" Points="10,10 50,50 90,10" Stroke="Red"/>
<ItemsControl ItemsSource="{Binding Points, ElementName=polyline}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Line Stroke="Blue" StrokeThickness="5"
StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Related
I coded a list that has as an Itemsource an Observable Collection, which is of type Grids. So the listview is containing 4 Items (Grids). I want the Grids to be like horizontal next to each other, so I tried this in Xaml.
<StackPanel Orientation="Horizontal">
<ListView ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollMode="Enabled" ItemsSource="{Binding DropGrids, Source={StaticResource view}}" Height="100" x:Name="DropList" RenderTransformOrigin="0.5,0.5" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
<AppBarButton Icon="MapPin" Label="Go!" HorizontalAlignment="Right"></AppBarButton>
</StackPanel>
But when I try scrolling the list to the left it is instantly going back (If you want to simulate is use WGA resolution 4 Inch Emulator) and I can't see the fourth Grid on the screen. How do I fix this?
The ListView.ItemsPanel property I got from this post:
Stackoverflow Post - Horizontal Mode
Not sure on the Grid part in your ListView itemsource, but I blogged about how to create a Horizontal ListView here
http://depblog.weblogs.us/2015/03/25/show-items-scrolling-horizontally-with-listview-in-winrt/
I hope this helps...
The complete style is set as
<Style x:Name="BaseListViewStyle" TargetType="ListView">
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Disabled"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
I have to create custom list box the same as on the picture.
I've created UpDown control for each item in list box. But I need to have two columns in list box if will be many items. If it will be two columns, they must be separated as on the picture and each of the column should have border with round corners.
Code for list box is below:
<Style TargetType="{x:Type ListBox}" x:Key="ListBoxService">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate DataType="{x:Type model:Service}">
<Border
x:Name="border"
VerticalAlignment="Center"
BorderThickness="0, 0, 0, 2"
BorderBrush="{StaticResource CommonBackgroundColor}">
<view:ServiceUpDown/>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<UniformGrid Columns="2" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
</Style>
Thanks for any help.
Not a solution for your exact problem, but maybe this can get you started:
<ListBox
ItemsSource="{Binding Items}"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Margin"
Value="0 0 20 0" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
I have set the ListBox' ItemsPanel to a vertical oriented WrapPanel, so once it filled up one "column" in the ListBox it will just wrap into another column.
I have disabled the vertical scrollbar of the ListBoxsince otherwise it would have infinite vertical space, thus the WrapPanelwould never wrap.
This example will wrap the items into additional columns, once all the vertical space of the ListBox has been used. Depending of the vertical size of your listbox and the amount of items there might also be a third or fourth column, when required. You can use the ItemContainerStyle to separate the columns, though this does not resolve the requirement of the rounded borders.
I am trying to figure out how I can have a layer system for my app. I am adding images to an itemscontrol and they are all rendering one on top of the other.
<ItemsControl Name="canvasDataBinding"
HorizontalAlignment="Center"
Height="512"
Width="512"
VerticalAlignment="Center"
ClipToBounds="True">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="Transparent"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Image Source="{Binding Name}"
Width="{Binding Width}"
Height="{Binding Height}">
</Image>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
For testing purposes, I tried adding Panel.Zindex="{Binding Zind}" inside the image control, and decrementing Zind every time a new image was added to the collection, but the images still render on top of each other.
I also thought about having multiple collections, each collection would be its own layer. I dont know how I would implement this with my current code though.
Edit:
I added an ItemContainerStyle:
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Panel.ZIndex" Value="{Binding Zindex}" />
</Style>
</ItemsControl.ItemContainerStyle>
Again I am binding the value of ZIndex to an int that I decrement before the image is added to the collection. It is still rendering one on top of the other.
You need to set your Canvas.Top, Canvas.Left, and Panel.ZIndex in the ItemContainerStyle so the property gets applied to the <ContentPresenter> that wraps each Image.
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Top" Value="{Binding Y}" />
<Setter Property="Canvas.Left" Value="{Binding X}" />
<Setter Property="Panel.ZIndex" Value="{Binding Zindex}" />
</Style>
</ItemsControl.ItemContainerStyle>
When your ItemsControl gets rendered, it actually renders like this
<Canvas>
<ContentPresenter>
<Image />
</ContentPresenter>
<ContentPresenter>
<Image />
</ContentPresenter>
<ContentPresenter>
<Image />
</ContentPresenter>
</Canvas>
which is why it doesn't work to set the property on the <Image> itself.
I need to draw many rectangles(~50000). Currently I'm using the following approach.
<ItemsControl ItemsSource="{Binding Elements}" IsHitTestVisible="False" Background="Transparent">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas IsItemsHost="True"
Background="Transparent"
Width="500"
Height="500">
</Canvas>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Bottom" Value="{Binding Y}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type models:Element}">
<Rectangle Width = "{Binding Width}"
Height = "{Binding Height}"
Fill= "{Binding Brush}"
SnapsToDevicePixels="True" >
</Rectangle>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
The problem is that it takes a very long time to draw this amount of rectangles.
Is there a better way to draw a large amount of shapes?
Wpf has a pretty inefficient rendering engine, and 50000 shapes are way too much for it, even without the binding overhead.
Take a short look at this document: WPF rendering system
Instead, consider to use a drawing API such as Direct2D, which is compareably well accessible from WPF: Direct2D with WPF
I'm trying to databind to this ItemsControl:
<ItemsControl ItemsSource="{Binding Path=Nodes, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
By using this DataTemplate, I'm trying to individually position my Node elements on the Canvas correctly:
<DataTemplate DataType="{x:Type Model:EndNode}">
<Controls:EndNodeControl Canvas.Left="{Binding Path=XPos}" Canvas.Top="{Binding Path=YPos}" />
</DataTemplate>
However, it's not working as expected. All my node elements are drawn on top of each other in the same position. Any suggestions on how to accomplish this?
The attached properties only work on direct children of the Canvas. ItemsControl will place ContentPresenter controls as its direct children, so you might want to add a style for that as well:
<ItemsControl ItemsSource="{Binding Path=Nodes}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding Path=XPos}" />
<Setter Property="Canvas.Top" Value="{Binding Path=YPos}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>