C# - 通过 x:Bind 添加 XAML 元素到 UWP 应用程序

Question

上下文：我正在编写 UWP Twitter 客户端。

Twitter returns 通过其 API 提供的有用数据之一是可以在推文中直接 link 编辑内容的对象 - #hashtags、@usernames、$符号和 URL。这使得从包含推文全文的字符串中提取这些对象变得容易，以便将它们变成 links.

我明白 XAML 需要如何使用 <run> 和 <hyperlink> 标签来寻找这个，我已经弄清楚如何动态创建 XAML对于每个推文对象。

我想不通的是如何将我生成的 XAML 注入到我的应用程序的 DataTemplate 中。因为推文内容需要在应用程序的多个页面上显示，所以我使用 ResourceDictionary 来保存我所有的 XAML 样式，包括我的 DataTemplate。所以，我完全不确定如何将我生成的 XAML 连接到我的应用程序的 UI.

例如，如果推文如下所示：

"Hey @twitter, you're a time waster! #FridayFeeling"

我生成的 XAML 对象如下所示：

<Run>Hey </Run>
<Hyperlink link="http://twitter.com/twitter/">@twitter</Hyperlink>
<Run>, you're a time waster! </Run>
<Hyperlink link="http://twitter.com/search?hashtag=FridayFeeling">#FridayFeeling</Hyperlink>

如果推文的文本中没有 link 的内容，那么我可以按原样使用 Tweet.Text，所以我试图将其绑定到 TextBox。我如何处理动态插入此 XAML？

我是否坚持完全放弃数据绑定并循环遍历我的集合以编程方式添加我所有的 XAML？

这是我的数据模板：

<DataTemplate x:Key="TweetTemplate" x:DataType="tweeter:Tweet2">
    <Grid Style="{StaticResource ListItemStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" x:Name="RetweetedBy" x:Load="{x:Bind IsRetweet}" Height="28">
            <StackPanel Orientation="Horizontal" Padding="4 8 4 0">
                <StackPanel.Resources>
                    <Style TargetType="TextBlock">
                        <Setter Property="FontSize" Value="12"/>
                        <Setter Property="Foreground" Value="{ThemeResource SystemControlPageTextBaseMediumBrush}" />
                    </Style>
                </StackPanel.Resources>
                <Border Height="28">
                    <TextBlock Height="24" FontFamily="{StaticResource FontAwesome}" xml:space="preserve"><Run Text="&#xf079;&#160;"/></TextBlock>
                </Border>
                <TextBlock Text="{x:Bind Path=User.Name}" />
                <TextBlock Text=" retweeted"/>
            </StackPanel>
        </Grid>
        <Grid Grid.Row="1">
            <StackPanel Orientation="Horizontal" Padding="5">
                <TextBlock Text="{x:Bind Path=Tweet.User.Name}" Margin="0 0 8 0"  FontWeight="Bold" />
                <TextBlock Text="{x:Bind Path=Tweet.User.ScreenName, Converter={StaticResource GetHandle}}" Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}" />
                <TextBlock Text="&#x2981;" Margin="8 0" />
                <TextBlock Text="{x:Bind Path=Tweet.CreationDate, Converter={StaticResource FormatDate}}" />
            </StackPanel>
        </Grid>
        <Grid Grid.Row="2">
            <TextBlock Text="***this is where I'm having problems***" Padding="5" TextWrapping="WrapWholeWords"/>
        </Grid>
        <Grid Grid.Row="3">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="2.5*" MaxWidth="100"/>
                <ColumnDefinition Width="2.5*"/>
                <ColumnDefinition Width="2.5*"/>
                <ColumnDefinition Width="2.5*"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0">
                <Button x:Name="cmdComment" Content="&#xf075;" Style="{StaticResource MetaButtons}" />
            </Grid>
            <Grid Grid.Column="1">
                <Button x:Name="cmdRetweet" Content="&#xf079;" Style="{StaticResource MetaButtons}" />
            </Grid>
            <Grid Grid.Column="2">
                <Button x:Name="cmdLike" Content="&#xf004;" Style="{StaticResource MetaButtons}" />
            </Grid>
            <Grid Grid.Column="3">
                <Button x:Name="cmdMessage" Content="&#xf0e0;" Style="{StaticResource MetaButtons}" />
            </Grid>
        </Grid>
    </Grid>
</DataTemplate>

Answer 1

如果您想使用附加的属性，这里有一个例子：

public static class Twitter
{
    public static readonly DependencyProperty InlinesProperty = DependencyProperty.RegisterAttached(
        "Inlines", typeof(ICollection<Inline>), typeof(Twitter), new PropertyMetadata(default(ICollection<Inline>), PropertyChangedCallback));

    private static void PropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (!(d is TextBlock tb)) return;

        tb.Inlines.Clear();

        if (!(e.NewValue is ICollection<Inline> inlines)) return;

        foreach (var inline in inlines)
        {
            tb.Inlines.Add(inline);
        }
    }

    public static void SetInlines(DependencyObject element, ICollection<Inline> value)
    {
        element.SetValue(InlinesProperty, value);
    }

    public static ICollection<Inline> GetInlines(DependencyObject element)
    {
        return (ICollection<Inline>) element.GetValue(InlinesProperty);
    }
}

并且在 xaml 中：

        <TextBlock local:Twitter.Inlines ="{x:Bind TwitterData}"></TextBlock>

其中 TwitterData 是 List<Inline>

C# - 通过 x:Bind 添加 XAML 元素到 UWP 应用程序

C# - Adding XAML elements to UWP app via x:Bind

c#

datatemplate

uwp

xbind

uwp-xaml