如何在用户控件 WPF MVVM 中呈现动态 Xaml 字符串？答案

【问题标题】：How to Render Dynamic Xaml String in User Control WPF MVVM?如何在用户控件 WPF MVVM 中呈现动态 Xaml 字符串？
【发布时间】：2016-12-02 07:46:13
【问题描述】：

我根据获取的数据创建了多行两列的网格。现在我有一个 Xaml 字符串。如何在加载时在我的用户控件中呈现。必须从我的视图模型中渲染。如何做到这一点？

真实场景，

我将收到来自数据库的图像数量。必须在每行中显示两个图像。但我无法创建恒定的行数。因为它将基于动态数据。如果数据是 10 我必须创建 5 行，更少意味着行也会减少。

所以我计划根据数据在 Viewmodel 中创建 xaml。但是如何在我的用户控件中呈现它。

【问题讨论】：

这完全没有必要。您也可以以编程方式创建 UI 元素，而不是解析一段 XAML。或者更好的是，将与布局相关的属性添加到您的视图模型，并使用 ItemsControl 与适当的 ItemsPanel 和 ItemContainerStyle，绑定到视图模型属性。
只需创建一个自定义 UserControl 即可从 ViewModel 获取图像并处理所有布局。在 ViewModel 中创建 UI 不是 MVVM。

标签： wpf xaml mvvm data-binding grid

【解决方案1】：

这是一个解决方案，

查看模型：

public class ViewModel : PropertyChangedMonitor
    {
        ObservableCollection<ImageModel> _imageList;
        public ViewModel()
        {
            _imageList = new ObservableCollection<ImageModel>();
            ImageList.Add(new ImageModel { ImageName = "/ImageLoad;component/Images/1.png" });
            ImageList.Add(new ImageModel { ImageName = "/ImageLoad;component/Images/2.png" });
            ImageList.Add(new ImageModel { ImageName = "/ImageLoad;component/Images/3.png" });
            ImageList.Add(new ImageModel { ImageName = "/ImageLoad;component/Images/4.png" });
            ImageList.Add(new ImageModel { ImageName = "/ImageLoad;component/Images/5.png" });
            Columns = 2;
        }



        public ObservableCollection<ImageModel> ImageList
        {
            get
            {
                return _imageList;
            }

        }


        private int _column;

        public int Columns
        {
            get
            {
                return _column;
            }
            set
            {
                if (_column != value)
                {
                    _column = value;
                    OnPropertyChanged("Columns");
                }

            }
        }
    }

图像模型类：

public class ImageModel
    {
        public string ImageName { get; set; }
    }

还有你的用户控制：

<UserControl x:Class="ImageLoad.ImageDisplay"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:ImageLoad"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:ImageLoad"
             d:DesignHeight="300"
             d:DesignWidth="300"
             mc:Ignorable="d">
    <UserControl.DataContext>
        <vm:ViewModel />
    </UserControl.DataContext>
    <Grid>
        <ItemsControl ItemsSource="{Binding ImageList}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="{Binding Columns, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding ImageName}" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</UserControl>

希望这会奏效

【讨论】：

感谢@MANIKANDAN NAGALAKSHMI。它有效。