使用MVVM以编程方式创建XAML画布

本文关键字：创建 XAML 画布 方式 编程 MVVM 使用 | 更新日期: 2023-09-27 18:03:11

我使用Elysium框架来使用ApplicationBar控件，我想使它的CommandButton动态为我的视图。因此，我将其ItemsSource属性绑定到ObservableCollection<CommandButton>，每个视图将创建自己的操作。

在使用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>

这就是我如何在我的视图上创建一个动作

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

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

请记住我使用的是MVVM

编辑:

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

使用MVVM以编程方式创建XAML画布

如果你在你的ViewModel中存储CommandButton的集合，这是一个UiElement，那么你已经打破了MVVM的主要"规则"之一:在ViewModel中没有视图。如果你真的想走MVVM路线，将你的集合更改为某种数据类型，然后用DataTemplates在XAML中处理UI控件(CommandButton, Canvas等)的设置。如果你想坚持当前的方向，那么你不妨在创建CommandButton的同时创建并分配Canvas。

您的集合数据项看起来像什么都取决于每个按钮上需要设置的不同。如果您考虑手动创建一组按钮，那么每个按钮之间不同的每个属性都应该绑定到该按钮的数据项上的字段。数据可以像字符串的集合一样简单。这可以用于每个按钮上的不同光栅图像(许多不同的位置选项):

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

那么你的ItemsControl绑定到它会设置它的ItemTemplate像这样:

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

绑定现在使用集合中的字符串。这显然是一个简单的例子，你可以做很多其他的变化:更复杂的数据对象有很多属性，更复杂的模板有很多绑定，在同一个ItemsControl上有多个数据模板，无论是模板DataType还是模板TemplateSelector，等等。

相关文章：