Question

我是Wpf / Metro / RT的新手（我做过一些东西，但并不多），我正在尝试实现这种效果，我可以将对象传递给页面/局部视图来获取它在主页面上渲染，并可能根据传递的对象的内容递归渲染。我很抱歉，这是一本非常好的教科书，我只是很难解释它，所以这里有一个例子，说明我如何用剃刀来解决这个问题：

<!-- Parent View -->
@model MyProject.Thread
<div class="thread">
    <div class="comment-block">
        @Html.LabelFor(m => m.Title, new { @class="label"})
        @Html.LabelFor(m => m.Title, new { @class="label"})
        @Html.LabelFor(m => m.Body, new { @class="label"})
    </div>
    <div class="indent-replies">
        @for(var comment in Model.Comments)
        {
            @Html.Partial("_CommentPartial", comment)
        }
    </div>
</div>

<!-- Partial View -->
@model MyProject.Comment
<div class="comment-block">
    <div class="comment">
        @Html.LabelFor(m => m.Author, new { @class="label"})
        @Html.LabelFor(m => m.Comment, new { @class="label"})
    </div>
    <div class="indent-replies">    
        @for(var comment in Model.Comments)
        {
            @Html.Partial("_CommentPartial", comment)
        }
    </div>
</div>

那么这里发生了什么？想想Reddit。它从一个线程开始，线程有注释。并且每个评论都可以有回复，每个回复都可以有回复，等等永远和永远;这就是我所说的递归。

我在想我可能需要创建一个用户控件，但乍一看，我看不出它会如何实现。我觉得我需要使用该用户控件创建自定义数据源，但我不知道。所以我的问题是：

如何在Metro / RT中实现此效果？

Answer 1

您可以通过将UserControl与某些ItemsControls相结合来实现类似的功能。

以下是我使用过的模型：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace TreeViewSample
{
    public class Comment
    {
        public string Text { get; set; }

        public IEnumerable<Comment> Comments { get; set; }
    }

    public class MainViewModel
    {
        public IEnumerable<Comment> Comments { get; set; }

        public MainViewModel()
        {
            Comments = new[]
            {
                new Comment
                {
                    Text = "root comment #1",
                    Comments = new[]
                    {
                        new Comment
                        {
                            Text = "comment #1 #1",
                            Comments = new[]
                            {
                                new Comment
                                {
                                    Text = "comment #1 #1 #1"
                                }
                            }
                        },
                        new Comment
                        {
                            Text = "comment #1 #2"
                        }
                    }
                },
                new Comment
                {
                    Text = "root comment #2",
                    Comments = new[]
                    {
                        new Comment
                        {
                            Text = "comment #2 #1",
                        }
                    }
                }
            };
        }
    }
}

这是UserControl：

XAML：

<UserControl
    x:Class="TreeViewSample.CommentView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TreeViewSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    <Grid x:Name="root" Margin="10,10,0,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <StackPanel Background="Gray">
            <AppBarButton Icon="Upload" IsCompact="True"></AppBarButton>
            <AppBarButton Icon="Download" IsCompact="True"></AppBarButton>
        </StackPanel>
        <Border Background="Gray" VerticalAlignment="Stretch" Grid.Column="1">
            <TextBlock FontSize="30" VerticalAlignment="Center" Text="{Binding Comment.Text}"></TextBlock>
        </Border>
        <ItemsControl Grid.Column="1" Grid.Row="1" ItemsSource="{Binding Comment.Comments}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <local:CommentView Comment="{Binding}"></local:CommentView>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</UserControl>

代码背后：

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace TreeViewSample
{
    public sealed partial class CommentView : UserControl
    {
        public Comment Comment
        {
            get { return (Comment)GetValue(CommentProperty); }
            set { SetValue(CommentProperty, value); }
        }

        public static readonly DependencyProperty CommentProperty = DependencyProperty.Register("Comment", typeof(Comment), typeof(CommentView), new PropertyMetadata(null));        

        public CommentView()
        {
            this.InitializeComponent();

            root.DataContext = this;
        }
    }
}

主页：

XAML：

<Page
    x:Class="TreeViewSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TreeViewSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.DataContext>
        <local:MainViewModel></local:MainViewModel>
    </Page.DataContext>
    <Grid Margin="0,100,0,0" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ItemsControl ItemsSource="{Binding Comments}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <local:CommentView Comment="{Binding}"></local:CommentView>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Page>

如果您多次重复使用此类视图，则可以共享此DataTemplate或定义专用的＆＃34; CommentsView＆＃34; UserControl也是。

代码背后：

using Windows.UI.Xaml.Controls;

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

结果：

Awesome!

请注意WinRT XAML Toolkit中有TreeView个实现（您可以直接从 Visual Studio 安装 NuGet ）

如何在Metro / Rt中实现这个剃刀概念（部分视图）？

1 个答案: