首页 > 解决方案 > 如何在 tabitem 中使用弹出窗口来显示选项卡内容正在 wpf mvvm 中加载?

问题描述

我正在使用 tabitem ,其中包含一个弹出窗口来显示数据正在从 API 加载。问题是弹出窗口显示在窗口上,即使数据仍在加载,只要选择另一个选项卡,它就会消失。

弹出窗口是否可以像其他控件一样显示在选项卡中?无论是否选择了包含选项卡,并继续做它正在做的事情?如果不适合这种情况,您建议使用什么控件而不是弹出窗口?

下面是一个例子来解释:

视图模型:

    {
        #region INotifyPropertyChanged Members

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion

        private bool showPopUp;
        public bool ShowPopUp
        {
            get { return showPopUp; }
            set
            {
                showPopUp = value;
                OnPropertyChanged(nameof(ShowPopUp));
            }
        }
    }

后面的代码:

public partial class MainWindow : Window
    {

        MainWindowViewModel model = new MainWindowViewModel();
        public MainWindow()
        {
            InitializeComponent();
            DataContext = model;
        }

        private async void Button_Click(object sender, RoutedEventArgs e)
        {
            //loading data
            model.ShowPopUp = true;
            await Task.Delay(100000);
            model.ShowPopUp = false;
        }
    }

XAML:

<TabControl x:Name="tc">
            <TabItem x:Name="tab1" Header="Tab1">
                <TabItem.Content>
                    <Grid>
                        <Popup
                            Name="popUp1"
                            StaysOpen="True"
                            IsOpen="{Binding ShowPopUp, Mode=OneWay,
                                     UpdateSourceTrigger=PropertyChanged}"
                            AllowDrop="True" Placement="Center" 
                            Height="90" Width="135">
                            <Grid Background="LightGray">
                                <TextBlock Text="Loading ..." Margin="32" FontSize="16" />
                            </Grid>
                        </Popup>
                        <Button Height="30" Width="100" Content="Show popup" Click="Button_Click"/>
                    </Grid>
                </TabItem.Content>
            </TabItem>
            <TabItem
                x:Name="tab2"
                Header="Tab2">
            </TabItem>
</TabControl>

标签: c#wpfmvvm

解决方案


推荐阅读