Изменить содержимое UserControl из кода страницы позади

Question

Итак, у меня есть пользовательский элемент управления:

<StackPanel Orientation="Vertical"
                Margin="10">
        <StackPanel Orientation="Horizontal"
                    HorizontalAlignment="Stretch"
                    Margin="10">
            <TextBlock Text="{x:Bind FileName, Mode=OneTime}"
                       HorizontalAlignment="Left"/>
            <TextBlock Text="{x:Bind DownloadSpeed, Mode=OneWay}" 
                       HorizontalAlignment="Right"/>
        </StackPanel>

        <ProgressBar Name="PbDownload"
                     HorizontalAlignment="Stretch" />

        <TextBlock Text="{x:Bind DownloadCompletePercent, Mode=OneWay}"/>

    </StackPanel>

Код пользовательского элемента управления:

public sealed partial class UCDownloadCard : UserControl
    {
        public UCDownloadCard()
        {
            this.InitializeComponent();
        }

        public string FileName { get; set; }
        public string DownloadSpeed { get; set; }
        public string DownloadCompletePercent { get; set; }
    }

Я пытаюсь показать состояние загрузки файла с помощью этого пользовательского элемента управления.Всякий раз, когда начинается новая загрузка, я хочу программно добавить новый пользовательский элемент управления и затем обновлять значения в нем по мере загрузки.

В настоящее время я делаю что-то вроде этого:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    public CancellationTokenSource CancellationTokenSource { get; set; }
    public List<DownloadOperation> ActiveDownloads { get; set; } = new List<DownloadOperation>();
    public List<UCDownloadCard> AddedCards { get; set; } = new List<UCDownloadCard>();


    private async Task HandleDownloadAsync(DownloadOperation downloadOperation, CancellationToken cancellationToken = new CancellationToken())
    {
        ActiveDownloads.Add(downloadOperation);
        ...
        ...

        try
        {
            AddDownloadProgressCard();
            await downloadOperation.StartAsync().AsTask(CancellationTokenSource.Token, progressCallback);                
        }

        finally
        {
            ...
            ...
        }
    }

    private void AddDownloadProgressCard()
    {
        var card = new UCDownloadCard
        {
            Name = $"Card{AddedCards.Count}",
            FileName = "Filename.pdf",
            DownloadCompletePercent = "0% completed",
            DownloadSpeed = "0 KB/s"
        };

        AddedCards.Add(card);
        OutputArea.Children.Add(card);
    }

    private void DownloadProgressChanged(DownloadOperation downloadOperation)
    {   
        var downloadPercent = 100 * ((double)downloadOperation.Progress.BytesReceived / (double)downloadOperation.Progress.TotalBytesToReceive);
        this.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.High, () =>
        {
            AddedCards[0].DownloadCompletePercent = downloadPercent.ToString();
            Debug.WriteLine($"Updating Progress: {downloadPercent}%");
        });

    }    
}

Я могу добавить UserControl к OutputArea, но значения в нем не обновляются.Но я уверен, что AddedCards[0].DownloadCompletePercent = downloadPercent.ToString(); выполняется несколько раз, потому что Debug.WritLine чуть ниже его фактически печатает в окне вывода.

Как я могу обновить значения в UserControl?

Answer 1

Во-первых, вы должны изменить UserControl с помощью x: Bind Mode=TwoWay. См. {x: Bind} расширение разметки для получения более подробной информации.

Тогда выследует реализовать интерфейс INotifyPropertyChanged и реализовать событие PropertyChanged .Код, на который вы можете ссылаться на событие PropertyChanged .

Вот простой пример, вы можете иметь ссылку.

UserControl.xaml,

<StackPanel Orientation="Vertical"
            Margin="10">
    <StackPanel Orientation="Horizontal"
                HorizontalAlignment="Stretch"
                Margin="10">
    <TextBlock Text="{x:Bind DownloadCompletePercent, Mode=TwoWay}"/>
</StackPanel>

UserControl.xaml.cs,

public sealed partial class UCDownloadCard : UserControl, INotifyPropertyChanged
    {
        public UCDownloadCard()
        {
            this.InitializeComponent();
        }
        private string downloadCompletePercent;
        public string DownloadCompletePercent
        {
            get
            {
                return downloadCompletePercent;
            }
            set
            {
                downloadCompletePercent = value;
                RaisePropertyChanged("DownloadCompletePercent");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void RaisePropertyChanged(string name)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(name));
            }
        }
    }

Затем вы можете добавить этот UserControl и обновить его downloadCompletePercent,

В MainPage.xaml.cs,

private void DownloadProgress(DownloadOperation obj)
{
    BackgroundDownloadProgress currentProgress = obj.Progress;
    double percent;
    if (currentProgress.TotalBytesToReceive > 0)
    {
        percent = currentProgress.BytesReceived * 100 / currentProgress.TotalBytesToReceive;
        Debug.WriteLine(percent);
        uCDownloadCard.DownloadCompletePercent = percent.ToString();
    }
}

UCDownloadCard uCDownloadCard;
private void Button_Click_2(object sender, RoutedEventArgs e)
{
    uCDownloadCard = new UCDownloadCard();
    MainPagePanel.Children.Add(uCDownloadCard);
}