XAML 当< Line>DataContext是设计示例时,如何在视图中显示带列表的ItemsControl?

e5nszbig  于 2022-12-31  发布在  其他
关注(0)|答案(1)|浏览(164)

我在视图中显示线条(系统、窗口、形状)时遇到问题。我有一个“放大镜”视图,中间有一个硬编码的x轴和y轴,我应该在轴上添加“比例尺”(见下图的简化草图)。比例尺是动态的,因为它们的位置取决于正在放大的对象的状态。
picture of magnifying glass with scale bars
我目前使用列表来收集我的行。列表属性本身似乎在运行时被正确地创建。我已经设法通过在视图中硬编码来显示具有与列表中相同的x和y值的行,所以数据本身似乎没有任何问题。
由于视图模型缺少一个无参数构造函数,DataContext是一个设计示例。这让我很头疼,因为我不能通过代码隐藏访问视图模型(DataContext总是null)。我希望使用ItemsControl作为我的行列表仍然可以工作,但到目前为止我还没有运气。
有人知道为什么我不能显示这些线吗?有没有其他方法可以更好地从一个视图模型到另一个模型获取数据?
代码的精简版本,包括ItemsControl:

  • 查看:*
<Window x:Class="MagnifyingGlass.MagnifyingGlassWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    d:DataContext="{d:DesignInstance Type=local:MagnifyingGlassViewModel, IsDesignTimeCreatable=False}">

    <Window.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="DataTemplate" DataType="{x:Type local:MagnifyingGlassViewModel}">
                <Grid>
                    <ItemsControl ItemsSource="{Binding Path=ScaleBars}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Line X1="{Binding X1}" Y1="{Binding Y1}" X2="{Binding X2}" Y2="{Binding Y2}" Stroke="Black" StrokeThickness="1" Stretch="None"/>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>

                    <Line X1="0" X2="1" Stretch="Fill" Stroke="Black" StrokeThickness="1"/> //the hardcoded y-axis
                    <Line Y1="0" Y2="1" Stretch="Fill" Stroke="Black" StrokeThickness="1"/> //the hardcoded x-axis
                </Grid>
            </DataTemplate>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <ContentControl Content="{Binding}" ContentTemplate="{StaticResource DataTemplate}"/>
    </Grid>
</Window>
  • 主视图模型:*
namespace MagnifyingGlass
{
    public class MagnifyingGlassViewModel : NotificationObject
    {
        public List<Line> ScaleBars => MagnifyingPlotViewModel.ScaleBars;
        public MagnifyingPlotViewModel MagnifyingPlotViewModel { get; }
        public MagnifyingGlassViewModel(lots of parameters here)
        {
            MagnifyingPlotViewModel = new MagnifyingPlotViewModel(parameters going here);
            Bind(() => ScaleBars, () => MagnifyingPlotViewModel.ScaleBars);
        }
    }
}
  • 视图模型提供主视图模型,其中包含有关正在放大的内容的详细信息:*
namespace MagnifyingGlass
{
    public sealed class MagnifyingPlotViewModel : PlotViewModel
    {
        public List<Line> ScaleBars => GetScaleBars();

        public MagnifyingPlotViewModel(parameters…) 
            : base(parameters…)
        {
            _scaleBars = new List<Line>();

            // Bind adds INotifyPropertyChanged bindings so that target (first parameter) is updated/notified on dependant (source) properties (following parameters).
            Bind(() => SourceToMagnify, 
                () => Lots, () => Of, () => Other, () => Properties);
            Bind(() => ScaleBars, () => SourceToMagnify);
        }

        public Rect SourceToMagnify
        {
            get
            { 
                return new Rect(new Point(leftOffset, 0), new Point(rightOffset, height));
            }
        }

        private List<Line> GetScaleBars()
        {
            _scaleBars.Clear();

            for (int i = centerX; i >= 0; i -= Delta)
            {
                _scaleBars.Add(new Point(i - (Delta), centerY));
            }

            return _scaleBars;
        }
    }
}
avwztpqn

avwztpqn1#

我已经设法自己解决了这个问题!当调试应用程序时,我注意到VS中有一个我从未见过的标签(XAML绑定失败)。在那里,我可以看到消息:
“对于已经属于ItemsControl容器类型的项,忽略ItemTemplate和ItemTemplateSelector;类型='线路'”
因此,我在创建线条时,在MagnifyingPlotViewModel中(而不是在xaml中)将拉伸设置为无,并将颜色设置为黑色。然后,列表中的第一条线条显示在放大镜中。
阅读this post后,我将我的ItemsControl更新为以下内容,现在它工作得很完美!

<ItemsControl ItemsSource="{Binding Path=ScaleBars}">
   <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
         <Canvas Background="Transparent"/>
      </ItemsPanelTemplate>
   </ItemsControl.ItemsPanel>
</ItemsControl>

相关问题