c# - 使用 MVVM 以编程方式创建 XAML Canvas

Question

我正在使用 Elysium使用 ApplicationBar 的框架控制，我想做它CommandButton我的观点是动态的。所以，我绑定(bind)了它的ItemsSource属性到 ObservableCollection<CommandButton>每个 View 都会创建自己的 Action 。

使用前Elysium我有这个按钮:

<Button>
    <Canvas Width="60" Height="60" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
        <Path Width="27.854" Height="31.076" Canvas.Top="14" Fill="White" 
              Data="F1 M 51.5487,37.9814L 56.814,41.0534L 50.3383,48.7636L 50.3383,48.8841L 60.0205,46.9565L 60.0205,53.0403L 50.2777,51.414L 50.2777,51.5344L 56.814,59.0037L 51.4882,62.0757L 47.978,52.7994L 47.8569,52.7994L 44.4072,62.0757L 39.2025,59.0037L 45.6782,51.4742L 45.6177,51.3537L 36.1159,53.0403L 36.1159,46.9565L 45.5571,48.8841L 45.5571,48.7636L 39.2025,41.1137L 44.5888,37.9814L 47.9174,47.3179L 48.0385,47.3179L 51.5487,37.9814 Z M 20,17L 43.25,17L 56,29.75L 56,39L 52,36.75L 52,34L 39,34L 39,21L 24,21L 24,55L 41,55L 37.5,59L 20,59L 20,17 Z M 43,22.25L 43,30L 50.75,30L 43,22.25 Z " Canvas.Left="17.24" Stretch="Fill"/>
    </Canvas>
</Button>

这就是我在 View 上创建 Action 的方式。

CommandButtonList.Add(new CommandButton
{
    Header = "new version"
});

我想知道是否可以创建 <Canvas>以编程方式？如果是，那又如何？

请记住，我使用的是 MVVM

编辑:

每个 Action 都有不同的 <Canvas>和 <Path>

Answer 1

如果您要存储 CommandButton 的集合，这是一个 UiElement ，在要绑定(bind)的 ViewModel 中，您已经违反了 MVVM 的主要“规则”之一:ViewModel 中没有 View 。如果您真的想走 MVVM 路线，请将您的集合更改为某种数据类型，然后使用 CommandButton 在 XAML 中处理 UI 控件(Canvas、DataTemplates 等)的设置.如果您想坚持当前的方向，那么您不妨创建并分配 Canvas就在CommandButton创建。

您的集合数据项的外观完全取决于需要在每个按钮上进行不同设置的内容。如果您考虑手动创建一组按钮，则每个不同的属性都应该绑定(bind)到该按钮的数据项上的一个字段。数据可以像字符串集合一样简单。这可以用于每个按钮上的不同光栅图像(许多不同的位置选项):

CommandButtonList = new ObservableCollection<string>
{
    "http://foo.com/image1.jpg",
    @"c:\images\image2.jpg",
    "/ProjectImages/image3.jpg"
};

然后你的 ItemsControl绑定(bind)到它的会设置它的 ItemTemplate像这样:

<DataTemplate>
    <Button>
        <Image Source="{Binding}"/>
    </Button>
</DataTemplate>

绑定(bind)现在使用集合中的字符串。这显然是一个简单的例子，你可以做很多额外的变化:更复杂的数据对象有很多属性，更复杂的模板有很多绑定(bind)，多个数据模板在同一个 ItemsControl通过任一模板 DataType或 TemplateSelector ， ETC。