Question

我在PointCollections中有一组ObservableCollection，我可以将其显示为一组折线，如下所示：

class A_model
{
    public readonly ObservableCollection<B> = new ObservableCollection<B>();
}
public class AViewModel : BaseViewModel // implements INotifyPropertyChanged
{
    private A_Model m_Model = new A_Model;
    public ObservableCollection<BViewModel> Bees {get {return m_Model.Bees;} }
}
class B_Model
{
    public readonly PointCollection Trail = new PointCollection();
}
public class BViewModel: BaseViewModel
{
    private B_Model m_Model = new B_Model();
    public PointCollection Trail { get{ return m_Model.Trail; } }
}

XAML代码：

<!-- DataContext = AViewModel -->
<Grid>
<ItemsControl ItemsSource="{Binding Bees}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type vm:BViewModel}">
                <Polyline StrokeThickness="1" Stroke="Green">
                    <Polyline.Style>
                        <Style TargetType="{x:Type Polyline}">
                            <Setter Property="Points">
                                <Setter.Value>
                                    <MultiBinding Converter="{StaticResource pointMultiConverter}">
                                        <Binding Path="ActualWidth" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type Canvas}}"/>
                                        <Binding Path="ActualHeight" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type Canvas}}"/>
                                        <Binding Path="Trail"/>
                                    </MultiBinding>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Polyline.Style>                        
                </Polyline>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

现在，我想在每条折线的每个点上显示一个小圆圈。我该怎么做？

Answer 1

我没有对此进行过测试，但从理论上讲，您可以尝试使用一些ItemsControl将所有点渲染为圆圈。每个点都是一个项目，应该呈现为圆形。此解决方案不需要任何代码：

<DataTemplate DataType="{x:Type vm:BViewModel}">
   <Grid>
     <Polyline StrokeThickness="1" Stroke="Green" Name="lines">
         <!-- your code unchanged here -->
     </Polyline>
     <ItemsControl ItemsSource="{Binding Points, ElementName=lines}"> 
        <ItemsControl.ItemsPanel>
           <ItemsPanelTemplate>
              <Canvas/>
           </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
          <DataTemplate>
             <Ellipse Width="20" Height="20" Canvas.Left="{Binding X}"
                      Canvas.Top="{Binding Y}" Fill="Red">
                <Ellipse.RenderTransform>
                   <TranslateTransform X="-10" Y="-10"/>
                </Ellipse.RenderTransform>
             </Ellipse>
          </DataTemplate>
        </ItemsControl.ItemTemplate>
     </ItemsControl>
   </Grid>
 </DataTemplate>

在一组折线的每个点显示圆圈

1 个答案: