add: 选项卡删除功能

Author: chenxuuu

llcomNext/LLCOM/ViewModels/Pages/DataPageViewModel.cs

@@ -1,6 +1,9 @@
 using System;
 using System.Collections.ObjectModel;
+using System.Threading.Tasks;
 using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using Ursa.Controls;
 
 namespace LLCOM.ViewModels;
 
@@ -21,8 +24,24 @@ public DataPageViewModel(Func<Type, ViewModelBase> getService)
     {
         _getService = getService;
 
-        _tabList.Add(new DataPageTabItemModel("test1", _getService(typeof(LogPageViewModel))));
-        _tabList.Add(new DataPageTabItemModel("test2", _getService(typeof(OnlinePageViewModel))));
+        TabList.Add(new DataPageTabItemModel("(1)串口", _getService(typeof(LogPageViewModel))));
+        TabList.Add(new DataPageTabItemModel("(2)TCP服务端", _getService(typeof(OnlinePageViewModel))));
+    }
+    
+    [RelayCommand]
+    private void AddTabItem()
+    {
+        var name = $"({TabList.Count + 1})测试xx";
+        TabList.Add(new DataPageTabItemModel(name, _getService(typeof(OnlinePageViewModel))));
+    }
+
+    [RelayCommand]
+    private async Task RemoveTabItem(DataPageTabItemModel model)
+    {
+        var r = await MessageBox.ShowAsync("确定要删除这个测试卡吗？", "删除提示",
+            icon: MessageBoxIcon.Warning, button: MessageBoxButton.YesNo);
+        if(r == MessageBoxResult.Yes)
+            TabList.Remove(model);
     }
 }
 

llcomNext/LLCOM/Views/Pages/DataPageView.axaml

@@ -12,14 +12,44 @@
     <Design.DataContext>
         <vm:DataPageViewModel />
     </Design.DataContext>
-    <TabControl
-        DisplayMemberBinding="{Binding Header, x:DataType=vm:DataPageTabItemModel}"
-        ItemsSource="{Binding TabList}"
-        SelectedIndex="{Binding SelectedTabIndex}">
-        <TabControl.ContentTemplate>
-            <DataTemplate x:DataType="vm:DataPageTabItemModel">
-                <UserControl Content="{Binding Content}" />
-            </DataTemplate>
-        </TabControl.ContentTemplate>
-    </TabControl>
+    <Grid>
+        <TabControl ItemsSource="{Binding TabList}" SelectedIndex="{Binding SelectedTabIndex}">
+            <TabControl.ItemTemplate>
+                <DataTemplate>
+                    <StackPanel Orientation="Horizontal" Spacing="0">
+                        <TextBlock VerticalAlignment="Center" Text="{Binding Header}" />
+                        <Button
+                            Width="20"
+                            Height="20"
+                            MinWidth="0"
+                            MinHeight="0"
+                            Margin="0"
+                            Padding="0"
+                            VerticalAlignment="Center"
+                            Command="{Binding $parent[UserControl].((vm:DataPageViewModel)DataContext).RemoveTabItemCommand}"
+                            CommandParameter="{Binding}"
+                            Theme="{DynamicResource BorderlessButton}">
+                            <TextBlock
+                                Padding="0"
+                                HorizontalAlignment="Center"
+                                VerticalAlignment="Center"
+                                FontFamily="{DynamicResource Phosphor}"
+                                Text="&#xE4F6;" />
+                        </Button>
+                    </StackPanel>
+                </DataTemplate>
+            </TabControl.ItemTemplate>
+            <TabControl.ContentTemplate>
+                <DataTemplate x:DataType="vm:DataPageTabItemModel">
+                    <UserControl Content="{Binding Content}" />
+                </DataTemplate>
+            </TabControl.ContentTemplate>
+        </TabControl>
+
+        <Button
+            HorizontalAlignment="Stretch"
+            VerticalAlignment="Bottom"
+            Command="{Binding AddTabItemCommand}"
+            Content="ADD" />
+    </Grid>
 </UserControl>