Question

引言

所以，伙计们，我正在制作一个显示音符的应用程序，例如：

enter image description here

问题解释

好的，对于＆＃34;绘制图像＆＃34;，它必须分解为某些部分（因为它不可能给出＆＃34;预先格式化的图像，因为音乐符号真的很多），如下。

enter image description here

THE CLASSES

让我们说＆＃34; Red＆＃34;是一个＆＃34; NoteHead＆＃34;，＆＃34; Blue＆＃34;是一个＆＃34; NoteBeam＆＃34;和＆＃34;黄＆＃34;是一个＆＃34; NotePole＆＃34;。鉴于这些，这些是我的模型类：

public class MainWindowVM : ViewModelBase
{
    public ObservableCollection<Mockup> MockupCollection { get; set; } 
}

public abstract class Mockup 
{ 
    public Point TopLeftCanvasCoordinate { get; set; }
}

public class NoteHead : Mockup 
{
    //A note can be black or transparent filled
    public SolidColorBrush NoteFill { get; set; } 
}

public class NoteBeam : Mockup 
{ 
    public Point LineStartCoordinate { get; set; }
    public Point LineEndCoordinate { get; set; }
    public double LineThickness { get; set; }
}

public class NotePole : Mockup 
{
    public Point LineStartCoordinate { get; set; }
    public Point LineEndCoordinate { get; set; }
    public double LineThickness { get; set; }
}

让我们假设上面的Point类同时X和Y都是double，而不是int。

XAML

注意页面总是绑定到椭圆

<Ellipse Width="10" Height="10" Fill="{Binding NoteFill}" Stroke="Black" StrokeThickness="1"> <Ellipse.RenderTransform> <SkewTransform AngleX="-15" CenterX="5" CenterY="5"/> </Ellipse.RenderTransform> </Ellipse>
NotePole和NoteBeam始终绑定到行

<Line X1="{Binding LineStartCoordinate.X}" Y1="{Binding LineStartCoordinate.Y}" X2="{Binding LineEndCoordinate.X}" Y2="{Binding LineEndCoordinate.Y}" Stroke="Black" StrokeThickness="{Binding LineThickness}"/>

假设上面的所有Canvas.Top和Canvas.Left放在ItemsControl部分

所以，我想使用ItemsControl的原因是因为我不知道画布中会绘制多少Mockup个。它完全不同。

1 ItemsControl可包含多于1个音乐符号。（它毕竟没有限制）。只要它绑定的集合有100个项目（在Head，Pole和Beam之间混合），它就会将它们全部绘制到Canvas中。（顺便说一下，如果你理解音乐，那么1个画布包含1个小节/小节，否则它对解决方案来说并不重要）

问题

如何正确构建ItemsControl以表示此类结构？ *我认为问题在于形状变化，Ellipse或Line。因为据我所知，DataTemplate只能包含1 UIElement。
如何正确地＆＃34;附加＆＃34; ItemsControl中的控件的画布属性？ 我读了这篇similar SO帖子，但是当我试用它时，它不起作用。请在解决方案中包含Canvas属性的设置。

附加说明

也许我瞄准的解决方案看起来像这样。它可能不是我所知道的正确的。只是为了让你更清楚地了解solutin应该是什么样子。

    <ItemsControl Grid.Column="0" Grid.Row="0">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="Canvas.Left" 
                        Value="{Binding Path=TopLeftCanvasCoordinate.X}" />
                <Setter Property="Canvas.Top" 
                        Value="{Binding Path=TopLeftCanvasCoordinate.Y}" />
            </Style>
        </ItemsControl.ItemContainerStyle>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <!--THIS SHOULD BE FILLED WITH MOCKUP (HEAD / POLE / BEAM)-->
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

感谢您阅读这篇长篇文章。

在各种位置上使用ItemsControl在Canvas上绘制各种对象

0 个答案: