在 wpf mvvm 中切换选项卡后如何刷新选项卡内容答案

【问题标题】：How to refresh tab content after switching tabs in wpf mvvm在 wpf mvvm 中切换选项卡后如何刷新选项卡内容
【发布时间】：2019-02-07 20:42:36
【问题描述】：

我正在尝试构建一个包含选项卡的 WPF 窗口。当我选择不同的选项卡时，是否可以刷新选项卡页的控件（例如文本框、datagridview），所以当我返回上一个选项卡时，我不会想要查看任何数据，而是刷新控件。我想使用 MVVM wpf 来实现这一点

在加载应用程序时，我用表格数据填充数据网格，并且我有两个文本框，我可以通过它们选择日期范围。我不知道如何刷新文本框和数据网格以在选项卡切换时进入初始状态。

我尝试使用 window.Interactivity dll 刷新数据。但是没有触发任何事件。

           <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeftButtonDown">
                    <i:InvokeCommandAction Command="{Binding ontabclick}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>

ViewModel.cs：

  ontabclick = new RelayCommand(o => onclick());
  public void onclick()
    { MessageBox.Show("Working correctly"); }

Window.xaml

 xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

  <TabItem Header="AuditInformation">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeftButtonDown">
                    <i:InvokeCommandAction Command="{Binding ontabclick}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <UniformGrid>
                <DockPanel>
                    <StackPanel Margin="1,0,0,0" Height="55" >
                    <DatePicker Focusable = "False"  SelectedDate="{Binding FromDate}" Margin="80,10,30,-10"  Height="25" HorizontalAlignment="Left"  Name="Fromdatedatepicker"   VerticalAlignment="Top" Width="115" >
                            <DatePicker.Resources>
                                <Style TargetType="{x:Type DatePickerTextBox}">
                                    <Setter Property="Control.Template">
                                        <Setter.Value>
                                            <ControlTemplate>
                                                <TextBox x:Name="PART_TextBox" 
                                Text="{Binding Path=SelectedDate, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type DatePicker}}, StringFormat={}{0:yyyy/MM/dd}}" />
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </DatePicker.Resources>
                        </DatePicker>

                        <Label Width="69" Height="23.277" HorizontalAlignment="Left" Margin="1,-10,30,0" VerticalAlignment="Top" Content="From Date"/>
                        <DatePicker Focusable = "False" SelectedDate="{Binding Todate}" Margin="265,-27,30,-10" Height="25" HorizontalAlignment="Left"  Name="Todatedatepicker" VerticalAlignment="Top" Width="115" >
                            <DatePicker.Resources>
                                <Style TargetType="{x:Type DatePickerTextBox}">
                                    <Setter Property="Control.Template">
                                        <Setter.Value>
                                            <ControlTemplate>
                                                <TextBox x:Name="PART_TextBox1" 
                                Text="{Binding Path=SelectedDate, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type DatePicker}}, StringFormat={}{0:yyyy/MM/dd}}" />
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </DatePicker.Resources>
                        </DatePicker>

                        <Label Width="60" Height="23.277" HorizontalAlignment="Left" Margin="200,-23,30,0" VerticalAlignment="Top" Content="To Date"/>
                        <Button  Command="{Binding dataSearch}" Margin="300,-20,30,0" Width="60" Height="23.277"  Content="Search"></Button>

                    </StackPanel>
                </DockPanel>
                <DockPanel Margin="0,0,0,-139">
                    <StackPanel Height="350">
                        <DataGrid x:Name="datagrid"  AutoGenerateColumns="True" CanUserAddRows="False"
                            Height="350" Width="365" Margin="5" HorizontalAlignment="Left">
                            <DataGrid.Style>
                                <Style TargetType="DataGrid">
                                    <Setter Property="ItemsSource" Value="{Binding ModelClasstab}"/>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding Isdatementioned}" Value="True">
                                            <Setter Property="ItemsSource" Value="{Binding ModelClasstabwithdate   }"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </DataGrid.Style>
                        </DataGrid>

                    </StackPanel>
                </DockPanel>
            </UniformGrid>
        </TabItem>

【问题讨论】：

您的绑定似乎根本不起作用。您是否实现了INotifyPropertyChanged 并使用NotifyPropertyChanged() 来更新您的用户界面？
@MightyBadaboom 是的，我正在使用 INotifyPropertyChanged 来更新 UI。 viewmodel 实现了 Inotifypropertychanged，我将它用于我的所有文本框和数据网格。但是对于 tabitem click 是否也需要实现它。对不起，我的问题可能很新手，我刚开始学习 wpf。
对我来说，你想要什么并不明显。切换标签时是否要重置数据？如果是：为什么不在切换时在 ViewModel 中重置它们？

标签： c# wpf mvvm

【解决方案1】：

您可以绑定TabControl 的SelectedIndex 或SelectedItem 属性。在您的视图模型中，您可以刷新所需的控件。

<TabControl SelectedIndex="{Binding SelectedIndex}">
    <TabItem Header="One" >
        <TextBox Text="{Binding TextOne}" />
    </TabItem>
    <TabItem Header="Two" >
        <TextBox Text="{Binding TextTwo}" />
    </TabItem>
</TabControl>

在您的视图模型中

public int SelectedIndex
{
    get => _selectedIndex;
    set
    {
        _selectedIndex = value;
        if (_selectedIndex == 0)
            TextOne = string.Empty;
        else if (_selectedIndex == 1)
            TextTwo = string.Empty;
        NotifyPropertyChanged(nameof(SelectedIndex));
    }
}

【讨论】：