主页 / 问题 / 1151887
Accepted
axmed2004
Asked:2020-07-12 16:07:46 +0000 UTC2020-07-12 16:07:46 +0000 UTC

基于数据的 WPF ItemsControl 模板

  • 772

该列表可以包含 2 种类型的元素：文本和链接。ObservableCollection 可能包含相应不同的对象，带有type="url"或type="text"

class Item
{
    string type;
    string title;
    string titleshort;
    string time;
}

collection.Add(new Item{type="url",title="http://url",time=datetime});
collection.Add(new Item{type="text",title="text text text ....", titleshort="text ..." ,time=datetime});

<ItemsControl>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel IsItemsHost="True"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border>
                <TextBlock Tag="{Binding title}"
                           Cursor="Hand"
                           TextWrapping="Wrap">
                    <Run Text="{Binding titleshort}" PreviewMouseDown="openTextFromHistory"/>
                    <Run Text="{Binding timeblock}"/>
                </TextBlock>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

В случае url шаблон должен быть таким:  

<Border>
    <TextBlock>
        <Hyperlink NavigateUri="{Binding title}">
            <Run Text="{Binding title}"/>
        </Hyperlink>
        <Run Text="{Binding time}"/>
    </TextBlock>
</Border>

В случае text таким:  

<Border>
    <TextBlock Tag="title" PreviewMouseLeftButtonDown="somemethod">
        <Run Text="{Binding titleshort}"/>
        <Run Text="{Binding time}"/>
    </TextBlock>
</Border>

如何插入所需的模板取决于type？


MainWindow.xaml 中的UPD命名空间：

x:Class="RemoteControl.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:RemoteControl"
mc:Ignorable="d"
wpf

1 个回答

  1. Best Answer

    这通常使用从同一“祖先”继承的不同类来完成。

    以您的两种类型text和为例url：

    • URL - 让这个类有一个打开链接的命令，在设计上它将是一个可点击的按钮。
    • 文本 - 将是能够为示例设置字体大小的纯文本。

    因此，对于初学者来说，我们认为它们的共同点是一个简单的文本，无论是 hehttp://site.ru还是 he Это обычный текст，这意味着我们可以制作一个界面（如果你不需要共同的逻辑），或者一个类，我们将从它们继承。

    public interface ITextProperty
{
    public string Text { get; set; }
}

    这一切都足以让我们继续我们的工作。
    接下来，我们需要包含文本或链接所需的所有内容的类：

    class TextProperty : ITextProperty
{
    public TextProperty(string text, double fontSize)
        => (Text, FontSize) = (text, fontSize);
    public string Text { get; set; }
    public double FontSize { get; set; }
}

class UrlProperty : ITextProperty
{
    public UrlProperty(string url) 
        => (Text, OpenCommand) = (url, new RelayCommand(Open)); 

    public string Text { get; set; }

    public ICommand OpenCommand { get; }
    public void Open() => Process.Start(Text);
}

    正如你所看到的，这是两个最简单的类，我们可以在文本中设置一个额外的大小，链接有一个简单的命令来打开这个链接。

    现在让我们制作文本数据。这里我们需要一个包含我们继承的接口/类的集合，在我们的例子中是ITextProperty.

     public ObservableCollection<ITextProperty> Items { get; }

    让我们添加几个测试数据：

    Items = new ObservableCollection<ITextProperty>
{
    new TextProperty("Привет мир!", 17),
    new UrlProperty("http://google.ru"),
    new TextProperty("Привет мир!", 8)
};

    唯一剩下的就是 UI，我们需要让 XAML 理解这一点并为每个对象提供我们需要的设计。为此目的，它是完美DataTemplate的，它允许您直接指定将应用指定样式的所需类型。一般是在资源里面设置的，我会在Grid收藏展示所在的资源里面做。我们最终得到了这个：

    <Grid>
    <Grid.Resources>
        <DataTemplate DataType="{x:Type local:TextProperty}">
            <TextBlock Text="{Binding Text}" FontSize="{Binding FontSize}" Margin="5"/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:UrlProperty}">
            <Button Background="Transparent" 
                    BorderThickness="0 0 0 1"
                    Content="{Binding Text}" 
                    Command="{Binding OpenCommand}"
                    Cursor="Hand"/>
        </DataTemplate>
    </Grid.Resources>
    <ItemsControl ItemsSource="{Binding Items}" HorizontalAlignment="Center"/>
</Grid>

    我们推出并欣赏结果

    结果

    该程序成功显示了两个大小不同的文本和一个可点击的按钮，并通过浏览器打开了指定的链接。

    这是最优化和最方便的（就我而言）选项，如何做到这一点。当然，它不是唯一的，你可以直接拿你的代码，其中有一个对象，区别在于一个属性，这是通过触发器完成的，例如：

    <DataTrigger Binding="{Binding Type}" Value="Text">
    <!-- Дизайн -->                     
</DataTrigger>

    总之，祝你学业顺利。
    顺便说一句，如果您需要突出显示文本中的所有链接，那么这是通过完全不同的方法完成的。

    • 4

相关问题