将RichEditBox绑定到.rtf文件

时间:2016-07-03 06:32:35

标签: c# data-binding uwp azure-storage-blobs uwp-xaml

这是我正在处理的对象:

class TopNews
{
    public string Id { get; set; }
    public string Title { get; set; }
    public string ImageURI { get; set; }
    public string BodyUri { get; set; }
}

BodyURI将是一个字符串,其中包含一个包含.rtf文件的Azure Blob的地址,例如:https://richeditbox.blob.core.windows.net/testformat.rtf是一个可能在BodyURI上的字符串。

到目前为止,这是我的XAML布局:

<ListView Grid.Row="1">
        <ListView.ItemTemplate>
           <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image />
                    <RichEditBox TextWrapping="WrapWholeWords"
                                 IsReadOnly="True" 
                                 IsColorFontEnabled="True"/>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

它遗漏了很多,但我想要做的是将Azure Blob存储中的.rtf文件的内容绑定到我的XAML布局中的RichEditBox控件。

现在,到目前为止,我对此所做的所有研究都向我展示了当然必须有一些过程。

  1. 我必须为blob设置下载:

    Uri bloburi = new Uri("https://richeditbox.blob.core.windows.net/testformat.rtf");
    CloudBlockBlob cBlob = new CloudBlockBlob(bloburi);
    
  2. 我还发现了如何在RichTextBox上加载.rtf文件的内容:

    richEditBox.Document.SetText(TextSetOptions.FormatRtf, await cBlob.DownloadTextAsync());
    
  3. 我该怎么做?我在想我可以创建一个新类,比如这个:

    class TopNewsProcessed
    {
        public string Id { get; set; }
        public string ImageURI { get; set; }
        public string Title { get; set; }
        public RichEditBox Body { get; set; }
    }
    

    这样我就可以运行下载.rtf文件的过程,然后只需在RichEditBox中设置它,但我不知道如何将它绑定到我的XAML上的RichEditBox布局。这是一个好主意吗?如果是,那我该怎么绑?我是否必须将BodyRichEditBox更改为其他内容?

1 个答案:

答案 0 :(得分:4)

  

这样我就可以运行下载.rtf文件的过程,然后在RichEditBox中设置它,但是我不知道如何将它绑定到我的XAML布局上的RichEditBox

创建附加属性是正确的方向,基于BabaAndThePigman在此link

中提供的解决方案

我为您的场景修改了附加属性:

public class RtfText
{
    public static string GetRichText(DependencyObject obj)
    {
        return (string)obj.GetValue(RichTextProperty);
    }

    public static void SetRichText(DependencyObject obj, string value)
    {
        obj.SetValue(RichTextProperty, value);
    }

    // Using a DependencyProperty as the backing store for RichText.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty RichTextProperty =
        DependencyProperty.RegisterAttached("RichText", typeof(string), typeof(RtfText), new PropertyMetadata(string.Empty, callback));

    private static async void callback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var reb = (RichEditBox)d;
        Uri bloburi = new Uri((string)e.NewValue);
        CloudBlockBlob cBlob = new CloudBlockBlob(bloburi);
        var blobstr = await cBlob.DownloadTextAsync();
        reb.Document.SetText(TextSetOptions.FormatRtf, blobstr);
    }
}

对于Model,您不需要更改,只需保留BodyUri字符串属性。

查看:

<ListView ItemsSource="{Binding Data}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding Title}" />
                    <StackPanel Orientation="Horizontal">
                        <RichEditBox local:RtfText.RichText="{Binding BodyUri}"
                                     TextWrapping="WrapWholeWords"
                                     IsColorFontEnabled="True"/>
                    </StackPanel>
                </StackPanel>

            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

请注意,在您看来,RichEditBox的IsReadOnly属性设置为&#34; true &#34;,这将导致&#34; 拒绝访问&#34;此行的异常:RichEditBox.Document.SetText(...)

请在here

中查看我已完成的示例

<强>截图: screenshot