WPF TabControl页面绑定ItemsSource

FuckPatience2025-08-27 7:05

TabControl的ItemsSource属性使用比较少。这里我使用ini配置文件，使用tabcontrol呈现。

每个Tabitem显示ini中一个节的信息，键值对使用表格显示。

xaml:

XML 复制代码

 <telerik:RadTabControl ItemsSource="{Binding Sections}" SelectedIndex="{Binding SelectSectionIndex}">
     <telerik:RadTabControl.ItemTemplate>
         <DataTemplate>
             <TextBlock Text="{Binding Name}" />
         </DataTemplate>
     </telerik:RadTabControl.ItemTemplate>
     <telerik:RadTabControl.ContentTemplate>
         <DataTemplate>
             <telerik:RadGridView
                 HorizontalContentAlignment="Center"
                 VerticalContentAlignment="Center"
                 AutoGenerateColumns="False"
                 CanUserGroupColumns="False"
                 CanUserReorderColumns="False"
                 CanUserResizeColumns="True"
                 CanUserSelect="True"
                 CanUserSortColumns="False"
                 CanUserSortGroups="False"
                 EnableLostFocusSelectedState="False"
                 FrozenColumnsSplitterVisibility="Collapsed"
                 IsFilteringAllowed="False"
                 IsHitTestVisible="True"
                 IsReadOnly="False"
                 IsTabStop="False"
                 ItemsSource="{Binding KeyValues, NotifyOnSourceUpdated=True}"
                 RowHeight="29"
                 RowIndicatorVisibility="Collapsed"
                 SelectionUnit="FullRow"
                 ShowGroupPanel="False"
                 ShowSearchPanel="False">
                 <telerik:RadGridView.Columns>
                     <telerik:GridViewDataColumn
                         Width="*"
                         DataMemberBinding="{Binding Key}"
                         Header="键"
                         IsReadOnly="True" />
                     <telerik:GridViewDataColumn
                         Width="2*"
                         DataMemberBinding="{Binding Value}"
                         Header="值" />
                 </telerik:RadGridView.Columns>
             </telerik:RadGridView>
         </DataTemplate>
     </telerik:RadTabControl.ContentTemplate>
 </telerik:RadTabControl>

VM:

cs 复制代码

private ObservableCollection<IniSection> _sections;
public ObservableCollection<IniSection> Sections
{
    get => _sections;
    set => this.RaiseAndSetIfChanged(ref _sections, value);
}

cs 复制代码

public class IniSection
{
    public string Name { get; set; }
    public ObservableCollection<IniKeyValue> KeyValues { get; set; } = new ObservableCollection<IniKeyValue>();
}

cs 复制代码

public class IniKeyValue
{
    public string Key { get; set; }
    public string Value { get; set; }
}

效果：

ini:

界面：