概述Tab頁面是一個很常用的控件，針對頁面固定的場景，直接給Item進行數(shù)據(jù)綁定就行，如下所示： <dx:DXTabControl cal:Message.Attach="[Event Loaded]=[TabControl_Loaded($source,$eventArgs)]"> <dx:DXTabItem Header="{Binding Region[0]}" Visibility="{Binding TabPageDispaly[0]}"> <ContentControl cal:View.Model="{Binding ParamPage}" /> </dx:DXTabItem> <dx:DXTabItem Header="{Binding Region[1]}" Visibility="{Binding TabPageDispaly[1]}"> <ContentControl cal:View.Model="{Binding ParamPage}"/> </dx:DXTabItem> <dx:DXTabItem Header="{Binding Region[2]}" Visibility="{Binding TabPageDispaly[2]}"> <ContentControl cal:View.Model="{Binding ParamPage}"/> </dx:DXTabItem> </dx:DXTabControl>
但是針對頁面需要動態(tài)增減的場景，這種方法就不再適用了，下面就針對這種情況進行講解.
數(shù)據(jù)定義 [AddINotifyPropertyChangedInterface] public class UserInfos { /// <summary> /// Header /// </summary> public int Header { get; set; }
/// <summary> /// 姓名 /// </summary> public string UserName { get; set; }
public EventAggregatorViewModel EventAggregatorViewModel { get; set; } }
這里定義了一個標(biāo)題Header ，用戶名UserName ，以及另外個ViewModel類
數(shù)據(jù)集合定義：
public BindableCollection<UserInfos> UserInformationList { get; set; }
邏輯實現(xiàn)后臺實現(xiàn)-數(shù)據(jù)添加：這里有幾個頁面就add幾組數(shù)據(jù)
try { UserInformationList = new BindableCollection<UserInfos>(); UserInformationList.Add(new UserInfos() { Header = 1, UserName = "張三", EventAggregatorViewModel = new EventAggregatorViewModel() }); UserInformationList.Add(new UserInfos() { Header = 2, UserName = "李四", EventAggregatorViewModel = new EventAggregatorViewModel() }); UserInformationList.Add(new UserInfos() { Header = 3, UserName = "王五", EventAggregatorViewModel = new EventAggregatorViewModel() }); } catch (Exception ex) { MessageBox.Show($"{ex}"); }
item刪除：這里通過前臺綁定事件實現(xiàn)
public void RemoveItem(object dataContext) { var buttonContext = dataContext as SimpleButton; var item = buttonContext.DataContext as UserInfos; loginfo.Debug($"Enter [RemoveItem] Header = [{item.Header}]"); UserInformationList.Remove(item); loginfo.Debug($"Leave [RemoveItem]."); }
前臺XAML:這里標(biāo)題和Item信息都通過模板實現(xiàn)
<dx:DXTabControl ItemsSource="{Binding UserInformationList}"> <dx:DXTabControl.ItemHeaderTemplate> <DataTemplate> <dxlc:LayoutItem Label="{Binding UserName}"> <dx:SimpleButton Margin="5,0,0,0" cal:Message.Attach="[Event Click] = [Action RemoveItem($source)]" Content="×" /> </dxlc:LayoutItem> </DataTemplate> </dx:DXTabControl.ItemHeaderTemplate> <dx:DXTabControl.ItemTemplate> <DataTemplate> <ContentControl cal:View.Model="{Binding EventAggregatorViewModel}" /> </DataTemplate> </dx:DXTabControl.ItemTemplate> </dx:DXTabControl>
效果演示
|
