使用 MVVM 绑定自定义 ImageSource 路径答案

【问题标题】：Binding Custom ImageSource Path by using MVVM使用 MVVM 绑定自定义 ImageSource 路径
【发布时间】：2014-02-19 09:57:42
【问题描述】：

我正在开发一个购物目录，我是 MVVM 的菜鸟，所以请帮助我，是否可以在 ImageSource 中绑定自定义路径？这是我的基本代码：

景色？

public class CakeData
        {
            public string Cakename { get; set; }
            public ImageSource _imageSource { get; set; }

        }

还有数据源：

 public List<CakeData> _cakeData;
        public List<CakeData> CakeData
        {
            get
            {
                return _cakeData;
            }
            set
            {

                SetProperty(ref _cakeData, value);
            }
        }



    public CakeDataSource()
            {
                string commander = "select * from tblCakes where caketype='Cakes'";

                MySqlConnection connection = new MySqlConnection(GetConnectionString());
                MySqlCommand ds = new MySqlCommand(commander, connection);
                connection.Open();
                MySqlDataReader dt = ds.ExecuteReader();
                CakeData = new List<CakeData>();
                while (dt.Read())
                {
                    CakeName = dt.GetString("cakename");
                    ImageSource img= new BitmapImage(new Uri(@"D:\hunterZ Documents\Systems\UnderDevelopment\SweetApp\SweetApp\bin\Debug\AppX\cakeimages\keiki1.jpg", UriKind.Relative));
            CakeData.Add(new CakeData { Cakename = wew, _imageSource = img});//is it possible to apply the custom path like D:/pictures/blackforest.png?
                }
                dt.Close();

            }

这是我的 xaml 代码：

<page.DataContext>
<vm:CakeDataSource/>
</page.DataContext>

....
     <GridView.ItemTemplate>
                        <DataTemplate>
                            <Grid HorizontalAlignment="Left" Width="397" Height="248">
                                <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
                                    <Image Source="{Binding ImagePath}" Stretch="UniformToFill"/>//this is the picture that i want to modify`
                                </Border>
                                <StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
                                    <TextBlock x:Name="CakeName"  Text="{Binding Cakename}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>

                                </StackPanel>
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>

【问题讨论】：

我尝试直接绑定它，但出现空白图像。我认为可以使用解决方案中引用的图像（例如：资产）
请向我们展示您的 xaml 文件。无论如何，看看：stackoverflow.com/a/2574144/3257426。我还假设，您绑定到没有 ValueConverter 的属性？因此，您的输入错误 - ImageSource 不应为 string，而应为 ImageSource 类型。
意思是我将ImageSource变量声明为图像的“ImageSource”？
请向我们展示您的 XAML 代码..
我已经包含了我想要修改的图像的 xaml 代码。请保持答案尽可能简单，因为我是 mvvm 的菜鸟。我想一步一步清楚地理解它们。

标签： c# windows mvvm windows-runtime winrt-xaml

【解决方案1】：

正如我在 cmets 中发布的那样，您应该将名为 ImageSource 的属性类型更改为 type ImageSource：

public ImageSource ImageSource { get; set; }

然后，设置您的图像 - 例如在您的 ViewModel 的 ctor 中：

public MyViewModel()
{
    ImageSource = new BitmapImage(new Uri(@"path/to/your/image.jpg", UriKind.Relative));
}

路径必须相对于您的应用程序目录，否则使用像 @"C:\Path\To\My\Image.jpg" 这样的绝对路径并将 UriKind 设置为 Absolute。

请注意，如果您设置的 ImageSource 不在 ctor 中，则您的 ViewModel 需要实现 INotifyPropertyChanged 并为您的属性提高 PropertyChanged。

编辑：检查您的绑定！您的 Viewmodel 还提供了一个名为 ImageSource 的属性，您的视图绑定到 ImagePath

【讨论】：

谢谢，另一个问题我将如何添加我的列表，例如我用它来将 CakeData 添加到列表中： CakeData.Add(new CakeData { Cakename = Name, ImagePath = "image/path/这里.jpg"});它是否正确？ ..ImageSource img= new BitmapImage(new Uri(@"C:/path/to/picture/here.jpg", UriKind.Relative)); CakeData.Add(new CakeData { Cakename = wew, ImagePath = img});
CakeData 在您的示例中没有属性 ImagePath 。如果您的意思是 ImageSource，我已指示您摆脱字符串属性，将其更改为 ImageSource！
我已经编辑了我的代码，请检查我是否正确地执行它。
您提供了一个 absolute 路径（如您所见，您的路径以“D:\”.. 开头），并且您使用的是UriKind.Relative。使用UriKind.Absolute