WPF TabControl页面绑定ItemsSource

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:

界面:

相关推荐
cplmlm17 小时前
WPF+MVVM入门学习
c#·wpf
诸葛务农2 天前
人形机器人——电子皮肤技术路线:光学式电子皮肤及MIT基于光导纤维的分布式触觉传感电子皮肤
分布式·机器人·wpf
界面开发小八哥3 天前
界面控件DevExpress WPF中文教程:Data Grid - 绑定数据
ui·.net·wpf·界面控件·devexpress·ui开发
界面开发小八哥3 天前
图表组件SciChart WPF再升级:v8.9带来油气井图、新交互与可视化增强
信息可视化·wpf·数据可视化·scichart
创可贴治愈心灵4 天前
WPF中UI线程频繁操作造成卡顿的处理
ui·c#·wpf
阿登林5 天前
初步学习WPF-Prism
学习·wpf
△曉風殘月〆5 天前
WPF MVVM进阶系列教程(三、使用依赖注入)
wpf·mvvm
此wei浩亦5 天前
WPF中使用 using prism.region 报错
c#·wpf·prism
dotent·6 天前
一个 WPF 文档和工具窗口布局容器
wpf