如何在 WPF 中从一个 tabitem 移动到另一个 tabitem答案

【问题标题】：how to move from one tabitem to another in WPF如何在 WPF 中从一个 tabitem 移动到另一个 tabitem
【发布时间】：2013-03-04 21:43:49
【问题描述】：

我有一个tab-control，其中包含三个选项卡项。每个选项卡项上都有一个datagrid。并且所有这三个数据网格在各自的选项卡项上都是 Master-Detail-SubDetail 形式。

当用户在主数据网格上选择一行时，如何从第一个选项卡项移动到第二个选项卡项？我使用ADO.Net 实体框架创建了一个模型来创建这个主从视图。

XAML 布局

 <TabControl Height="270" HorizontalAlignment="Left" Margin="16,23,0,0" Name="tabControl1" VerticalAlignment="Top" Width="462">
        <TabItem Header="Person" Name="tabItem1">
            <Grid DataContext="{StaticResource peopleViewSource}">
                <DataGrid AutoGenerateColumns="False" EnableRowVirtualization="True" Height="166" SelectedItem="{Binding personDetails}"
                          HorizontalAlignment="Left" ItemsSource="{Binding}" Margin="64,23,0,0" Name="peopleDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" VerticalAlignment="Top" Width="289">
                    <DataGrid.Columns>
                        <DataGridTextColumn x:Name="personIDColumn" Binding="{Binding Path=personID}" Header="person ID" Width="SizeToHeader" />
                        <DataGridTextColumn x:Name="firstNameColumn" Binding="{Binding Path=firstName}" Header="first Name" Width="SizeToHeader" />
                        <DataGridTextColumn x:Name="lastNameColumn" Binding="{Binding Path=lastName}" Header="last Name" Width="SizeToHeader" />
                    </DataGrid.Columns>
                </DataGrid>
            </Grid>
        </TabItem>
        <TabItem Header="Person Details" Name="tabItem2">
            <Grid DataContext="{StaticResource peoplepersonDetailsViewSource}">
                <DataGrid AutoGenerateColumns="False" EnableRowVirtualization="True" Height="120" SelectedItem="{Binding personDetails.personStatus}"
                          HorizontalAlignment="Left" ItemsSource="{Binding}" Margin="82,18,0,0" Name="personDetailsDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" VerticalAlignment="Top" Width="172">
                    <DataGrid.Columns>
                        <DataGridTextColumn x:Name="detailIDColumn" Binding="{Binding Path=detailID}" Header="detail ID" Width="SizeToHeader" />
                        <DataGridTextColumn x:Name="positionColumn" Binding="{Binding Path=position}" Header="position" Width="SizeToHeader" />
                        <DataGridTextColumn x:Name="personIDColumn1" Binding="{Binding Path=personID}" Header="person ID" Width="SizeToHeader" />
                    </DataGrid.Columns>
                </DataGrid>
            </Grid>
        </TabItem>
        <TabItem Header="Person Status" Name="tabItem3">
            <Grid DataContext="{StaticResource peoplepersonDetailspersonStatusViewSource}">
                <DataGrid AutoGenerateColumns="False" EnableRowVirtualization="True" Height="143" HorizontalAlignment="Left" ItemsSource="{Binding}" Margin="91,23,0,0" Name="personStatusDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" VerticalAlignment="Top" Width="185">
                    <DataGrid.Columns>
                        <DataGridTextColumn x:Name="detailIDColumn1" Binding="{Binding Path=detailID}" Header="detail ID" Width="SizeToHeader" />
                        <DataGridTextColumn x:Name="positionColumn1" Binding="{Binding Path=position}" Header="position" Width="SizeToHeader" />
                        <DataGridTextColumn x:Name="statussColumn" Binding="{Binding Path=statuss}" Header="statuss" Width="SizeToHeader" />
                    </DataGrid.Columns>
                </DataGrid>
            </Grid>
        </TabItem>
    </TabControl>

【问题讨论】：

我感觉这里完全没有 MVVM...
看看this 对TabControl 的真正含义的解释...
没有 MVVM 就没有 WPF...如果您尝试以 winforms 方式使用 WPF，您将遭受很多痛苦。
感谢您的链接，我刚刚通过生成实体启动了我的应用程序。
您可以在 Master Datagrid 上使用DataTrigger 来设置TabControls SelectedIndex

标签： c# wpf ado.net wpf-controls wpfdatagrid

【解决方案1】：

您可以在DataGrid SelectionChanged 事件上设置EventTrigger

由于 EventTrigger 只允许动画，您可以设置 Int32AnimationUsingKeyFrames 动画来更改 TabControl SelectedIndex

触发器

 <DataGrid.Triggers>
    <EventTrigger RoutedEvent="DataGrid.SelectionChanged" > // SelectionChanged Event
        <BeginStoryboard>
            <Storyboard >
                <Int32AnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="tabControl1" Storyboard.TargetProperty="SelectedIndex"> // set target control and target property
                    <SplineInt32KeyFrame KeyTime="00:00:00" Value="1"/> // Value = TabControl Selected index you want to show
                </Int32AnimationUsingKeyFrames>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</DataGrid.Triggers>

这是一个例子：

<TabControl Height="270" HorizontalAlignment="Left" Margin="16,23,0,0" Name="tabControl1" VerticalAlignment="Top" Width="462">
        <TabItem Header="Person" Name="tabItem1">
            <Grid DataContext="{StaticResource peopleViewSource}">
                <DataGrid AutoGenerateColumns="False" EnableRowVirtualization="True" Height="166" SelectedItem="{Binding personDetails}"
                          HorizontalAlignment="Left" ItemsSource="{Binding}" Margin="64,23,0,0" Name="peopleDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" VerticalAlignment="Top" Width="289">
                    <DataGrid.Columns>
                        <DataGridTextColumn x:Name="personIDColumn" Binding="{Binding Path=personID}" Header="person ID" Width="SizeToHeader" />
                        <DataGridTextColumn x:Name="firstNameColumn" Binding="{Binding Path=firstName}" Header="first Name" Width="SizeToHeader" />
                        <DataGridTextColumn x:Name="lastNameColumn" Binding="{Binding Path=lastName}" Header="last Name" Width="SizeToHeader" />
                    </DataGrid.Columns>
                        <DataGrid.Triggers>
                            <EventTrigger RoutedEvent="DataGrid.SelectionChanged" >
                                <BeginStoryboard>
                                    <Storyboard >
                                        <Int32AnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="tabControl1" Storyboard.TargetProperty="SelectedIndex">
                                            <SplineInt32KeyFrame KeyTime="00:00:00" Value="1"/>
                                        </Int32AnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </DataGrid.Triggers>
                </DataGrid>
            </Grid>
        </TabItem>
     ......

这是我的模型

代码：

namespace WpfApplication7
{
    public partial class MainWindow : Window
    {

        private Person _selectedPerson;
        private ObservableCollection<Person> _persons = new ObservableCollection<Person>();

        public MainWindow()
        {
            InitializeComponent();
            Items.Add(new Person { personID = "Stack" });
            Items.Add(new Person { personID = "Overflow" });
        }

        public ObservableCollection<Person> Items
        {
            get { return _persons; }
            set { _persons = value; }
        }

        public Person SelectedPerson
        {
            get { return _selectedPerson; }
            set { _selectedPerson = value; }
        }

    }

    public class Person
    {
        public string personID { get; set; }
        public string firstname { get; set; }
        public string lastname { get; set; }
    }
}

Xaml：

<Window x:Class="WpfApplication7.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="399" Width="464" Name="UI" >

    <Grid>
        <TabControl Height="270" HorizontalAlignment="Left" Margin="16,23,0,0" Name="tabControl1" VerticalAlignment="Top" Width="462">
            <TabItem Header="Person" Name="tabItem1">
                <Grid DataContext="{Binding ElementName=UI, Path=Items}" >
                    <DataGrid  AutoGenerateColumns="False" EnableRowVirtualization="True" Height="166" SelectedItem="{Binding personDetails}"
                          HorizontalAlignment="Left" ItemsSource="{Binding}" Margin="64,23,0,0" Name="peopleDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" VerticalAlignment="Top" Width="289">
                        <DataGrid.Columns>
                            <DataGridTextColumn x:Name="personIDColumn" Binding="{Binding Path=personID}" Header="person ID" Width="SizeToHeader" />
                            <DataGridTextColumn x:Name="firstNameColumn" Binding="{Binding Path=firstName}" Header="first Name" Width="SizeToHeader" />
                            <DataGridTextColumn x:Name="lastNameColumn" Binding="{Binding Path=lastName}" Header="last Name" Width="SizeToHeader" />
                        </DataGrid.Columns>
                        <DataGrid.Triggers>
                            <EventTrigger RoutedEvent="DataGrid.SelectionChanged" >
                                <BeginStoryboard>
                                    <Storyboard >
                                        <Int32AnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="tabControl1" Storyboard.TargetProperty="SelectedIndex">
                                            <SplineInt32KeyFrame KeyTime="00:00:00" Value="1"/>
                                        </Int32AnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </DataGrid.Triggers>
                    </DataGrid>
                </Grid>
            </TabItem>
            <TabItem Header="Person Details" Name="tabItem2">
                <Grid>
                    <DataGrid AutoGenerateColumns="False" EnableRowVirtualization="True" Height="120" SelectedItem="{Binding personDetails.personStatus}"
                          HorizontalAlignment="Left" ItemsSource="{Binding}" Margin="82,18,0,0" Name="personDetailsDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" VerticalAlignment="Top" Width="172">
                        <DataGrid.Columns>
                            <DataGridTextColumn x:Name="detailIDColumn" Binding="{Binding Path=detailID}" Header="detail ID" Width="SizeToHeader" />
                            <DataGridTextColumn x:Name="positionColumn" Binding="{Binding Path=position}" Header="position" Width="SizeToHeader" />
                            <DataGridTextColumn x:Name="personIDColumn1" Binding="{Binding Path=personID}" Header="person ID" Width="SizeToHeader" />
                        </DataGrid.Columns>
                    </DataGrid>
                </Grid>
            </TabItem>
            <TabItem Header="Person Status" Name="tabItem3">
                <Grid>
                    <DataGrid AutoGenerateColumns="False" EnableRowVirtualization="True" Height="143" HorizontalAlignment="Left" ItemsSource="{Binding}" Margin="91,23,0,0" Name="personStatusDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" VerticalAlignment="Top" Width="185">
                        <DataGrid.Columns>
                            <DataGridTextColumn x:Name="detailIDColumn1" Binding="{Binding Path=detailID}" Header="detail ID" Width="SizeToHeader" />
                            <DataGridTextColumn x:Name="positionColumn1" Binding="{Binding Path=position}" Header="position" Width="SizeToHeader" />
                            <DataGridTextColumn x:Name="statussColumn" Binding="{Binding Path=statuss}" Header="statuss" Width="SizeToHeader" />
                        </DataGrid.Columns>
                    </DataGrid>
                </Grid>
            </TabItem>
        </TabControl>
    </Grid>
</Window>

【讨论】：

感谢您的回复.. 但我有一个错误提示-“PresentationFramework.dll 中发生了类型为 'System.InvalidCastException' 的未处理异常附加信息：指定的转换无效。”
这里工作正常，我添加了我用来测试这个的模型应用程序Trigger，所以你可以在你的应用程序之外进行测试
好的。确实很感谢 :) 再问一个问题，它后面没有路由事件的代码吗？
不，我们将其用作触发器，因此不需要事件背后的代码
这对我来说是完美的，但如果我选择我的第一个 tabitem，我会得到一个异常“System.InvalidCastException”- {“Specified cast is not valid.”}.. 请你帮帮我来解决这个问题。我被困在这里:(确实谢谢