如何在WPF中更改选项卡时刷新文本框文本

Question

Well in my WPF application I am using Tab Control which has around 5 tabs. The view of each tab is a user control which I add via a tool box.

Main Xaml File:

<Grid>
    <TabControl Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="tabControl1" VerticalAlignment="Stretch" Width="Auto">
        <TabItem Header="Device Control" Name="Connect">
            <ScrollViewer Height="Auto" Name="scrollViewer1" Width="Auto">
                <my:ConnectView Name="connectView1" />
            </ScrollViewer>
        </TabItem>
        <TabItem Header="I2C">
            <ScrollViewer Height="Auto" Name="scrollViewer2" Width="Auto">
                <my1:I2CControlView Name="i2CControlView1" />
            </ScrollViewer>
        </TabItem>
            <TabItem Header="Voltage">
                <ScrollViewer Height="Auto" Name="scrollViewer3" Width="Auto">
                    <my2:VoltageView Name="voltageView1" />
                </ScrollViewer>
            </TabItem>
    </TabControl>
</Grid>

If you notice each view ie.e Connect , I2C and Voltage is a user control which has a view, viewmodel and model class :)

Each of these views have set of textboxes in their respective xaml files.

Connect.xaml:

<Grid>
    <Textbox Text="{Binding Box}", Name="hello" />
    // Some more textboxes
</Grid>

I2c.xaml:

<Grid>
    <Textbox Text="{Binding I2CBox}", Name="helI2c" />
    // Some more textboxes
</Grid>

Voltage.xaml:

<Grid>
    <Textbox Text="{Binding VoltBox}", Name="heVoltllo" />
    // Some more textboxes
</Grid>**

By default I have set the text of these textboxes to some value. Lets say "12" "13" "14" respectively in my view model classes. My main requirement is to set the text of these textboxes present in each user control to get refreshed when I change the tab.

Description:

Lets say Connect View is displayed: Value of Textbox is 12 and I edit it and change it to 16. Now I click on I2C tab and then I go back to Connect tab, I want the textbox value to get refreshed back to the initial value ie 12.

To be precise, is their a method called visibilitychanged() which I can write in all my user control classes, where I can set the value of these Ui components whenever tabs are changed?

Please help :)

Answer 1

Ok, for example. We have simple WPF app. Main window:

<Window x:Class="tabs.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:tabs" 
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TabControl SelectionChanged="TabControl_SelectionChanged">
            <TabItem Header="1">
                <my:Tab1/>
            </TabItem>
            <TabItem Header="2">
                <my:Tab2/>
            </TabItem>
        </TabControl>
    </Grid>
</Window>

Tab1 is just default template from VS, so no code here. Tab2:

<UserControl x:Class="tabs.Tab2"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <TextBox Height="23" HorizontalAlignment="Left" Name="textBox1" VerticalAlignment="Top" Width="120" Text="asd" />
    </Grid>
</UserControl>

As you can see we have event handler for TabControl_SelectionChanged event. In code behind of mainwindow we have:

private void TabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (e.Source is TabControl)
    {
        TabItem tabitem = e.AddedItems[0] as TabItem;
        if (tabitem == null)
            return;

        Tab2 tab2 = tabitem.Content as Tab2;
        if (tab2 == null)
            return;

        tab2.textBox1.Text = "zxczxczxczxc";
    }
}

Something like this. You can call Reinit method instead of setting value of textbox. Hope this will help.

Answer 2

You can do data binding to the TabControl "SelectedTab" or "SelectedIndex" properties. so when ever user changes tab your setter in view model will be called, there you can reset the text box property bindings..

Edit:

Here is a sample

XAML:

<TabControl SelectedIndex="{Binding TabIndex}">
            <TabItem Header="Tab 1">
                <TextBox Text="{Binding TextValue1}" Height="20" Width="200"></TextBox>
            </TabItem>
            <TabItem Header="Tab 2">
                <TextBox Text="{Binding TextValue2}" Height="20" Width="200"></TextBox>
            </TabItem>
            <TabItem Header="Tab 3">
                <TextBox Text="{Binding TextValue3}" Height="20" Width="200"></TextBox>
            </TabItem>
        </TabControl>

Properties and Method In ViewModel:

private int tabIndex;
        public int TabIndex
        {
            get { return tabIndex; }
            set
            {
                tabIndex = value;
                NotifyPropertyChanged("TabIndex");

                ResetTextBoxes();
            }
        }

        private void ResetTextBoxes()
        {
            TextValue1 = "12";
            TextValue2 = string.Empty;
            TextValue3 = "default";
        }

        private string textValue1;
        public string TextValue1
        {
            get { return textValue1; }
            set
            {
                textValue1 = value;
                NotifyPropertyChanged("TextValue1");
            }
        }

        private string textValue2;
        public string TextValue2
        {
            get { return textValue2; }
            set
            {
                textValue2 = value;
                NotifyPropertyChanged("TextValue2");
            }
        }

        private string textValue3;
        public string TextValue3
        {
            get { return textValue3; }
            set
            {
                textValue3 = value;
                NotifyPropertyChanged("TextValue3");
            }
        }