如何绑定到图像源?

时间:2018-09-22 05:14:57

标签: sqlite gridview data-binding uwp uwp-xaml

我正在将图书馆管理软件作为个人项目制作。主页上有一个框架,该框架可以导航到“ YourBooks_View”。 YourBooks_View具有显示主要内容的GridView。问题是除了书的封面图像外,其他所有东西都可以完美地结合在一起。

这是SQLite数据库: SQLite database

这是示例网格视图的屏幕截图:

enter image description here

注意:图片的位置肯定存在 proof of existence of the image

这是'YourBooks_View.xaml':

<StackPanel>

    <CommandBar>
        <AppBarButton Icon="Add" 
                      Label="New Book"
                      Click="NewBook_Click"/>

        <AppBarButton Icon="Delete"
                      Label="Remove a Book"
                      Click="DeleteBook_Click"/>
    </CommandBar>

    <GridView ItemsSource="{x:Bind Path=ViewModel.Books, Mode=OneWay}">
        <GridView.ItemTemplate>
            <DataTemplate x:DataType="data:Book">

                <StackPanel>
                    <Image Width="200" Height="200" Source="{x:Bind Path=CoverImageLocation, Mode=OneWay}" />

                    <StackPanel Orientation="Horizontal">
                        <StackPanel>
                            <TextBlock FontSize="16" Text="{x:Bind Path=Title, Mode=OneWay}" />
                            <TextBlock FontSize="10" Text="{x:Bind Path=Author, Mode=OneWay}" />
                        </StackPanel>

                        <TextBlock FontSize="20" Text="{x:Bind Path=Quantity, Mode=OneWay}"
                                   VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
                    </StackPanel>
                </StackPanel>

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

这是'YourBooks_View.xaml.cs':

public sealed partial class YourBooks_View : Page
{
    private BooksViewModel ViewModel { get; set; }

    public YourBooks_View()
    {
        this.InitializeComponent();
        ViewModel = new BooksViewModel();
    }

    private void NewBook_Click(object sender, RoutedEventArgs e)
    {

    }

    private void DeleteBook_Click(object sender, RoutedEventArgs e)
    {

    }
}

这是我的模型(又名BooksViewModel):

public class BooksViewModel
{
    private ObservableCollection<Book> books { get; set; }

    public ObservableCollection<Book> Books
    {
        get { return this.books; }

        set
        {
            this.books = value;
        }
    }


    public BooksViewModel()
    {
        books = DataAccess.GetBooks();
    }
}

DataAccess是静态类。 GetBooks()方法读取数据库并返回Book类型的Observable Collection。这是Book类:

public class Book
{
    public string Title { get; set; }
    public string Author { get; set; }
    public string Publisher { get; set; }
    public string ISBN { get; set; }
    public int Quantity { get; set; }
    public string CoverImageLocation { get; set; }
}

1 个答案:

答案 0 :(得分:0)

由于沙箱操作,似乎未显示该图片。我创建了一个新的示例项目,并将图像位置粘贴到了源代码中。没用

然后,我将该图像添加到资产中,然后将源更改为“ Assets /(Image name.jpg)”,并且可以正常工作。