Динамический сводный MVVM приложения UWP всегда создает новый экземпляр viewmodel

#xaml #mvvm #uwp #windows-10 #uwp-xaml

#xaml #mvvm #uwp #windows-10 #uwp-xaml

Вопрос:

Мне нужна помощь с моим кодом. Я пытаюсь добиться макета, как на изображении ниже введите описание изображения здесь

До сих пор я создал приложение UWP для Windows 10, и оно выглядит следующим образом мое приложение

Я использую Vb.net но C # также приветствуется. Попытка следовать шаблону Mvvm, а также не использовать дополнительные рамки mvvm — только поведение xaml.

Моя конечная цель — иметь возможность дважды щелкнуть страницу, а затем создать новую вкладку с привязкой заголовка к имени страницы. В целях тестирования я добавил добавить страницу и добавить кнопку вкладки, потому что двойной щелчок работает некорректно. Каждый раз, когда в коллекцию для вкладок добавляется новый элемент, это не отражается в пользовательском интерфейсе, потому что шаблон данных создает новый экземпляр моей 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>
  

Viewmodel

 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 Class

 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 все открытые вкладки. Каждый элемент будет использовать a ItemTemplate , в который вы можете добавить кнопку закрытия и предварительный просмотр.

Чтобы включить открытие вкладки, вы можете установить GridView для свойства ‘s IsItemClickEnabled true значение, а затем обработать ItemClick событие, чтобы узнать, какая вкладка была нажата пользователем. Затем вы можете использовать эту информацию для перехода на TabDetail страницу, которую вы создаете.

Создание новой вкладки также будет простым — просто добавьте новый элемент в GridView и перейдите к нему напрямую.