2016-10-02 56 views
0

我需要帮助我的代码。我想实现的布局像下面 enter image description hereUWP应用动态透视MVVM总是创建viewmodel的新实例

形象到目前为止,我已经创建了一个UWP的Windows 10的应用程序,它看起来像下面这样 my app

我使用Vb.net,但C#也受到欢迎。试图遵循Mvvm模式,也不使用额外的mvvm框架 - 只是xaml行为。

我的最终目标是能够双击一个页面,然后创建一个新的选项卡,并将头部绑定到页面名称。出于测试目的,我添加了一个添加页面并添加标签按钮,因为双击无法正常工作。每次将新项目添加到选项卡集合时,它都不会反映在ui中,因为数据模板正在创建我的viewmodel的新实例,这是我不想发生的事情。临时添加按钮调用正确的方法,并执行我想通过双击实现的功能。我张贴下面的代码的最短的例子。

<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="1"> 
         <Button Width="200" VerticalAlignment="Stretch" Content="Add Page" Foreground="White"> 
         <Interactivity:Interaction.Behaviors> 
          <Core:EventTriggerBehavior EventName="Click"> 
           <Core:CallMethodAction MethodName="AddPage" TargetObject="{Binding Mode=OneWay}"/> 
          </Core:EventTriggerBehavior> 
         </Interactivity:Interaction.Behaviors> 
        </Button> 
         <Button Width="200" VerticalAlignment="Stretch" Content="Add Tab" Foreground="White"> 
          <Interactivity:Interaction.Behaviors> 
           <Core:EventTriggerBehavior EventName="Click"> 
            <Core:CallMethodAction MethodName="AddSection" TargetObject="{Binding Mode=OneWay}"/> 
           </Core:EventTriggerBehavior> 
          </Interactivity:Interaction.Behaviors> 
         </Button> 
        </StackPanel> 
        <Pivot Grid.Column="1" Grid.Row="2" Foreground="White" ItemsSource="{Binding PivotItems, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" > 
         <Pivot.HeaderTemplate> 
          <DataTemplate> 
           <TextBlock Text="{Binding Name}" Foreground="White"/> 
          </DataTemplate> 
         </Pivot.HeaderTemplate> 
         <Pivot.ItemTemplate> 
          <DataTemplate> 
           <GridView ItemsSource="{Binding Result, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" > 
            <Interactivity:Interaction.Behaviors> 
             <Core:EventTriggerBehavior EventName="DoubleTapped"> 
              <Core:CallMethodAction MethodName="AddSection"/> 
             </Core:EventTriggerBehavior> 
            </Interactivity:Interaction.Behaviors> 
            <GridView.ItemTemplate> 
             <DataTemplate> 
              <Grid x:Name="CanvasControl" Background="#00000000" Width="200" Height="200" > 
               <Grid.RowDefinitions> 
                <RowDefinition Height="*"/> 
                <RowDefinition Height="8*"/> 
                <RowDefinition Height="*"/> 
                <RowDefinition Height="*"/> 
               </Grid.RowDefinitions> 
               <Grid.ColumnDefinitions> 
                <ColumnDefinition Width="*"/> 
                <ColumnDefinition Width="11*"/> 
                <ColumnDefinition Width="*"/> 
               </Grid.ColumnDefinitions> 

               <Canvas Grid.Column="1" Grid.Row="1" Margin="10" Background="White" DoubleTapped="Canvas_DoubleTapped" /> 


               <TextBox Grid.Column="1" Grid.Row="2" Foreground="White" FontSize="14" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}" Text="{Binding CanvasCollection[0].CanvasName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/> 
               <TextBlock Grid.Column="1" Grid.Row="0" Foreground="White" FontSize="12" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="10" IsHitTestVisible="False" Text="{Binding CanvasCollection[0].CanvasMaster}" /> 
              </Grid> 
             </DataTemplate> 
            </GridView.ItemTemplate> 

           </GridView> 

          </DataTemplate> 


         </Pivot.ItemTemplate> 
        </Pivot> 
       </Grid> 

视图模型

Public Class ProjectDataViewModel 

Implements INotifyPropertyChanged 

Private WindowData As New CanvasData 
Private randomdata As New DataGenerators 
Private m_PivotItems As New ObservableCollection(Of PivotSection) 
Private Canvas_Collection As New ObservableCollection(Of CanvasData) 
Private mycollection As New CanvasData 
Private pivotItem_Home As New PivotSection() With {.Name = "Home"} 

Private Sub NotifyPropertyChanged(Optional propertyName As String = "") 
    RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName)) 
End Sub 

Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged 

Public Property PropertyCollectionItemName As String 
    Get 
     Return WindowData.CanvasName 
    End Get 
    Set(value As String) 
     WindowData.CanvasName = value 
    End Set 
End Property 

Public Property PropertyCollectionItemMaster As String 
    Get 
     Return WindowData.CanvasMaster 
    End Get 
    Set(value As String) 
     WindowData.CanvasMaster = value 
    End Set 
End Property 

Public Property CanvasCollection As ObservableCollection(Of CanvasData) 
    Get 
     Return Canvas_Collection 
    End Get 
    Private Set(value As ObservableCollection(Of CanvasData)) 
     Canvas_Collection = value 
     NotifyPropertyChanged() 
    End Set 
End Property 

Public Property my_collection As CanvasData 
    Get 
     Return mycollection 
    End Get 
    Set(value As CanvasData) 
     mycollection = value 
     NotifyPropertyChanged() 
    End Set 
End Property 

Public Property PivotItems() As ObservableCollection(Of PivotSection) 
    Get 
     Return m_PivotItems 
    End Get 
    Set 
     m_PivotItems = Value 
     NotifyPropertyChanged() 
    End Set 
End Property 


Public Sub AddSection() 

    Dim pivotItem_New As New PivotSection() With {.Name = "Item Header " + PivotItems.Count.ToString} 
    m_PivotItems.Add(pivotItem_New) 


End Sub 
Public Sub AddPage() 
    Dim Newpage As New PivotItemContent 
    Newpage.CanvasCollection.Add(New CanvasData With {.CanvasName = "Page " + pivotItem_Home.Result.Count.ToString, .CanvasMaster = "Master "}) 
    pivotItem_Home.Result.Add(newpage) 
End Sub 


Sub New() 
    Dim indexPage As New PivotItemContent 
    PivotItems = New ObservableCollection(Of PivotSection) 
    PivotItems.Add(pivotItem_Home) 
    indexPage.CanvasCollection.Add(New CanvasData With {.CanvasName = "Home", .CanvasMaster = "Master"}) 

    pivotItem_Home.Result.Add(indexPage) 

End Sub 

PivotSection类

End Class 

Public Class PivotSection 
Implements INotifyPropertyChanged 
Private Sub NotifyPropertyChanged(Optional propertyName As String = "") 
    RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName)) 
End Sub 

Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged 
Public Property Name() As String 
    Get 
     Return m_Name 
    End Get 
    Set 
     m_Name = Value 
    End Set 
End Property 
Private m_Name As String 
Public Property SystemLabel() As String 
    Get 
     Return m_SystemLabel 
    End Get 
    Set 
     m_SystemLabel = Value 
    End Set 
End Property 
Private m_SystemLabel As String 
Public Property Result() As ObservableCollection(Of PivotItemContent) 
    Get 
     Return m_Result 
    End Get 
    Set 
     m_Result = Value 
     NotifyPropertyChanged() 
    End Set 
End Property 
Private m_Result As New ObservableCollection(Of PivotItemContent) 

'Public Sub New() 
' Result = New ObservableCollection(Of PivotGroup) 
'End Sub 
End Class 

PivotContent类

Public Class PivotItemContent 
Implements INotifyPropertyChanged 
Private Sub NotifyPropertyChanged(Optional propertyName As String = "") 
    RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName)) 
End Sub 

Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged 
Private Canvas_Collection As New ObservableCollection(Of CanvasData) 
Public Property CanvasCollection As ObservableCollection(Of CanvasData) 
    Get 
     Return Canvas_Collection 
    End Get 
    Private Set(value As ObservableCollection(Of CanvasData)) 
     Canvas_Collection = value 
     NotifyPropertyChanged() 
    End Set 
End Property 

Private Page_Name As String 
Public Property PageName As String 
    Get 
     Return Page_Name 
    End Get 
    Set(value As String) 
     Page_Name = value 
     NotifyPropertyChanged() 
    End Set 
End Property 

Private Page_Master As String 
Public Property PageMaster As String 
    Get 
     Return Page_Master 
    End Get 
    Set(value As String) 
     Page_Master = value 
     NotifyPropertyChanged() 
    End Set 
End Property 

End Class 

CavasDataclass

Imports Windows.UI 

Public Class CanvasData 
Implements INotifyPropertyChanged 


Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged 
Private Sub NotifyPropertyChanged(Optional propertyName As String = "") 
    RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName)) 
End Sub 


Private _CanvasMaster_Name As String 
Private _CanvasName As String 




Public Property CanvasMaster() As String 
    Get 
     Return _CanvasMaster_Name 
    End Get 
    Set(ByVal value As String) 
     _CanvasMaster_Name = value 
     NotifyPropertyChanged() 
    End Set 
End Property 


Public Property CanvasName As String 
    Get 
     Return _CanvasName 
    End Get 
    Set(value As String) 
     _CanvasName = value 
     NotifyPropertyChanged() 
    End Set 
End Property 
End Class 

回答

1

在这种情况下,您可以拥有一个TabList页面,该页面将包含所有打开的选项卡的GridView。每个项目将使用一个ItemTemplate,您可以在其中添加关闭按钮和预览。

为了能够打开一个标签,你可以在GridViewIsItemClickEnabled属性设置为true然后处理ItemClick事件知道被点击的选项卡用户。然后,您可以使用此信息导航到您创建的TabDetail页面。

创建新选项卡也很简单 - 只需在GridView中添加一个新项并直接导航至该项即可。