#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
и перейдите к нему напрямую.