XAML 更改 svg 的源路径答案

【问题标题】：XAML changing the source path of an svgXAML 更改 svg 的源路径
【发布时间】：2019-03-03 19:06:19
【问题描述】：

我正在尝试实现一个从 OWM (OpenWeatherMap) 请求天气数据并显示温度以及适合外面天气的天气图标的应用程序。 OWM 为适配图标提供图标 ID。然后，您可以通过特定的 Web 路径访问这些图标。在我的应用程序中显示这些图标效果很好。由于 OWM 提供的图标分辨率较低，我决定使用矢量图形，并将其保存在应用程序目录中。使用此代码直接显示这些矢量图形

<Image Source="Assets/WeatherIcons/01d.svg" Height="300" HorizontalAlignment="Right"/>

工作得很好。但是我想根据 OWM 提供的图标 id 来调整使用的源。我目前的代码如下所示：
MainPage.xaml：

<Page
    x:Class="starting.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:starting"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Black"
          PointerPressed="WakeUp">

        <StackPanel x:Name="WeatherInformation"
                    Visibility="Collapsed">

            <Image x:Name="WeatherIcon"
                   Height="300"
                   HorizontalAlignment="Right"/>

            <TextBlock Foreground="White"
                       TextAlignment="Center">

                <Run x:Name="Temperature" FontSize="90"/>
                <LineBreak/>
                <Run x:Name="WeatherDescription" FontSize="50"/>

            </TextBlock>

        </StackPanel>
    </Grid>
</Page>

MainPage.xaml.cs：

using System;
using System.Globalization;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media.Imaging;

namespace starting
{
    public sealed partial class MainPage : Page
    {
        private DispatcherTimer modeTimer = new DispatcherTimer();

        public MainPage()
        {
            this.InitializeComponent();
            updateWeather(this, this);

            modeTimer.Tick += new EventHandler<object>(Sleep);
            modeTimer.Interval = new TimeSpan(0, 1, 0);

            DispatcherTimer updateWeatherTimer = new DispatcherTimer();
            updateWeatherTimer.Tick += new EventHandler<object>(updateWeather);
            updateWeatherTimer.Interval= new TimeSpan(0, 30, 0);
            updateWeatherTimer.Start();
        }

        private void updateWeather(object sender, object e)
        {
            WeatherApp.WeatherAPI myWeatherApi = new WeatherApp.WeatherAPI("Friedrichshafen,de");
            OpenWeatherMapType.WeatherStream data = myWeatherApi.GetForecast();
            WeatherIcon.Source = new BitmapImage(new Uri("ms-appx:///Assets/WeatherIcons/" + data.Weather[0].Icon + ".svg"));
            Temperature.Text = Math.Round(data.Main.Temp).ToString() + "°C";
            WeatherDescription.Text = data.Weather[0].Description;
        }

        private void Sleep(object sender, object e)
        {
            StandByTime.Visibility = Visibility.Visible;
            ActiveTime.Visibility = Visibility.Collapsed;
            WeatherInformation.Visibility = Visibility.Collapsed;
            modeTimer.Stop();
        }

        private void WakeUp(object sender, PointerRoutedEventArgs e)
        {
            StandByTime.Visibility = Visibility.Collapsed;
            ActiveTime.Visibility = Visibility.Visible;
            WeatherInformation.Visibility = Visibility.Visible;
            modeTimer.Start();
        }
    }
}

当我启动应用程序时，没有出现天气图标的迹象。这怎么可能？

【问题讨论】：

您可能对这个链接感兴趣 - stackoverflow.com/questions/43304896/…
另外，您是否使用不同的文件格式进行了测试以确保问题不在其他地方？即"ms-appx:///Assets/WeatherIcons/" + data.Weather[0].Icon + ".png"
我已经用 .png 文件对其进行了测试，但它也不起作用。但它适用于引用 OWM 的相应在线地址的路径。
就像我上面提到的，在 xaml 文件中对源路径进行硬编码就可以了。图片的高度似乎无关紧要。如果我把它排除在外也没关系。

标签： c# xaml uwp uwp-xaml

【解决方案1】：

它似乎像这样工作正常：
MainPage.xaml：

<Page>
    <Grid>
        <Image Height="300">
            <Image.Source>
                <SvgImageSource x:Name="WeatherIconSource"/>
            </Image.Source>
        </Image>
    </Grid>
</Page>

MainPage.xaml.cs：

private void updateWeather(object sender, object e)
{
    WeatherApp.WeatherAPI myWeatherApi = new WeatherApp.WeatherAPI("Friedrichshafen,de");
    OpenWeatherMapType.WeatherStream data = myWeatherApi.GetForecast();
    WeatherIconSource.UriSource = new Uri("ms-appx:///Assets/WeatherIcons/" + data.Weather[0].Icon + ".svg");
}

【讨论】：