如何在Metro/Rt中實現這種剃鬚刀概念（局部視圖）？

我對Wpf/Metro/RT很新穎（我已經做了一些東西，但沒有太多），並且我試圖實現這種效果，我可以將對象傳遞給頁面/局部視圖以使其呈現在主頁上，並可能根據傳遞的對象的內容遞歸呈現它。我很抱歉，這是相當教科書，我只是有一個很難解釋它所以這裏的我怎麼可能在剃刀接近這樣一個例子：如何在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中實現這種效果？

來源

2014-08-31 Sinaesthetic

您可以實現類似的結合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或定義專用的「CommentsView」 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 ）

來源

2014-09-01 11:24:23 Pragmateek

如何在Metro/Rt中實現這種剃鬚刀概念（局部視圖）？

回答

相關問題