根据 WPF 中选定的 tabitem 显示内容
Show contents as per the selected tabitem in WPF
我有一个名为 App Window 的应用程序。其中我需要在选项卡项中显示已安装的应用程序。每个选项卡项都包含有关其相应应用程序的数据。如果安装了新的应用程序,那么 window 将为新安装的应用程序创建一个新的选项卡项。
*我已经根据安装的应用程序创建了一个新的标签项。
我使用的代码:
private List<TabItem> _tabItems;
private TabItem _tabAdd;
try
{
_tabItems = new List<TabItem>();
InstalledApps.DataContext = _tabItems;
InstalledApps.SelectedIndex = 0;
if (A Installed)
this.AddTabItem("A");
if (B Installed)
this.AddTabItem("B");
}
catch (Exception ex)
{
}
private TabItem AddTabItem(string AppName)
{
int count = 1;
// create new tab item
TabItem tab = new TabItem();
tab.Header = AppName;
string tabName = AppName.ToLower();
tab.Name = tabName;
tab.HeaderTemplate = InstalledApps.FindResource("TabHeader") as DataTemplate;
TextBox txt = new TextBox();
txt.IsReadOnly = true;
tab.Content = txt;
_tabItems.Insert(count - 1, tab);
return tab;
}
Xaml:
<TabControl Height="555" HorizontalAlignment="Left" Margin="0,-27,0,0" Name=" InstalledApps " ItemsSource="{Binding}" BorderThickness="0,0,0,0" SelectionChanged=" InstalledApps_SelectionChanged" VerticalAlignment="Top" Width="992" Grid.ColumnSpan="3" Grid.RowSpan="4">
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid Name="Panel">
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center"
HorizontalAlignment="Center" ContentSource="Header" Margin="80,10" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Panel" Property="Background" Value="#FFEFEFEF" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Panel" Property="Background" Value="#FFE0E0E0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Items.Count, RelativeSource={RelativeSource Self}}" Value="0">
<Setter Property="Visibility" Value="Hidden" />
</DataTrigger>
</Style.Triggers>
</Style>
<DataTemplate x:Key="TabHeader" DataType="TabItem">
<DockPanel>
<TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType=TabItem }, Path=Header}" />
</DockPanel>
</DataTemplate>
</TabControl.Resources>
</TabControl>
我的要求是:
当我从列出的选项卡项中选择任何选项卡时,它应该在内容部分显示其相应的内容(徽标、应用程序名称)。
提前致谢,
凯瑟琳·S.
对的回答如果安装了新的应用程序,那么window将为新安装的应用程序创建一个新的标签项。
- 您应该将 TabControl 的 DataContext 绑定到 ObservableCollection,这样后端添加的任何新 Tabitem 都会直接显示 UI。
Ans to 当我从列出的选项卡项中选择任何选项卡时,它应该在内容部分显示其相应的内容(徽标、应用程序名称)
- 您应该将内容
tab.Content
设置为 UserControl 或 Model(如果是 Model,则在 ResourceDictionary 中定义 DataTemplate)。 UserControl 或 DataTemplate 可以定义哪些信息应显示在哪些控件及其视觉层次结构中。
创建 class 表示您要显示的数据。例如:
public class AppDetails {
public Uri Logo { get; set; }
public string AppName { get; set; }
//etc
}
然后将 AppDetails 设置为 TabItem.Content
并像您对 HeaderTemplate 所做的那样定义 TabItem.ContentTemlate
。
tab.ContentTemplate = InstalledApps.FindResource("TabContent") as DataTemplate;
tab.Content = new AppDetails{ ... };
或者,您可以跳过 ContentTemplate 并将一些 FrameworkElement(例如自定义 UserControl)直接分配给选项卡内容:
tab.Content = new AppDetailsUserControl(AppName, Logo);
我有一个名为 App Window 的应用程序。其中我需要在选项卡项中显示已安装的应用程序。每个选项卡项都包含有关其相应应用程序的数据。如果安装了新的应用程序,那么 window 将为新安装的应用程序创建一个新的选项卡项。
*我已经根据安装的应用程序创建了一个新的标签项。
我使用的代码:
private List<TabItem> _tabItems;
private TabItem _tabAdd;
try
{
_tabItems = new List<TabItem>();
InstalledApps.DataContext = _tabItems;
InstalledApps.SelectedIndex = 0;
if (A Installed)
this.AddTabItem("A");
if (B Installed)
this.AddTabItem("B");
}
catch (Exception ex)
{
}
private TabItem AddTabItem(string AppName)
{
int count = 1;
// create new tab item
TabItem tab = new TabItem();
tab.Header = AppName;
string tabName = AppName.ToLower();
tab.Name = tabName;
tab.HeaderTemplate = InstalledApps.FindResource("TabHeader") as DataTemplate;
TextBox txt = new TextBox();
txt.IsReadOnly = true;
tab.Content = txt;
_tabItems.Insert(count - 1, tab);
return tab;
}
Xaml:
<TabControl Height="555" HorizontalAlignment="Left" Margin="0,-27,0,0" Name=" InstalledApps " ItemsSource="{Binding}" BorderThickness="0,0,0,0" SelectionChanged=" InstalledApps_SelectionChanged" VerticalAlignment="Top" Width="992" Grid.ColumnSpan="3" Grid.RowSpan="4">
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid Name="Panel">
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center"
HorizontalAlignment="Center" ContentSource="Header" Margin="80,10" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Panel" Property="Background" Value="#FFEFEFEF" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Panel" Property="Background" Value="#FFE0E0E0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Items.Count, RelativeSource={RelativeSource Self}}" Value="0">
<Setter Property="Visibility" Value="Hidden" />
</DataTrigger>
</Style.Triggers>
</Style>
<DataTemplate x:Key="TabHeader" DataType="TabItem">
<DockPanel>
<TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType=TabItem }, Path=Header}" />
</DockPanel>
</DataTemplate>
</TabControl.Resources>
</TabControl>
我的要求是: 当我从列出的选项卡项中选择任何选项卡时,它应该在内容部分显示其相应的内容(徽标、应用程序名称)。
提前致谢, 凯瑟琳·S.
对的回答如果安装了新的应用程序,那么window将为新安装的应用程序创建一个新的标签项。
- 您应该将 TabControl 的 DataContext 绑定到 ObservableCollection,这样后端添加的任何新 Tabitem 都会直接显示 UI。
Ans to 当我从列出的选项卡项中选择任何选项卡时,它应该在内容部分显示其相应的内容(徽标、应用程序名称)
- 您应该将内容
tab.Content
设置为 UserControl 或 Model(如果是 Model,则在 ResourceDictionary 中定义 DataTemplate)。 UserControl 或 DataTemplate 可以定义哪些信息应显示在哪些控件及其视觉层次结构中。
创建 class 表示您要显示的数据。例如:
public class AppDetails {
public Uri Logo { get; set; }
public string AppName { get; set; }
//etc
}
然后将 AppDetails 设置为 TabItem.Content
并像您对 HeaderTemplate 所做的那样定义 TabItem.ContentTemlate
。
tab.ContentTemplate = InstalledApps.FindResource("TabContent") as DataTemplate;
tab.Content = new AppDetails{ ... };
或者,您可以跳过 ContentTemplate 并将一些 FrameworkElement(例如自定义 UserControl)直接分配给选项卡内容:
tab.Content = new AppDetailsUserControl(AppName, Logo);