Question

我想使用通用Windows平台在FlipView中显示保存在SQL Server Management Studio中的图像。使用图像路径，图像的数据类型为nvarchar。

我在最后一条记录中放入了图像URL，以测试我的代码是否确实通过了数据库。

做到了！
它只显示最后一个记录，即图像网址：

所以我不知道为什么它不能显示使用图像路径保存在数据库中的图像。请帮助！另外，如果我的编码没有意义，我们深表歉意。我对编程很陌生：/

MainPage.html：

<FlipView x:Name="TheFlipView" SelectionChanged="DisplayedItemChanged" HorizontalAlignment="Stretch" Margin="-117,66,0,0"
        Grid.Row="1"
        Grid.ColumnSpan="3"
        VerticalAlignment="Stretch"  Height="1000" Width="1392">
    <FlipView.ItemTemplate>
        <DataTemplate >
            <Grid Margin="0,0,0,10">
                <Image HorizontalAlignment="Center"  VerticalAlignment="Top"   Source="{Binding ImgPath}" 

                       Stretch="Fill" Margin="123,0,0,0" Width="1269" Height="899" />
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

MainPage.xaml.cs：

namespace TMD_Display.Views
{
    public sealed partial class MainPage : Page
    {
        private string connectionString = @"Server=LAPTOP-IQQCR1C1\SQLEXPRESS;Database=SampleDB;User Id=alish;Password=polylife16;";

        //Make a place to store the timer
        private readonly DispatcherTimer _timer;

        //Make a place to store the last time the displayed item was set
        private DateTime _lastChange;
        public int Id { get; set; }

        public string ImgPath { get; set; }
        public MainPage()
        {
            InitializeComponent();

            //Configure the timer
            _timer = new DispatcherTimer
            {
                //Set the interval between ticks (in this case 2 seconds to see it working)
                Interval = TimeSpan.FromSeconds(2)
            };

            //Change what's displayed when the timer ticks
            _timer.Tick += ChangeImage;
            //Start the timer
            _timer.Start();
        }

        protected override async void OnNavigatedTo(NavigationEventArgs e)
        {
            var images = await GetImagesAsync();

            base.OnNavigatedTo(e);
        }

        public async Task<IEnumerable<Models.Images>> GetImagesAsync()
        {
            using (var conn = new SqlConnection(connectionString))
            {
                conn.Open();

                var images = await conn.QueryAsync<Models.Images>(
                    @"SELECT ImgId As Id,ImgPath 
                    FROM ImageSave");
                TheFlipView.ItemsSource = images;
                //This is the code to be changed
                return images;
            }
        }

        private void ChangeImage(object sender, object o)
        {
            //Get the number of items in the flip view
            //var totalItems = TheFlipView.Items.Count;

            var totalItems = TheFlipView.Items.Count;
            //Figure out the new item's index (the current index plus one, if the next item would be out of range, go back to zero)
            var newItemIndex = (TheFlipView.SelectedIndex + 1) % totalItems;

            //Set the displayed item's index on the flip view
            TheFlipView.SelectedIndex = newItemIndex;
        }

        private void DisplayedItemChanged(object sender, SelectionChangedEventArgs e)
        {
            //Show the time deltas...
            var currentTime = DateTime.Now;

            if (_lastChange != default(DateTime))
            {
                TimeDelta.Text = (currentTime - _lastChange).ToString();
            }

            _lastChange = currentTime;

            //Since the page is configured before the timer is, check to make sure that we've actually got a timer
            if (!ReferenceEquals(_timer, null))
            {
                _timer.Stop();
                _timer.Start();
            }
       }
  }

Image.cs：

namespace TMD_Display.Models
{
    public class Image
    {
        public int Id { get; set; }

        //public string Name { get; set; }

        //public DateTime FirstAppearance { get; set; }

        public string ImgPath { get; set; }
    }
}

Answer 1

尽管您的绑定代码不完整，但是我认为问题不在绑定代码中。您可能不知道UWP app具有应用程序数据文件夹和安装文件夹。如果将图像放在项目的“ Assets / Images /”文件夹中，则它实际上是安装文件夹。然后，如果要从那里获取文件。您需要在URI中使用“ ms-appx：///”前缀。

因此，如果您从数据库中获得ImgPath值，例如'/Images/1.jpg'。在代码中，您应该向其中添加ms-appx:///Assets/。

请检查以下代码示例以供参考：

<FlipView x:Name="FlipView">
        <FlipView.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding ImgPath}"></Image>
            </DataTemplate>
        </FlipView.ItemTemplate>
</FlipView>

public sealed partial class MainPage : Page
{
    public ObservableCollection<Test> tests { get; set; }
    public MainPage()
    {
        this.InitializeComponent();
        string path = "/Images/animals.jpg";
        tests = new ObservableCollection<Test>() { new Test() {ImgPath="ms-appx:///Assets/"+path } };
        FlipView.ItemsSource = tests;
    }
}

public class Test
{
    public String ImgPath { get; set; }
}

如何在SQL Server的flipview中显示图像

1 个答案: